/* ========================================================================== */
/* OPTIMUM RV CRM — prototype stylesheet                                       */
/* Naming contract: `--group_name` tokens, flat block classes with descendant  */
/* selectors, `.is-*` state classes. One banner per block, in DOM order.       */
/* ========================================================================== */

/* ========================================================================== */
/* TOKENS                                                                     */
/* ========================================================================== */
:root {
	/* palette — shared with optimumrv.com */
	--color_white:#fff;
	--color_light-grey:#fbfbfb;
	--color_medium-grey:#6b6b6b; /* was #777 — 4.85:1 on the grey list, 5.3:1 on white */
	--color_dark-grey:#585858;
	--color_black:#000;
	--color_red:#d02030;
	--color_green:#3da454;
	--color_yellow:#fff200;
	--color_tan:#bbb;
	--color_text:#1f1f1f;
	--color_text-muted:var(--color_medium-grey);
	--color_text-soft:#9a9a9a;
	--color_line:#e6e6e6;
	--color_line-strong:#d0d0d0;
	--color_brand-primary:var(--color_black);
	--color_brand-secondary:var(--color_red);
	--color_brand-secondary-darker:color-mix(in srgb, var(--color_brand-secondary), #000 15%);
	--color_brand-secondary-soft:color-mix(in srgb, var(--color_brand-secondary), #fff 92%);
	--color_brand-tertiary:var(--color_green);
	--color_bg-primary:var(--color_white);
	--color_bg-secondary:#f4f4f5;
	--color_bg-secondary-darker:color-mix(in srgb, var(--color_bg-secondary), #000 3%);
	--color_bg-secondary-darkest:color-mix(in srgb, var(--color_bg-secondary), #000 6%);

	/* pipeline stages — one hue per stage, used by columns, cards, stepper */
	--stage_assigned:#1e7ee6;
	--stage_attempting:#1c9c8c;
	--stage_working:#6a4fd6;
	--stage_agreed:#2b9a50;
	--stage_documents:#2b9a50;
	--stage_contract:#3f55c4;
	--stage_processing:#7d8a22;
	--stage_motility:#8a6a3f;
	--stage_checkin:#1f8fd1;
	--stage_arrived:#8e3fc4;
	--stage_forsale:#2b9a50;
	--stage_deals:#3f55c4;
	--stage_payout:#1f8a78;

	/* status pills */
	--status_overdue:#d9531e;
	--status_overdue-bg:#fdeee7;
	--status_flag:#b5620a;
	--status_flag-bg:#fff3df;
	--status_hold:#b5620a;
	--status_hold-bg:#fff3df;
	--status_info:#1e7ee6;
	--status_info-bg:#e8f1fd;
	--status_ok:#2b9a50;
	--status_ok-bg:#e6f5ea;
	--status_neutral:#585858;
	--status_neutral-bg:#ececec;
	/* pill TEXT on the tinted pill backgrounds — one step darker than the tone so small labels clear 4.5:1; dots and icons keep the tone */
	--status_overdue-text:#a83c0d;
	--status_flag-text:#8f4d07;
	--status_info-text:#1660b0;
	--status_ok-text:#1c6e36;

	/* messaging thread */
	--thread_outbound:#1a6ff0;
	--color_link:#155fd0; /* link text on light surfaces — 5.3:1 on the grey bubble */
	--thread_outbound-text:#fff;
	--thread_inbound:#ececee;
	--thread_note:#fff8dc;
	--thread_note-line:#f0e2a8;

	/* type */
	--font_name-primary:'Roboto', system-ui, sans-serif;
	--font_name-secondary:'Roboto Condensed', var(--font_name-primary);
	/* type scale — nine steps, every font-size in this file uses one of them */
	--font_size-display:2rem;
	--font_size-large:1.375rem;
	--font_size-medium:1.125rem;
	--font_size-primary:1rem;
	--font_size-small:.875rem;
	--font_size-xsmall:.75rem;
	--font_size-tiny:.6875rem;
	--font_size-micro:.625rem;
	--font_leading-primary:1.45;
	--font_weight-primary:400;
	--font_weight-bold-primary:500;
	--font_weight-extra-bold-primary:700;
	--font_size-title:clamp(1.5rem, 1.2rem + 1vw, 1.9rem);

	/* layout */
	--gutter:20px;
	--gutter-small:12px;
	--gutter-large:28px;
	--topbar_height:64px;
	--inbox_width:clamp(300px, 30vw, 420px);
	--sidebar_width:min(400px, 90vw);
	--radius_small:8px;
	--radius:12px;
	--radius-large:20px;
	--radius_pill:999px;
	--shadow_card:0 1px 2px rgba(0,0,0,.05);
	--shadow_float:0 20px 50px rgba(0,0,0,.18);
	--button_height:40px;
	--motion:160ms ease;
}
@media (prefers-reduced-motion:reduce) {
	:root { --motion:0ms; }
}

/* ========================================================================== */
/* RESET                                                                      */
/* ========================================================================== */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
/* keyboard focus — one ring for everything interactive; invisible to mouse and touch (:focus-visible) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline:2px solid var(--color_brand-secondary); outline-offset:2px; border-radius:inherit; }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline-offset:1px; }
/* touch / pointer targets — 24px minimum (WCAG 2.5.8): inline text links get a taller hit area without moving the layout;
   checkboxes stay native size (16px) with 4px clear space around them (the spacing allowance) */
:where(a[href], button):where(:not(.btn):not(.menu-btn):not(.action-button):not(.lead-card):not(.inbox-item)) { min-height:24px; }
:where(p, span, small, li) > a[href]:not(.btn) { display:inline-flex; align-items:center; min-height:24px; margin-block:-2px; }
input[type="checkbox"], input[type="radio"] { width:16px; height:16px; margin:4px; flex:none; cursor:pointer; } /* native size; the 4px margin gives the 24px spacing allowance and the wrapping label is the real target */
:where(input[type="text"], input[type="search"], input[type="email"], textarea):focus-visible { outline-offset:0; }
html { -webkit-text-size-adjust:100%; }
body {
	min-height:100dvh;
	background:var(--color_bg-primary);
	color:var(--color_text);
	font:var(--font_weight-primary) var(--font_size-primary)/var(--font_leading-primary) var(--font_name-primary);
	-webkit-font-smoothing:antialiased;
}
img, svg, video { display:block; max-width:100%; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; padding:0; }
h1, h2, h3 { font-family:var(--font_name-secondary); line-height:1.2; text-wrap:balance; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.feather { width:1.1em; height:1.1em; stroke-width:2; flex:none; }

/* ========================================================================== */
/* SHARED — btn, pill, avatar, segmented, field                               */
/* ========================================================================== */
.btn {
	align-items:center;
	background:var(--color_bg-secondary);
	border:1px solid var(--color_line-strong);
	border-radius:var(--radius_pill);
	color:var(--color_text);
	display:inline-flex;
	font-weight:var(--font_weight-bold-primary);
	gap:8px;
	height:var(--button_height);
	justify-content:center;
	padding-inline:18px;
	transition:background var(--motion), border-color var(--motion);
	&:hover { background:var(--color_bg-secondary-darker); }
	&:focus-visible { outline:2px solid var(--color_brand-secondary); outline-offset:2px; }
	&.btn-primary { background:var(--color_brand-secondary); border-color:transparent; color:#fff; &:hover { background:var(--color_brand-secondary-darker); } }
	&.btn-icon { width:var(--button_height); padding:0; border-radius:var(--radius_small); }
	&.btn-round { width:var(--button_height); padding:0; border-radius:50%; }
	&.btn-quiet { background:transparent; border-color:transparent; }
}
.pill {
	align-items:center;
	background:var(--status_neutral-bg);
	border-radius:var(--radius_pill);
	color:var(--status_neutral);
	display:inline-flex;
	font-size:var(--font_size-xsmall);
	font-weight:var(--font_weight-bold-primary);
	gap:5px;
	line-height:1;
	padding:6px 9px;
	white-space:nowrap;
	.feather { width:.95em; height:.95em; }
	&[data-status="overdue"], &[data-status="urgent"] { background:var(--status_overdue-bg); color:var(--status_overdue-text); }
	&[data-status="flagged"], &[data-status="fee-due"], &[data-status="hold"], &[data-status="pending"] { background:var(--status_flag-bg); color:var(--status_flag-text); }
	&[data-status="info"], &[data-status="appointment"] { background:var(--status_info-bg); color:var(--status_info-text); }
	&[data-status="ok"], &[data-status="confirmed"], &[data-status="ready"] { background:var(--status_ok-bg); color:var(--status_ok-text); }
	&[data-status="dark"] { background:#3a3a3a; color:#fff; }
	&.pill-tag { text-transform:uppercase; letter-spacing:.04em; font-size:var(--font_size-tiny); padding:5px 8px; border-radius:6px; }
}
.avatar {
	align-items:center;
	/* stage-tinted: a pale wash of the lead's stage colour with darker initials of the same hue — the inbox shows pipeline position at a glance;
	   no stage in scope → neutral grey. Light disc + dark text keeps the squint-test weight on the names, not the circles */
	background:color-mix(in srgb, var(--stage_color, #8d8d8d), #fff 72%);
	border-radius:50%;
	color:color-mix(in srgb, var(--stage_color, #585858), #000 45%);
	display:inline-flex;
	flex:none;
	font-family:var(--font_name-secondary);
	font-size:var(--font_size-medium);
	font-weight:var(--font_weight-bold-primary);
	height:56px;
	justify-content:center;
	width:56px;
	&.avatar-small { width:40px; height:40px; font-size:var(--font_size-small); }
}
.segmented {
	background:var(--color_bg-secondary-darkest);
	border-radius:var(--radius_pill);
	display:inline-flex;
	padding:4px;
	> button, > a {
		border-radius:var(--radius_pill);
		color:var(--color_dark-grey); /* 4.5:1+ on the darker pill background */
		font-weight:var(--font_weight-bold-primary);
		padding:8px 16px;
		text-align:center;
		white-space:nowrap;
		transition:background var(--motion), color var(--motion);
		small { color:var(--color_text-soft); margin-inline-start:6px; font-size:.85em; }
		&.is-active { background:#fff; color:var(--color_text); box-shadow:var(--shadow_card); small { color:var(--color_brand-secondary); } }
		&.is-active.is-brand { color:var(--color_brand-secondary); }
	}
}
.field {
	align-items:center;
	background:var(--color_bg-secondary);
	border:1px solid transparent;
	border-radius:var(--radius_small);
	display:flex;
	gap:10px;
	padding-inline:14px;
	.feather { color:var(--color_text-soft); }
	input { background:none; border:0; flex:1; height:42px; min-width:0; outline:none; /* the .field wrapper carries the ring */ &::placeholder { color:var(--color_text-soft); } }
	&:focus-within { border-color:var(--color_line-strong); background:#fff; }
	&:has(input:focus-visible) { outline:2px solid var(--color_brand-secondary); outline-offset:2px; }
}
.thumb {
	background:var(--color_bg-secondary-darker);
	border-radius:var(--radius_small);
	flex:none;
	height:44px;
	object-fit:cover;
	overflow:hidden;
	width:60px;
	display:grid;
	place-items:center;
	color:var(--color_text-muted);
	img { width:100%; height:100%; object-fit:cover; }
	svg { width:70%; height:auto; }
}

/* ========================================================================== */
/* TOPBAR — page header for Pipeline / Calendar (menu, title, +, context)     */
/* ========================================================================== */
.topbar {
	align-items:center;
	background:var(--color_bg-primary);
	border-block-end:1px solid var(--color_line);
	display:flex;
	gap:var(--gutter-small);
	height:var(--topbar_height);
	padding-inline:var(--gutter);
	position:sticky;
	top:0;
	z-index:20;
	.page-title { font-size:var(--font_size-title); font-weight:var(--font_weight-extra-bold-primary); }
	.topbar-context { display:flex; align-items:center; gap:var(--gutter-small); margin-inline-start:auto; }
	.calendar-modes { .segmented > button { padding-inline:18px; } }
	/* macOS-style: a lone magnifier that expands into the field when clicked; collapses again when left empty */
	.global-search { width:36px; height:36px; padding:0; border-color:transparent; background:transparent; overflow:hidden; transition:width var(--motion), background var(--motion), border-color var(--motion); justify-content:flex-start;
		.global-search-toggle { flex:none; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:50%; color:var(--color_text-muted); cursor:pointer; &:hover { background:var(--color_bg-secondary); } .feather { width:18px; height:18px; } }
		input { opacity:0; width:0; min-width:0; padding:0; transition:opacity var(--motion); }
		&.is-open { width:min(300px, 30vw); background:var(--color_bg-primary); border-color:var(--color_line); input { opacity:1; width:auto; flex:1; padding-inline-end:10px; } .global-search-toggle:hover { background:transparent; } }
	}
}
.menu-btn {
	align-items:center;
	background:var(--color_bg-secondary);
	border-radius:var(--radius_small);
	display:inline-flex;
	height:40px;
	justify-content:center;
	width:40px;
	.feather { width:22px; height:22px; }
}
.context-pill {
	align-items:center;
	display:inline-flex;
	font-weight:var(--font_weight-bold-primary);
	gap:6px;
	white-space:nowrap;
	.feather { color:var(--color_text-muted); }
}
/* FILTER CONTROL — same name as the site's filter pills; wraps a native <select> */
.filter-control {
	align-items:center;
	background:var(--color_bg-secondary);
	border-radius:var(--radius_small);
	cursor:pointer;
	display:inline-flex;
	font-weight:var(--font_weight-bold-primary);
	gap:6px;
	height:40px;
	padding-inline:12px 10px;
	position:relative;
	white-space:nowrap;
	.feather { color:var(--color_text-muted); &:last-child { width:.9em; height:.9em; } }
	select { appearance:none; background:none; border:0; cursor:pointer; font-weight:inherit; outline:none; padding:0; max-width:180px; }
	&:has(select:focus-visible) { outline:2px solid var(--color_brand-secondary); outline-offset:2px; }
}
.pipeline-filters { display:flex; gap:var(--gutter-small); align-items:center; }

/* ========================================================================== */
/* SIDEBAR NAVIGATION — floating drawer (logo, views, user, settings, dev)   */
/* ========================================================================== */
.sidebar-navigation {
	background:var(--color_bg-primary);
	border-radius:var(--radius-large);
	box-shadow:var(--shadow_float);
	display:flex;
	flex-direction:column;
	inset-block:16px;
	inset-inline-start:16px;
	padding:var(--gutter-large) var(--gutter-large) var(--gutter);
	position:fixed;
	transform:translateX(calc(-100% - 32px));
	transition:transform var(--motion);
	width:var(--sidebar_width);
	z-index:40;
	&.is-open { transform:none; }
	.sidebar-navigation-head { display:flex; align-items:center; gap:var(--gutter); margin-block-end:var(--gutter-large); }
	.brand img { height:38px; width:auto; }
	.primary-navigation { display:grid; gap:4px; }
	.nav-item {
		align-items:center;
		border-radius:var(--radius);
		color:var(--color_text);
		display:flex;
		font-size:var(--font_size-medium);
		font-weight:var(--font_weight-bold-primary);
		gap:14px;
		padding:14px 16px;
		.feather { width:22px; height:22px; color:var(--color_text-muted); }
		&:hover { background:var(--color_bg-secondary); }
		&.is-active { background:var(--color_brand-secondary-soft); color:var(--color_brand-secondary); .feather { color:currentColor; } }
	}
	.sidebar-footer { border-block-start:1px solid var(--color_line); display:grid; gap:6px; margin-block-start:auto; padding-block-start:var(--gutter); }
	.user-card { display:flex; align-items:center; gap:14px; padding:8px 4px 14px; strong { display:block; font-weight:var(--font_weight-bold-primary); } small { color:var(--color_text-muted); } }
	.version { color:var(--color_text-soft); font-size:var(--font_size-small); padding:8px 16px 0; }
}
.global-overlay {
	background:rgba(20,20,20,.35);
	inset:0;
	opacity:0;
	pointer-events:none;
	position:fixed;
	transition:opacity var(--motion);
	z-index:30;
	&.is-open { opacity:1; pointer-events:auto; }
}
body.nav-scroll { overflow:hidden; }

/* ========================================================================== */
/* DAILY VIEW — two-pane layout: inbox (left) + conversation (right)          */
/* ========================================================================== */
.daily-view {
	display:grid;
	grid-template-columns:var(--inbox_width) minmax(0, 1fr); /* minmax(0,…) so the conversation can never push past the viewport */
	height:100dvh;
	min-height:0;
}

/* ========================================================================== */
/* INBOX — today's lead list with tabs, search, and status pills              */
/* ========================================================================== */
.inbox {
	border-inline-end:1px solid var(--color_line);
	display:flex;
	flex-direction:column;
	min-height:0;
	.inbox-header { align-items:center; display:flex; gap:var(--gutter-small); justify-content:space-between; padding:var(--gutter-small) var(--gutter); }
	.inbox-tabs { padding:0 var(--gutter) var(--gutter-small); .segmented { display:flex; > button { flex:1; } } }
	.inbox-search { order:10; padding:var(--gutter-small) var(--gutter); border-block-start:1px solid var(--color_line); } /* bottom of the column, like the phone's bottom bar */
	.inbox-list { flex:1; min-height:0; overflow:auto; border-block-start:1px solid var(--color_line); }
	.inbox-empty { color:var(--color_text-soft); padding:var(--gutter-large); text-align:center; }
}
.inbox-item {
	align-items:flex-start;
	border-block-end:1px solid var(--color_line);
	cursor:pointer;
	display:grid;
	gap:4px 14px;
	grid-template-columns:8px 56px 1fr;
	padding:18px var(--gutter) 18px 12px;
	position:relative;
	width:100%;
	text-align:start;
	transition:background var(--motion);
	.item-unread { grid-column:1; grid-row:1 / span 3; width:8px; height:8px; border-radius:50%; background:transparent; margin-block-start:24px; &[data-status="unread"] { background:var(--stage_assigned); } &[data-status="overdue"] { background:var(--status_overdue); } }
	.avatar { grid-column:2; grid-row:1 / span 3; }
	.item-name, .item-unit, .item-preview { grid-column:3; min-width:0; }
	.item-name { display:flex; align-items:baseline; gap:8px; font-size:var(--font_size-medium); font-weight:var(--font_weight-bold-primary); line-height:1.25; time { font-size:var(--font_size-small); color:var(--color_text-muted); font-weight:var(--font_weight-primary); margin-inline-start:auto; white-space:nowrap; } }
	.item-unit { color:var(--color_text-muted); font-size:var(--font_size-small); &:empty { display:none; } &.is-placeholder { font-style:italic; } }
	.item-preview { align-items:center; color:var(--color_text-muted); display:flex; gap:10px; font-size:var(--font_size-small); span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
	&:hover { background:var(--color_bg-secondary); }
	&.is-active {
		background:var(--color_brand-secondary);
		color:#fff;
		.item-unit, .item-preview, .item-name time { color:#fff; }
		.avatar { background:rgba(255,255,255,.9); }
		.item-unread { background:#fff; }
		.pill { background:#fff; color:var(--color_brand-secondary); }
	}
}

/* ========================================================================== */
/* CONVERSATION — right pane: lead header, thread, composer                  */
/* ========================================================================== */
.conversation {
	display:grid;
	grid-template-columns:minmax(0, 1fr); /* the implicit column would otherwise size to the header's content and overflow the track */
	grid-template-rows:auto 1fr auto;
	min-height:0;
	min-width:0;
}

/* ========================================================================== */
/* LEAD HEADER — who, where they are in the pipeline, what's on the table    */
/* ========================================================================== */
.lead-header {
	border-block-end:1px solid var(--color_line);
	display:grid;
	gap:var(--gutter-small) var(--gutter);
	grid-template-areas:"identity actions" "stepper stepper" "summary summary";
	grid-template-columns:minmax(0, 1fr) auto;
	min-width:0;
	padding:var(--gutter-small) var(--gutter) var(--gutter);
	.lead-identity { grid-area:identity; display:flex; gap:var(--gutter); align-items:center; min-width:0; }
	.lead-name { align-items:center; display:flex; flex-wrap:wrap; gap:10px; font-size:var(--font_size-title); font-weight:var(--font_weight-extra-bold-primary); }
	.lead-contact { color:var(--color_text-muted); display:flex; flex-wrap:wrap; gap:4px 18px; margin-block-start:2px; span { align-items:center; display:inline-flex; gap:6px; min-height:26px; } a { display:inline-flex; align-items:center; min-height:26px; } }
	.lead-actions { grid-area:actions; align-items:center; display:flex; gap:var(--gutter-small); .lead-cta { margin-inline-start:6px; padding-inline-start:18px; border-inline-start:1px solid var(--color_line); display:flex; } }
	.stage-stepper { grid-area:stepper; }
	.lead-summary { grid-area:summary; }
	.stepper-status { color:var(--color_text-muted); font-size:var(--font_size-small); }
}
body[data-role="sales"] .lead-header, body[data-role="management"] .lead-header {
	grid-template-areas:"identity stepper actions" "summary summary summary";
	grid-template-columns:1fr auto auto;
	.stage-stepper { align-self:center; }
	.stepper-status { display:none; }
}
.action-button {
	align-items:center;
	color:var(--color_text-muted);
	display:inline-flex;
	flex-direction:column;
	font-size:var(--font_size-xsmall);
	gap:4px;
	span.action-icon { align-items:center; background:var(--color_brand-secondary-soft); border-radius:50%; color:var(--color_brand-secondary); display:inline-flex; height:44px; justify-content:center; width:44px; .feather { width:20px; height:20px; } }
	&:hover span.action-icon { background:color-mix(in srgb, var(--color_brand-secondary), #fff 84%); }
}
.waiting-pill { background:var(--color_bg-secondary); border:1px solid var(--color_line-strong); border-radius:var(--radius_pill); color:var(--color_text); font-weight:var(--font_weight-bold-primary); height:var(--button_height); }

/* ========================================================================== */
/* STAGE STEPPER — pipeline position; steps carry data-stage                 */
/* ========================================================================== */
.stage-stepper {
	align-items:center;
	display:flex;
	gap:var(--gutter-small);
	ol { display:flex; align-items:flex-start; }
	li { align-items:center; display:flex; flex-direction:column; font-size:var(--font_size-xsmall); color:var(--color_text-muted); position:relative; min-width:84px; text-align:center; gap:6px; white-space:nowrap;
		&::before { content:""; position:absolute; top:11px; inset-inline-start:calc(50% + 14px); width:calc(100% - 28px); height:2px; background:var(--color_line-strong); }
		&:last-child::before { display:none; }
		.step-dot { align-items:center; background:#fff; border:2px solid var(--color_line-strong); border-radius:50%; color:#fff; display:inline-flex; height:24px; justify-content:center; width:24px; .feather { width:14px; height:14px; } }
		&.is-done { &::before { background:var(--status_ok); } .step-dot { background:var(--status_ok); border-color:var(--status_ok); } }
		&.is-current { color:var(--color_text); font-weight:var(--font_weight-bold-primary); .step-dot { border-color:var(--status_ok); &::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--status_ok); } } }
	}
}

/* ========================================================================== */
/* LEAD SUMMARY — KPI cards: unit, pricing, payoff/trade, appointment/term   */
/* ========================================================================== */
.lead-summary {
	/* always ONE row — when it stacks there's no room left to message; extra cards page with the arrows (no scrollbar) */
	position:relative;
	.summary-track { display:flex; gap:var(--gutter-small); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; &::-webkit-scrollbar { display:none; } }
	.summary-card { flex:1 0 230px; min-width:230px; scroll-snap-align:start; }
	/* fade over the clipped edge so the cut-off reads as "more this way" */
	&::before, &::after { content:""; position:absolute; top:0; bottom:0; width:56px; pointer-events:none; opacity:0; transition:opacity var(--motion); z-index:1; }
	&::before { inset-inline-start:0; background:linear-gradient(to right, var(--color_bg-primary), transparent); }
	&::after { inset-inline-end:0; background:linear-gradient(to left, var(--color_bg-primary), transparent); }
	&.has-prev::before, &.has-next::after { opacity:1; }
	/* the arrows sit half outside the row, dead-centre vertically */
	.summary-arrow { position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:1px solid var(--color_line); background:var(--color_bg-primary); box-shadow:0 4px 14px rgba(0,0,0,.14); color:var(--color_text); display:none; align-items:center; justify-content:center; cursor:pointer; z-index:2; padding:0; .feather { width:16px; height:16px; } &:hover { border-color:var(--color_text); }
		&.is-prev { inset-inline-start:-16px; }
		&.is-next { inset-inline-end:-16px; } }
	&.has-prev .summary-arrow.is-prev { display:inline-flex; }
	&.has-next .summary-arrow.is-next { display:inline-flex; }
}
.summary-card {
	align-items:center;
	background:var(--color_bg-primary);
	border:1px solid var(--color_line);
	border-radius:var(--radius);
	box-shadow:var(--shadow_card);
	display:flex;
	gap:12px;
	padding:12px;
	.thumb { width:88px; height:66px; border-radius:var(--radius_small); }
	.summary-icon { align-items:center; background:var(--color_bg-secondary); border-radius:var(--radius_small); color:var(--color_text-muted); display:inline-flex; flex:none; height:52px; justify-content:center; width:52px; .feather { width:22px; height:22px; } &[data-tone="info"] { background:var(--status_info-bg); color:var(--status_info); } &[data-tone="ok"] { background:var(--status_ok-bg); color:var(--status_ok); } &[data-tone="warn"] { background:var(--status_flag-bg); color:var(--status_flag); } }
	.summary-body { min-width:0; display:grid; gap:3px; }
	.summary-title { font-weight:var(--font_weight-bold-primary); .feather { color:#e0a100; width:.9em; height:.9em; vertical-align:-1px; margin-inline-end:3px; fill:#e0a100; } }
	.summary-meta { color:var(--color_text-muted); font-size:var(--font_size-small); }
	.summary-status { display:flex; gap:6px; flex-wrap:wrap; }
}

/* ========================================================================== */
/* THREAD — chronological conversation + system events                       */
/* ========================================================================== */
.thread {
	background:var(--color_bg-primary);
	display:flex;
	flex-direction:column;
	gap:14px;
	min-height:0;
	overflow:auto;
	padding:var(--gutter) var(--gutter) var(--gutter-large);
	scroll-behavior:smooth;
}
.thread-day { align-self:center; color:var(--color_text-muted); font-size:var(--font_size-small); strong { color:var(--color_text); font-weight:var(--font_weight-bold-primary); } }
.thread-event {
	align-items:center;
	align-self:center;
	background:var(--color_bg-secondary);
	border-radius:var(--radius_pill);
	color:var(--color_text-muted);
	display:inline-flex;
	font-size:var(--font_size-small);
	gap:8px;
	padding:8px 14px;
	text-align:center;
	&[data-tone="warn"] { background:var(--status_flag-bg); color:var(--status_flag); }
	&[data-tone="alert"] { background:var(--status_overdue-bg); color:var(--status_overdue-text); }
}
.thread-message {
	max-width:min(70%, 760px);
	position:relative;
	.message-label { color:var(--color_text-soft); display:flex; font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); gap:5px; justify-content:flex-end; letter-spacing:.06em; margin-block-end:4px; text-transform:uppercase; .feather { width:.9em; height:.9em; } }
	.message-body { border-radius:22px; font-size:var(--font_size-primary); line-height:1.4; padding:12px 18px; }
	.message-meta { color:var(--color_text-muted); font-size:var(--font_size-xsmall); margin-block-start:4px; text-align:end; }
	&.outbound { align-self:flex-end; .message-body { background:var(--thread_outbound); color:var(--thread_outbound-text); border-end-end-radius:6px; } }
	&.inbound { align-self:flex-start; .message-body { background:var(--thread_inbound); border-end-start-radius:6px; } .message-label { justify-content:flex-start; } }
}
.thread-image { align-self:flex-start; max-width:min(60%, 480px); img { border-radius:18px; width:min(100%, 220px); aspect-ratio:4/3; object-fit:cover; margin-block-end:8px; } .message-body { display:inline-block; } }
.thread-call {
	align-items:center;
	align-self:flex-start;
	background:var(--color_bg-secondary);
	border-radius:var(--radius);
	display:flex;
	gap:14px;
	max-width:min(75%, 680px);
	padding:12px 16px;
	.call-icon { align-items:center; background:#fff; border-radius:50%; color:var(--color_text-muted); display:inline-flex; height:40px; justify-content:center; width:40px; }
	.call-body { min-width:0; display:grid; gap:2px; }
	.call-title { display:flex; gap:12px; align-items:baseline; font-weight:var(--font_weight-bold-primary); }
	.call-links { display:flex; gap:12px; margin-inline-start:auto; font-weight:var(--font_weight-bold-primary); font-size:var(--font_size-small); color:var(--color_link); a { min-height:24px; margin-block:-2px; align-items:center; display:inline-flex; gap:4px; } }
	.call-summary { color:var(--color_text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.thread-note {
	align-items:center;
	align-self:center;
	background:var(--thread_note);
	border:1px solid var(--thread_note-line);
	border-radius:var(--radius_pill);
	display:flex;
	gap:10px;
	max-width:80%;
	padding:8px 18px;
	.note-author { color:#8a6d00; font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; display:inline-flex; gap:6px; align-items:center; }
}
.thread-email {
	align-self:flex-end;
	background:var(--color_bg-primary);
	border:1px solid var(--color_line);
	border-radius:var(--radius);
	box-shadow:var(--shadow_card);
	max-width:min(70%, 680px);
	padding:12px 16px;
	.email-meta { align-items:center; color:var(--color_text-muted); display:flex; font-size:var(--font_size-small); gap:8px; margin-block-end:6px; .email-opened { margin-inline-start:auto; color:var(--status_ok-text); font-weight:var(--font_weight-bold-primary); display:inline-flex; gap:4px; align-items:center; } }
	.email-subject { font-weight:var(--font_weight-bold-primary); font-size:var(--font_size-primary); }
	.email-preview { color:var(--color_text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ========================================================================== */
/* COMPOSER — reply box with Text / Email / Note modes                       */
/* ========================================================================== */
.composer {
	align-items:center;
	border-block-start:1px solid var(--color_line);
	display:grid;
	gap:10px var(--gutter-small);
	grid-template-columns:auto auto minmax(0, 1fr) auto; /* the field gives way first; nothing pushes the send button off-screen */
	min-width:0;
	padding:var(--gutter-small) var(--gutter);
	.composer-add { background:var(--color_bg-secondary); }
	.composer-mode .segmented > button.is-active { color:var(--color_brand-secondary); }
	.composer-input { border:1px solid var(--color_line-strong); border-radius:var(--radius_pill); background:#fff; min-width:0; padding-inline:20px 12px; input { height:52px; font-size:var(--font_size-primary); min-width:0; width:100%; } &:focus-within { border-color:var(--color_text-muted); } }
	.composer-tools { display:flex; gap:4px; color:var(--color_text-muted); button { padding:8px; border-radius:50%; &:hover { background:var(--color_bg-secondary); } } }
	.composer-send { background:var(--thread_outbound); color:#fff; height:48px; width:48px; border:0; &:hover { background:color-mix(in srgb, var(--thread_outbound), #000 12%); } }
}

/* ========================================================================== */
/* PIPELINE — horizontally scrolling board, one column per stage             */
/* ========================================================================== */
.pipeline {
	display:flex;
	gap:var(--gutter-small);
	height:calc(100dvh - 30px - var(--topbar_height));
	overflow-x:auto;
	overscroll-behavior-x:contain;
	padding:var(--gutter-small) var(--gutter) var(--gutter);
	scroll-snap-type:x proximity;
	.pipeline-empty { color:var(--color_text-soft); padding:var(--gutter-large); text-align:center; width:100%; }
}
.pipeline-toggle .segmented > a { padding-inline:26px; }

/* ========================================================================== */
/* PIPELINE COLUMN — stage bucket; --stage_color set from data-stage         */
/* ========================================================================== */
/* phone dropdowns (every view): checkbox rows, section labels, tones */
body[data-device="phone"] {
	.phone-menu label { align-items:center; display:flex; gap:12px; padding:12px 16px; font-size:var(--font_size-primary); input { accent-color:var(--color_text); margin:0; } & + * { border-block-start:.5px solid var(--color_line); } .swatch { border-radius:3px; height:12px; width:12px; background:var(--stage_assigned); &[data-category="logistics"] { background:var(--stage_agreed); } &[data-category="followup"] { background:var(--color_text-muted); } &[data-owner] { background:var(--stage_working); } } }
	.phone-menu .phone-menu-label { color:var(--color_text-muted); font-size:var(--font_size-tiny); font-weight:var(--font_weight-bold-primary); letter-spacing:.06em; padding:10px 16px 2px; text-transform:uppercase; }
	.phone-menu button[data-tone="ok"] { color:var(--status_ok); .feather { color:var(--status_ok); } }
	.phone-menu button[data-tone="muted"] { color:var(--color_text-muted); .feather { color:var(--color_text-muted); } }
}

/* the checkbox takes the colour of the swatch beside it */
label:has(> .swatch) { --swatch_color:var(--stage_assigned); }
label:has(> .swatch[data-category="logistics"]) { --swatch_color:var(--stage_agreed); }
label:has(> .swatch[data-category="followup"]) { --swatch_color:var(--color_text-muted); } /* dark enough that the browser draws the tick white */
label:has(> .swatch[data-owner]) { --swatch_color:var(--stage_working); }
label:has(> .swatch[data-owner="Riley Morgan"]) { --swatch_color:var(--stage_assigned); }
label:has(> .swatch[data-owner="Sam Okafor"]) { --swatch_color:var(--stage_attempting); }
label:has(> .swatch[data-owner="Devon Marsh"]) { --swatch_color:var(--stage_motility); }
label:has(> .swatch) > input[type="checkbox"] { accent-color:var(--swatch_color); }
label:has(> .swatch[data-store]) { --swatch_color:var(--color_text-soft); }
label:has(> .swatch[data-all]) { --swatch_color:var(--color_text); }
/* stage colour map — anything carrying data-stage gets --stage_color (columns, chips, pills, rows) */
[data-stage] {
	--stage_color:var(--color_text-muted);
	&[data-stage="lost"]       { --stage_color:var(--color_text-muted); }
	&[data-stage="assigned"]   { --stage_color:var(--stage_assigned); }
	&[data-stage="attempting"] { --stage_color:var(--stage_attempting); }
	&[data-stage="working"]    { --stage_color:var(--stage_working); }
	&[data-stage="agreed"]     { --stage_color:var(--stage_agreed); }
	&[data-stage="documents"]  { --stage_color:var(--stage_documents); }
	&[data-stage="contract"]   { --stage_color:var(--stage_contract); }
	&[data-stage="processing"] { --stage_color:var(--stage_processing); }
	&[data-stage="motility"]   { --stage_color:var(--stage_motility); }
	&[data-stage="checkin"]    { --stage_color:var(--stage_checkin); }
	&[data-stage="arrived"]    { --stage_color:var(--stage_arrived); }
	&[data-stage="forsale"]    { --stage_color:var(--stage_forsale); }
	&[data-stage="deals"]      { --stage_color:var(--stage_deals); }
}
.pipeline-column {
	--stage_color:var(--color_text-muted);
	background:#fafafb; /* near-white column with a hairline; the cards' colour tint is what separates them, not a darker grey */
	border:1px solid var(--color_line);
	border-radius:var(--radius);
	display:flex;
	flex:1 0 clamp(280px, 22vw, 340px);
	flex-direction:column;
	max-width:460px;
	min-height:0;
	padding:14px 12px;
	scroll-snap-align:start;
	&[data-stage="payout"]     { --stage_color:var(--stage_payout); }
	.column-header { align-items:center; display:flex; gap:10px; margin-block-end:14px; padding-inline:6px; h2 { font-family:var(--font_name-primary); font-size:var(--font_size-medium); font-weight:var(--font_weight-bold-primary); } .column-scope { margin-inline-start:auto; color:var(--color_text-muted); font-size:var(--font_size-xsmall); display:inline-flex; gap:4px; align-items:center; } }
	.stage-dot { background:var(--stage_color); border-radius:50%; flex:none; height:10px; width:10px; }
	.column-count { background:color-mix(in srgb, var(--stage_color), #fff 85%); border-radius:var(--radius_pill); color:var(--stage_color); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); padding:3px 9px; }
	.column-body { display:flex; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; padding-block-end:4px; }
	.column-lane { align-items:center; display:flex; font-weight:var(--font_weight-bold-primary); gap:8px; padding:8px 6px 2px; .column-count { margin-inline-start:auto; background:var(--color_bg-secondary-darkest); color:var(--color_text-muted); } &.is-collapsed { color:var(--color_text-muted); } }
	.column-empty { align-items:center; color:var(--color_text-muted); display:flex; flex-direction:column; gap:8px; padding:var(--gutter-large) var(--gutter); text-align:center; .feather { width:28px; height:28px; } }
}

/* ========================================================================== */
/* LEAD CARD — one lead on the board; tinted by its column's stage           */
/* ========================================================================== */
.lead-card {
	/* white on the grey column so the card reads as an object, not a patch of the same grey; the stage lives in the edge + stripe */
	background:color-mix(in srgb, var(--stage_color), #fff 90%); /* a touch more hue so the card reads against the near-white column */
	border-inline-start:4px solid var(--stage_color);
	border-radius:var(--radius_small);
	color:color-mix(in srgb, var(--stage_color), #000 38%); /* deep enough for the light teal / green hues on their 90% tint */
	display:flex;
	flex-direction:column;
	overflow:hidden;
	position:relative;
	transition:box-shadow var(--motion), transform var(--motion);
	&:hover { box-shadow:0 6px 16px rgba(0,0,0,.10); transform:translateY(-1px); }
	.card-owner { background:var(--stage_color); color:#fff; font-size:var(--font_size-tiny); font-weight:var(--font_weight-extra-bold-primary); letter-spacing:.06em; padding:4px 12px; text-transform:uppercase; }
	.card-body { display:grid; gap:6px; padding:12px 12px 12px 10px; color:inherit; }
	.card-head { align-items:center; display:flex; gap:10px; }
	.card-name { align-items:center; display:flex; flex:1; font-size:var(--font_size-primary); font-weight:var(--font_weight-bold-primary); gap:8px; min-width:0; .card-unread { background:var(--stage_assigned); border-radius:50%; flex:none; height:8px; width:8px; &[data-status="overdue"] { background:var(--status_overdue); } } }
	.card-timer { flex:none; }
	.card-unit { align-items:center; display:flex; gap:10px; .thumb { color:var(--stage_color); } .card-unit-title { flex:1; font-weight:var(--font_weight-bold-primary); min-width:0; } .card-price { font-weight:var(--font_weight-extra-bold-primary); white-space:nowrap; } }
	.card-badges { display:flex; flex-wrap:wrap; gap:6px; &:empty { display:none; } }
	.card-source { align-items:center; color:color-mix(in srgb, var(--stage_color), #000 30%); display:flex; font-size:var(--font_size-small); gap:6px; .card-loc { margin-inline-start:auto; color:var(--color_text-muted); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); letter-spacing:.04em; } .card-stock { color:var(--color_text-muted); } }
	.card-activity { align-items:flex-start; color:var(--color_text); display:flex; font-size:var(--font_size-small); gap:8px; .feather { color:var(--color_text-muted); margin-block-start:3px; } span { flex:1; min-width:0; } time { color:var(--color_text-muted); font-size:var(--font_size-xsmall); white-space:nowrap; margin-block-start:2px; } }
	.card-flag { align-items:center; background:var(--status_flag-bg); color:var(--status_flag-text); display:flex; font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); gap:6px; padding:6px 12px; &[data-tone="alert"] { background:var(--status_overdue-bg); color:var(--status_overdue); } }
	&.is-muted { color:var(--color_text-muted); .card-name { font-weight:var(--font_weight-bold-primary); color:var(--color_text-muted); } .card-source, .card-activity { color:var(--color_text-muted); } .thumb, .card-owner { opacity:.7; } } /* quiet, but every word still reads */
	&.is-unread .card-name { font-weight:var(--font_weight-extra-bold-primary); }
}
body[data-role="sales"] .lead-card .card-owner { display:none; }
body:not([data-role="sales"]) .lead-card { border-inline-start-width:0; }

/* ========================================================================== */
/* FOR-SALE SUMMARY — aggregate column: days-on-lot buckets and queues       */
/* ========================================================================== */
.forsale-summary {
	background:color-mix(in srgb, var(--stage_color), #fff 92%);
	border-inline-start:4px solid var(--stage_color);
	border-radius:var(--radius_small);
	display:grid;
	gap:4px;
	padding:12px 14px;
	.summary-label { color:var(--color_text-muted); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); letter-spacing:.06em; margin-block:6px 4px; text-transform:uppercase; }
	.bucket-row { align-items:center; border-block-end:1px solid color-mix(in srgb, var(--stage_color), #fff 75%); color:color-mix(in srgb, var(--stage_color), #000 20%); display:flex; gap:10px; padding:8px 0; width:100%; text-align:start; strong { margin-inline-start:auto; font-size:var(--font_size-primary); } .feather { color:var(--stage_color); } &:last-child { border:0; } }
	.queue-row { display:grid; gap:2px; grid-template-columns:auto 1fr auto auto; align-items:center; column-gap:10px; padding:10px 0; border-block-end:1px solid color-mix(in srgb, var(--stage_color), #fff 75%); width:100%; text-align:start; .queue-dot { width:8px; height:8px; border-radius:50%; background:var(--status_flag); &[data-tone="ok"] { background:var(--status_ok); } } .queue-label { font-weight:var(--font_weight-bold-primary); color:color-mix(in srgb, var(--stage_color), #000 20%); } strong { font-size:var(--font_size-primary); color:color-mix(in srgb, var(--stage_color), #000 20%); } .feather { color:var(--stage_color); } .queue-note { grid-column:2 / span 3; color:var(--color_text-muted); font-size:var(--font_size-xsmall); display:flex; gap:8px; span { flex:1; } } &:last-child { border:0; } }
}

/* ========================================================================== */
/* EVENT EDITOR — "New" popover: Appointment / Follow-up                     */
/* ========================================================================== */
.event-editor {
	background:var(--color_bg-primary);
	border-radius:var(--radius-large);
	box-shadow:var(--shadow_float);
	display:grid;
	gap:10px;
	inset-block-start:calc(var(--topbar_height) + 70px);
	inset-inline-start:calc(var(--calendar_gutter) + 12px);
	padding:14px;
	position:fixed;
	width:min(440px, calc(100vw - 32px));
	z-index:25;
	.editor-head { align-items:center; display:flex; justify-content:space-between; h2 { font-size:var(--font_size-large); font-family:var(--font_name-primary); font-weight:var(--font_weight-bold-primary); } }
	.editor-kind .segmented { display:flex; > button { flex:1; } > button.is-active { color:var(--color_brand-secondary); } }
	.editor-row { align-items:center; background:var(--color_bg-secondary); border-radius:var(--radius_small); display:flex; gap:10px; min-height:52px; padding:8px 14px; label, .editor-label { flex:1; font-weight:var(--font_weight-bold-primary); } .feather { color:var(--color_text-muted); } select { appearance:none; background:none; border:0; flex:1; font-weight:var(--font_weight-bold-primary); outline:none; } .editor-value { background:#fff; border-radius:var(--radius_small); padding:6px 12px; font-weight:var(--font_weight-bold-primary); } .editor-muted { color:var(--color_text-muted); } .event-type-dot { background:var(--stage_assigned); border-radius:50%; height:10px; width:10px; } &.is-stack { align-items:stretch; display:grid; gap:0; padding:0; > * { display:flex; align-items:center; gap:10px; padding:10px 14px; } > * + * { border-block-start:1px solid var(--color_line); } } }
	textarea { background:var(--color_bg-secondary); border:0; border-radius:var(--radius_small); font:inherit; min-height:60px; padding:12px 14px; resize:vertical; outline:none; width:100%; &::placeholder { color:var(--color_text-soft); } }
}

/* ========================================================================== */
/* ROLE PICKER — prototype entry page                                        */
/* ========================================================================== */
.role-picker {
	display:grid;
	gap:var(--gutter-large);
	margin-inline:auto;
	max-width:960px;
	padding:clamp(24px, 6vw, 72px) var(--gutter);
	.picker-head { display:grid; gap:12px; img { height:44px; width:auto; } h1 { font-size:clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight:var(--font_weight-extra-bold-primary); } p { color:var(--color_text-muted); max-width:60ch; } }
	.picker-grid { display:grid; gap:var(--gutter); grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
	.picker-card { background:var(--color_bg-primary); border:1px solid var(--color_line); border-radius:var(--radius); box-shadow:var(--shadow_card); display:grid; gap:12px; padding:var(--gutter); h2 { font-size:var(--font_size-large); } p { color:var(--color_text-muted); font-size:var(--font_size-small); } .picker-links { display:grid; gap:6px; margin-block-start:auto; } .picker-links a { align-items:center; display:flex; gap:10px; padding:10px 12px; border-radius:var(--radius_small); background:var(--color_bg-secondary); font-weight:var(--font_weight-bold-primary); &:hover { background:var(--color_bg-secondary-darkest); } .feather { color:var(--color_brand-secondary); } &.is-stub { color:var(--color_text-soft); .feather { color:currentColor; } } } }
	.picker-note { color:var(--color_text-muted); font-size:var(--font_size-small); }
}

/* ========================================================================== */
/* DEV LABELS — overlay that prints block names + data-actions for handoff   */
/* ========================================================================== */
.dev-label {
	background:#111;
	border-radius:4px;
	color:#fff;
	font:600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
	inset-block-start:0;
	inset-inline-start:0;
	letter-spacing:.02em;
	padding:2px 6px;
	pointer-events:none;
	position:absolute;
	z-index:50;
	white-space:nowrap;
	&[data-kind="action"] { background:var(--color_brand-secondary); inset-block-start:auto; inset-block-end:0; }
	&[data-kind="field"] { background:#1a6ff0; }
}
body.show-labels [data-dev-labeled] { outline:1px dashed rgba(0,0,0,.25); outline-offset:-1px; position:relative; }

/* ========================================================================== */
/* MEDIA QUERY                                                                */
/* ========================================================================== */
@media (max-width:1400px) {
	/* the stage stepper drops under the identity + actions row */
	body[data-role="sales"] .lead-header, body[data-role="management"] .lead-header { grid-template-areas:"identity actions" "stepper stepper" "summary summary"; grid-template-columns:minmax(0, 1fr) auto; }
	.lead-header .lead-actions { flex-wrap:wrap; justify-content:flex-end; }
}
@media (max-width:1100px) {
	.thread-message { max-width:85%; }
}
@media (max-width:860px) {
	:root { --inbox_width:100%; }
	.daily-view { grid-template-columns:1fr; height:auto; min-height:100dvh; }
	.inbox { border-inline-end:0; .inbox-list { max-height:40dvh; } }
	.conversation { min-height:70dvh; }
	.lead-header { .lead-actions { flex-wrap:wrap; .lead-cta { border:0; padding:0; margin:0; width:100%; } } }
	.stage-stepper { overflow:auto; padding-block-end:4px; li { min-width:72px; } }
	.composer { grid-template-columns:auto 1fr auto; .composer-mode { grid-column:1 / -1; } .composer-tools { display:none; } }
	.topbar .global-search { display:none; }
}
@media (max-width:1100px) {
	.topbar { height:auto; min-height:var(--topbar_height); flex-wrap:wrap; padding-block:10px; .topbar-context { flex-wrap:wrap; } .calendar-modes { order:9; width:100%; display:flex; justify-content:center; } .calendar-nav { order:8; width:100%; } }
}
@media (max-width:520px) {
	.inbox-item { grid-template-columns:8px 44px 1fr; .avatar { width:44px; height:44px; font-size:var(--font_size-small); } .item-name { font-size:var(--font_size-primary); } }
	.lead-header { padding-inline:var(--gutter-small); .lead-identity .avatar { display:none; } }
	.thread { padding-inline:var(--gutter-small); }
	.composer { padding-inline:var(--gutter-small); }
}


/* ========================================================================== */
/* MODAL — same block as optimumrv.com (MicroModal, aria-hidden driven)      */
/* ========================================================================== */
.modal {
	display:none;
	&.is-open { display:block; }
	.overlay { align-items:center; background:rgba(20,20,20,.45); display:flex; inset:0; justify-content:center; padding:var(--gutter); position:fixed; z-index:60; }
	.modal-window { background:var(--color_bg-primary); border-radius:var(--radius-large); box-shadow:var(--shadow_float); display:grid; grid-template-rows:auto 1fr auto; max-height:min(85dvh, 720px); overflow:hidden; width:min(520px, 100%); }
	.modal-header { align-items:center; border-block-end:1px solid var(--color_line); display:flex; gap:var(--gutter-small); padding:14px var(--gutter); .title { flex:1; font-family:var(--font_name-primary); font-size:var(--font_size-large); font-weight:var(--font_weight-bold-primary); } }
	.modal-content { display:grid; gap:var(--gutter-small); overflow:auto; padding:var(--gutter); }
	.modal-footer { border-block-start:1px solid var(--color_line); display:flex; gap:10px; justify-content:flex-end; padding:14px var(--gutter); &:empty { display:none; } }
	&[aria-hidden="false"] .overlay { animation:crm-fade var(--motion) both; }
	&[aria-hidden="false"] .modal-window { animation:crm-rise var(--motion) both; }
}
@keyframes crm-fade { from { opacity:0; } }
@keyframes crm-rise { from { transform:translateY(12px); opacity:0; } }

/* ========================================================================== */
/* ACTION SHEET — modal content for stubbed actions: the reason + a mock UI  */
/* ========================================================================== */
.sheet-reason { align-items:flex-start; background:var(--color_brand-secondary-soft); border-radius:var(--radius_small); color:color-mix(in srgb, var(--color_brand-secondary), #000 30%); display:flex; font-size:var(--font_size-small); gap:8px; padding:10px 12px; .feather { margin-block-start:2px; color:var(--color_brand-secondary); } }
.sheet-big { font-family:var(--font_name-secondary); font-size:var(--font_size-display); font-weight:var(--font_weight-extra-bold-primary); text-align:center; padding-block:8px; small { display:block; color:var(--color_text-muted); font-family:var(--font_name-primary); font-size:var(--font_size-small); font-weight:var(--font_weight-primary); } }
.sheet-list { display:grid; gap:6px; }
.sheet-row { align-items:center; background:var(--color_bg-secondary); border-radius:var(--radius_small); display:flex; gap:12px; padding:12px 14px; text-align:start; width:100%; .feather { color:var(--color_text-muted); } .sheet-row-text { flex:1; min-width:0; strong { display:block; font-weight:var(--font_weight-bold-primary); } small { color:var(--color_text-muted); } } &:hover { background:var(--color_bg-secondary-darkest); } &.is-selected { outline:2px solid var(--color_brand-secondary); } &.is-static:hover { background:var(--color_bg-secondary); } .calendar-toggle input { width:44px; height:24px; &::after { width:18px; height:18px; } &:checked::after { transform:translateX(20px); } } }
.sheet-form { display:grid; gap:10px; .field { padding-inline:12px; } label.field { flex-direction:column; align-items:stretch; gap:2px; padding-block:6px; span { color:var(--color_text-muted); font-size:var(--font_size-xsmall); text-transform:uppercase; letter-spacing:.05em; } input, select { height:32px; background:none; border:0; outline:none; } } }
.sheet-player { align-items:center; display:flex; gap:12px; .player-bar { background:var(--color_bg-secondary-darkest); border-radius:var(--radius_pill); flex:1; height:8px; overflow:hidden; i { background:var(--thread_outbound); display:block; height:100%; width:35%; } } small { color:var(--color_text-muted); white-space:nowrap; } }
.sheet-transcript { display:grid; gap:8px; font-size:var(--font_size-small); p { display:flex; gap:10px; } strong { color:var(--color_text-muted); flex:none; width:64px; font-weight:var(--font_weight-bold-primary); } }
.sheet-preview { border:1px solid var(--color_line); border-radius:var(--radius_small); padding:14px; display:grid; gap:6px; .preview-subject { font-weight:var(--font_weight-bold-primary); } .preview-body { color:var(--color_text-muted); font-size:var(--font_size-small); } }

.sheet-label { color:var(--color_text-muted); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); letter-spacing:.06em; text-transform:uppercase; margin-block-start:6px; }
.sheet-hours { align-items:center; color:var(--color_text-muted); display:flex; font-size:var(--font_size-small); gap:6px; }
.sheet-days, .sheet-slots { display:flex; flex-wrap:wrap; gap:6px; }
.sheet-slots { max-height:150px; overflow:auto; padding:2px; border-radius:var(--radius_small); &.is-error { outline:2px solid var(--color_brand-secondary); } }
.sheet-chip { background:var(--color_bg-secondary); border-radius:var(--radius_pill); font-size:var(--font_size-small); font-weight:var(--font_weight-bold-primary); padding:7px 12px; &.is-active { background:var(--color_brand-secondary); color:#fff; } &:disabled { color:var(--color_text-soft); text-decoration:line-through; cursor:not-allowed; } &.is-closed { text-decoration:none; opacity:.5; } }

/* ========================================================================== */
/* STAGE DECISIONS — Agreed / Lost / Reopen in the lead header               */
/* ========================================================================== */
.lead-header {
	.action-button.is-decision span.action-icon { background:var(--status_ok-bg); color:var(--status_ok); }
	[data-action="mark-lost"] span.action-icon { background:var(--color_bg-secondary-darkest); color:var(--color_text-muted); }
	.reopen-lead { display:none; }
	&:not([data-stage="working"]) [data-action="mark-agreed"] { display:none; }
	&[data-stage="agreed"] [data-action="mark-lost"], &[data-stage="lost"] .action-button { display:none; }
	&[data-stage="lost"] .reopen-lead { display:inline-flex; }
}
body[data-desk="consign"] .lead-header [data-action="mark-agreed"], body[data-desk="backoffice"] .lead-header .is-decision { display:none; }

/* ========================================================================== */
/* PIPELINE — collapsed Lost column + drag states                            */
/* ========================================================================== */
.pipeline-column {
	.column-header[data-action] { cursor:pointer; user-select:none; .feather:last-child { margin-inline-start:auto; color:var(--color_text-muted); } }
	&.is-collapsed { flex:0 0 auto; max-width:none; .column-header { margin:0; } .column-body { display:none; } h2 { font-size:var(--font_size-primary); } }
	&.is-drop-target { outline:2px dashed var(--stage_color); outline-offset:-2px; background:color-mix(in srgb, var(--stage_color), var(--color_bg-secondary) 92%); }
}
.lead-card { .card-body { width:100%; cursor:pointer; text-align:start; font:inherit; } &[draggable="true"] .card-body { cursor:grab; } &.is-dragging { opacity:.45; } }

/* ========================================================================== */
/* QUICK EDIT — card popup content                                           */
/* ========================================================================== */
.quick-edit {
	display:grid;
	gap:8px;
	.qe-identity { color:var(--color_text-muted); display:flex; flex-wrap:wrap; gap:4px 14px; font-size:var(--font_size-small); }
	.stage-picker { display:flex; flex-wrap:wrap; gap:6px; }
	.stage-step { background:var(--color_bg-secondary); border:2px solid transparent; border-radius:var(--radius_pill); font-size:var(--font_size-small); font-weight:var(--font_weight-bold-primary); padding:7px 14px;
		&.is-current { background:var(--color_text); color:#fff; }
		&.is-proposed { border-color:var(--color_brand-secondary); color:var(--color_brand-secondary); background:var(--color_brand-secondary-soft); }
		&.is-terminal:not(.is-current):not(.is-proposed) { color:var(--color_text-muted); }
		&:disabled:not(.is-current) { color:var(--color_text-soft); cursor:not-allowed; text-decoration:line-through; }
	}
	.qe-hint { color:var(--color_text-muted); font-size:var(--font_size-xsmall); }
	.sheet-row select { background:#fff; border:1px solid var(--color_line-strong); border-radius:var(--radius_small); padding:6px 10px; font-weight:var(--font_weight-bold-primary); }
	.sheet-row .sheet-chip { flex:none; }
}
.pipeline { cursor:grab; scroll-snap-type:none; &.is-panning { cursor:grabbing; user-select:none; .lead-card .card-body { cursor:grabbing; } } }

/* ========================================================================== */
/* PAGE FRAME — board/calendar pages fill the viewport; no page scrollbar    */
/* ========================================================================== */
body[data-view="pipeline"], body[data-view="calendar"], body[data-view="daily-view"] { display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
body[data-view="pipeline"] .pipeline, body[data-view="calendar"] .calendar, body[data-view="daily-view"] .daily-view { flex:1; height:auto; min-height:0; }
@media (max-width:860px) {
	body[data-view="daily-view"] { height:auto; overflow:auto; }
	body[data-view="daily-view"] .daily-view { min-height:100dvh; }
}
@media (max-width:1100px) {
}
/* cards never squash to fit a short window — the column scrolls instead */
.pipeline-column .column-body > * { flex:none; }

/* ========================================================================== */
/* DETAIL PANEL — right-hand drawer with the facts behind a summary card     */
/* ========================================================================== */
.summary-card { text-align:start; font:inherit; cursor:pointer; transition:border-color var(--motion), box-shadow var(--motion); &:hover { border-color:var(--color_line-strong); box-shadow:0 4px 14px rgba(0,0,0,.08); } &:focus-visible { outline:2px solid var(--color_brand-secondary); outline-offset:2px; } }
.detail-panel {
	background:var(--color_bg-primary);
	box-shadow:var(--shadow_float);
	display:flex;
	flex-direction:column;
	inset-block:0;
	inset-inline-end:0;
	position:fixed;
	transform:translateX(105%);
	transition:transform var(--motion);
	width:min(460px, 100vw);
	z-index:45;
	&.is-open { transform:none; }
	.detail-head { align-items:center; border-block-end:1px solid var(--color_line); display:flex; gap:var(--gutter-small); padding:14px var(--gutter); .detail-title { flex:1; font-family:var(--font_name-primary); font-size:var(--font_size-medium); font-weight:var(--font_weight-bold-primary); } }
	.detail-body { display:grid; gap:var(--gutter); overflow:auto; padding:var(--gutter); align-content:start; }
	.detail-hero { border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:var(--color_bg-secondary); display:grid; place-items:center; color:var(--color_text-soft); img { width:100%; height:100%; object-fit:cover; } svg { width:50%; } }
	.detail-lede { display:grid; gap:6px; .detail-name { font-family:var(--font_name-secondary); font-size:var(--font_size-title); font-weight:var(--font_weight-extra-bold-primary); } .detail-meta { color:var(--color_text-muted); } .summary-status { display:flex; gap:6px; flex-wrap:wrap; } }
	.detail-section { display:grid; gap:8px; h3 { color:var(--color_text-muted); font-family:var(--font_name-primary); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); letter-spacing:.06em; text-transform:uppercase; } }
	.detail-spec { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--color_line); border:1px solid var(--color_line); border-radius:var(--radius_small); overflow:hidden; > div { background:var(--color_bg-primary); padding:10px 12px; display:grid; gap:2px; small { color:var(--color_text-muted); font-size:var(--font_size-xsmall); text-transform:uppercase; letter-spacing:.04em; } strong { font-weight:var(--font_weight-bold-primary); } &.is-wide { grid-column:1 / -1; } } }
	.detail-list { display:grid; gap:6px; li { align-items:flex-start; display:flex; gap:8px; font-size:var(--font_size-small); .feather { color:var(--status_ok); margin-block-start:3px; } &[data-tone="warn"] .feather { color:var(--status_flag); } } }
	.detail-actions { display:grid; gap:6px; .sheet-row .feather { color:var(--color_brand-secondary); } }
	.detail-note { background:var(--thread_note); border:1px solid var(--thread_note-line); border-radius:var(--radius_small); color:#6b5300; font-size:var(--font_size-small); padding:10px 12px; }
}
.detail-overlay { background:rgba(20,20,20,.25); inset:0; opacity:0; pointer-events:none; position:fixed; transition:opacity var(--motion); z-index:44; &.is-open { opacity:1; pointer-events:auto; } }
.detail-panel .detail-hero { aspect-ratio:auto; height:240px; flex:none; }

/* INBOX TINT — the tray sits on a light grey so the conversation reads as the page */
.inbox { background:#fafafa; .inbox-search .field { background:var(--color_bg-primary); border-color:var(--color_line); } .segmented { background:var(--color_bg-secondary-darkest); } }
.inbox-item { &:hover { background:var(--color_bg-secondary-darkest); } &.is-active:hover { background:var(--color_brand-secondary); } }

/* ========================================================================== */
/* CALENDAR — sidebar + main; four modes driven by data-mode                 */
/* ========================================================================== */
.calendar {
	--calendar_hour:100px;
	--calendar_gutter:72px;
	--calendar_days:7;
	--calendar_sidebar:260px;
	display:grid;
	grid-template-columns:var(--calendar_sidebar) 1fr;
	min-height:0;
	position:relative;
	.calendar-main { display:grid; grid-template-rows:1fr; min-height:0; min-width:0; }
	&[data-mode="day"] .calendar-main { grid-template-columns:minmax(320px, 1fr) minmax(320px, 1fr); }
}
.calendar-nav {
	align-items:center;
	display:flex;
	.calendar-title { font-family:var(--font_name-secondary); font-size:var(--font_size-large); font-weight:var(--font_weight-bold-primary); white-space:nowrap; }
}
.calendar-modes { margin-inline:auto; }
.calendar-toggle { align-items:center; display:inline-flex; gap:10px; font-weight:var(--font_weight-bold-primary); white-space:nowrap; input { appearance:none; background:var(--color_line-strong); border-radius:var(--radius_pill); cursor:pointer; height:28px; margin:0; position:relative; transition:background var(--motion); width:50px; &::after { content:""; background:#fff; border-radius:50%; height:22px; width:22px; position:absolute; top:3px; inset-inline-start:3px; transition:transform var(--motion); box-shadow:0 1px 3px rgba(0,0,0,.25); } &:checked { background:var(--thread_outbound); &::after { transform:translateX(22px); } } } }

/* ========================================================================== */
/* CALENDAR SIDEBAR — mini month + calendar checklists                       */
/* ========================================================================== */
.calendar-sidebar {
	border-inline-end:1px solid var(--color_line);
	display:flex;
	flex-direction:column;
	gap:var(--gutter);
	overflow:auto;
	padding:var(--gutter-small) var(--gutter-small) var(--gutter);
	.sidebar-nav { align-items:center; display:flex; gap:6px; margin-block-end:var(--gutter-small); .btn { flex:1; height:36px; justify-content:center; background:transparent; border:1px solid var(--color_line); &:hover { background:var(--color_bg-secondary); } } .menu-btn { width:36px; height:36px; background:transparent; &:hover { background:var(--color_bg-secondary); } } }
	/* the mini month anchors to the bottom; the lists sit under the nav and the gap absorbs the rest */
	#mini-month { order:9; margin-block-start:auto; flex:none; border-block-start:1px solid var(--color_line); padding-block-start:var(--gutter-small); margin-inline:calc(-1 * var(--gutter-small)); padding-inline:var(--gutter-small); }
	.calendar-list-group { flex:none; }
	.calendar-list-group { display:grid; gap:8px; h2 { color:var(--color_text-muted); font-family:var(--font_name-primary); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); letter-spacing:.06em; text-transform:uppercase; padding-inline:6px; } }
}
.calendar-list { display:grid; gap:2px; }
.calendar-list-item {
	align-items:center;
	border-radius:var(--radius_small);
	cursor:pointer;
	display:flex;
	font-size:var(--font_size-small);
	gap:10px;
	padding:7px 8px;
	&:hover { background:var(--color_bg-secondary); }
	input { accent-color:var(--color_text); margin:0; }
	.swatch { border-radius:3px; height:12px; width:12px; background:var(--stage_assigned); &[data-category="logistics"] { background:var(--stage_agreed); } &[data-category="followup"] { background:var(--color_text-soft); } &[data-owner] { background:var(--stage_working); } &[data-owner="Riley Morgan"] { background:var(--stage_assigned); } &[data-owner="Sam Okafor"] { background:var(--stage_attempting); } &[data-owner="Devon Marsh"] { background:var(--stage_motility); } }
}
.mini-month {
	display:grid;
	gap:6px;
	.mini-head { align-items:center; display:flex; justify-content:space-between; .menu-btn { width:28px; height:28px; background:transparent; .feather { width:16px; height:16px; } &:hover { background:var(--color_bg-secondary); } } }
	.mini-title { font-weight:var(--font_weight-bold-primary); padding:4px 8px; border-radius:var(--radius_small); display:flex; gap:8px; align-items:baseline; small { color:var(--color_text-muted); font-weight:var(--font_weight-primary); font-size:var(--font_size-xsmall); } &:hover { background:var(--color_bg-secondary); } }
	.mini-grid { display:grid; gap:2px; grid-template-columns:repeat(7, 1fr); text-align:center; }
	.mini-dow { color:var(--color_text-soft); font-size:var(--font_size-tiny); font-weight:var(--font_weight-bold-primary); padding-block:2px; }
	.mini-day { aspect-ratio:1; border-radius:50%; font-size:var(--font_size-xsmall); position:relative; display:grid; place-items:center;
		&:hover { background:var(--color_bg-secondary-darkest); }
		&.is-outside { color:var(--color_text-muted); }
		&.has-events::after { content:""; background:var(--stage_assigned); border-radius:50%; height:4px; width:4px; position:absolute; inset-block-end:2px; inset-inline-start:50%; transform:translateX(-50%); }
		&.is-today { color:var(--color_brand-secondary); font-weight:var(--font_weight-extra-bold-primary); box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); }
		&.is-selected { background:var(--color_text); color:#fff; box-shadow:none; &::after { background:#fff; } }
		&.is-today.is-selected { background:var(--color_brand-secondary); }
	}
	&.is-small { background:var(--color_bg-primary); border:1px solid var(--color_line); border-radius:var(--radius); padding:12px; &.is-current { border-color:var(--color_brand-secondary); } .mini-title { font-family:var(--font_name-primary); } .mini-day { font-size:var(--font_size-tiny); } }
}

/* ========================================================================== */
/* CALENDAR HEAD + GRID — week / day time grid                               */
/* ========================================================================== */
.calendar-scroll { min-height:0; overflow:auto; }
.calendar-head {
	background:var(--color_bg-primary);
	border-block-end:1px solid var(--color_line);
	display:grid;
	grid-template-columns:var(--calendar_gutter) repeat(var(--calendar_days), 1fr);
	position:sticky;
	top:0;
	z-index:5;
}
.calendar-day {
	align-items:center;
	border-inline-start:1px solid var(--color_line);
	display:flex;
	font-size:var(--font_size-primary);
	font-weight:var(--font_weight-bold-primary);
	gap:6px;
	justify-content:center;
	padding:12px 8px;
	width:100%;
	strong { font-weight:var(--font_weight-extra-bold-primary); }
	&:hover { background:var(--color_bg-secondary); }
	&.is-today { color:var(--color_brand-secondary); strong { align-items:center; background:var(--color_brand-secondary); border-radius:50%; color:#fff; display:inline-flex; height:32px; justify-content:center; width:32px; } }
	&.is-weekend { background:var(--color_bg-secondary); }
}
.calendar-grid { display:grid; grid-template-columns:var(--calendar_gutter) repeat(var(--calendar_days), 1fr); position:relative; }
.calendar-times { position:relative; span { display:block; height:var(--calendar_hour); color:var(--color_text-muted); font-size:var(--font_size-small); text-align:end; padding-inline-end:10px; transform:translateY(-.6em); } }
.calendar-col {
	background-image:linear-gradient(var(--color_line) 1px, transparent 1px);
	background-size:100% var(--calendar_hour);
	border-inline-start:1px solid var(--color_line);
	position:relative;
	&.is-weekend { background-color:var(--color_bg-secondary); }
	&.is-today { background-color:color-mix(in srgb, var(--color_brand-secondary), #fff 97%); }
}
.calendar-now { border-block-start:2px solid var(--color_brand-secondary); inset-inline:0; pointer-events:none; position:absolute; z-index:3; &::before { content:""; background:var(--color_brand-secondary); border-radius:50%; height:10px; width:10px; position:absolute; inset-inline-start:-5px; top:-6px; } }
.followup-task {
	--task_offset:0px;
	align-items:center;
	background:var(--color_bg-secondary-darkest);
	border-radius:var(--radius_small);
	color:var(--color_text);
	cursor:pointer;
	display:flex;
	font-size:var(--font_size-small);
	gap:8px;
	inset-inline:6px;
	padding:6px 10px;
	position:absolute;
	top:var(--task_offset);
	z-index:2;
	text-align:start;
	input { accent-color:var(--color_brand-secondary); margin:0; }
	&[data-status="overdue"] { background:var(--status_overdue-bg); color:var(--status_overdue-text); input { accent-color:var(--status_overdue); } }
	&.is-done { color:var(--color_text-muted); background:var(--color_bg-secondary); text-decoration:line-through; } /* faded by colour, not opacity, so it stays readable */
}
.calendar-event {
	--event_color:var(--stage_assigned);
	--event_top:0px;
	--event_height:var(--calendar_hour);
	--event_lane:0;
	--event_lanes:1;
	background:color-mix(in srgb, var(--event_color), #fff 88%);
	border-inline-start:4px solid var(--event_color);
	border-radius:var(--radius_small);
	color:color-mix(in srgb, var(--event_color), #000 38%);
	cursor:pointer;
	display:flex;
	flex-direction:column;
	height:calc(var(--event_height) - 6px);
	inset-inline-start:calc(6px + var(--event_lane) * (100% - 12px) / var(--event_lanes));
	overflow:hidden;
	position:absolute;
	text-align:start;
	top:var(--event_top);
	transition:box-shadow var(--motion);
	width:calc((100% - 12px) / var(--event_lanes) - (var(--event_lanes) - 1) * 3px);
	z-index:2;
	&:hover, &:focus-visible { box-shadow:0 6px 16px rgba(0,0,0,.12); z-index:4; }
	&[data-category="logistics"] { --event_color:var(--stage_agreed); }
	&[data-tone="ok"] { --event_color:var(--stage_agreed); }
	&[data-tone="working"] { --event_color:var(--stage_working); }
	&[data-status="past"], &[data-status="cancelled"] { --event_color:var(--color_text-muted); color:var(--color_text-muted); }
	&[data-status="cancelled"] .event-name { text-decoration:line-through; }
	.event-owner { background:var(--event_color); color:#fff; font-size:var(--font_size-micro); font-weight:var(--font_weight-extra-bold-primary); letter-spacing:.06em; padding:3px 10px; text-transform:uppercase; display:flex; justify-content:space-between; align-items:center; .feather { width:12px; height:12px; } }
	.event-body { display:flex; gap:8px; padding:8px 8px 8px 6px; min-height:0; .thumb { width:52px; height:40px; } }
	.event-text { display:grid; gap:1px; min-width:0; font-size:var(--font_size-small); line-height:1.3; }
	.event-name { font-weight:var(--font_weight-bold-primary); font-size:var(--font_size-primary); }
	.event-unit { font-weight:var(--font_weight-bold-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	.event-meta { color:color-mix(in srgb, var(--event_color), #000 30%); display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; }
	.event-done { position:absolute; top:6px; inset-inline-end:8px; color:var(--event_color); .feather { width:16px; height:16px; } }
}
body:not([data-role="management"]) .calendar-event .event-owner { display:none; }
body[data-role="management"] .calendar-event { border-inline-start-width:0; .event-done { top:2px; color:#fff; } }
.calendar[data-mode="day"] { .calendar-day { justify-content:flex-start; padding-inline-start:var(--gutter); } .calendar-event, .followup-task { inset-inline:12px; } .calendar-event { max-width:none; width:calc((100% - 24px) / var(--event_lanes) - (var(--event_lanes) - 1) * 3px); inset-inline-start:calc(12px + var(--event_lane) * (100% - 24px) / var(--event_lanes)); } }

/* ========================================================================== */
/* DAY AGENDA — Notion-style list of the day                                 */
/* ========================================================================== */
.day-agenda {
	border-inline-start:1px solid var(--color_line);
	display:flex;
	flex-direction:column;
	min-height:0;
	overflow:auto;
	.agenda-head { align-items:center; display:flex; gap:10px; padding:14px var(--gutter); position:sticky; top:0; background:var(--color_bg-primary); border-block-end:1px solid var(--color_line); z-index:2; h2 { font-size:var(--font_size-large); flex:1; } .btn { height:34px; padding-inline:12px; } }
	.agenda-list { display:grid; padding:8px var(--gutter-small); }
	.agenda-empty { align-items:center; color:var(--color_text-soft); display:flex; flex-direction:column; gap:10px; padding:var(--gutter-large); text-align:center; .feather { width:28px; height:28px; } }
}
.agenda-item {
	align-items:center;
	border-radius:var(--radius_small);
	cursor:pointer;
	display:grid;
	gap:12px;
	grid-template-columns:64px 10px 1fr auto auto;
	padding:10px 10px;
	&:hover { background:var(--color_bg-secondary); .agenda-actions { opacity:1; } }
	time { display:grid; font-size:var(--font_size-small); font-weight:var(--font_weight-bold-primary); small { color:var(--color_text-soft); font-weight:var(--font_weight-primary); } }
	.agenda-text { display:grid; gap:1px; min-width:0; strong { font-weight:var(--font_weight-bold-primary); } small { color:var(--color_text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
	.agenda-actions { display:flex; gap:4px; opacity:0; transition:opacity var(--motion); .btn { width:32px; height:32px; border-color:transparent; background:transparent; &:hover { background:var(--color_bg-secondary-darkest); } .feather { width:15px; height:15px; } } }
	&[data-status="done"] .agenda-text strong { color:var(--color_text-muted); }
	&[data-status="cancelled"], &[data-status="past"] { color:var(--color_text-muted); .agenda-text strong { color:var(--color_text-muted); } }
	&[data-status="cancelled"] .agenda-text strong { text-decoration:line-through; }
	.agenda-check { accent-color:var(--color_text); margin:0 6px 0 0; vertical-align:-2px; }
}
.agenda-dot { --event_color:var(--stage_assigned); background:var(--event_color); border-radius:50%; height:10px; width:10px; flex:none; &[data-category="logistics"], &[data-tone="ok"] { --event_color:var(--stage_agreed); } &[data-tone="working"] { --event_color:var(--stage_working); } &[data-category="followup"] { --event_color:var(--color_text-soft); } }

/* ========================================================================== */
/* CALENDAR MONTH — iCal-style grid                                          */
/* ========================================================================== */
.calendar-month {
	background:var(--color_line);
	border-block-start:0; /* the topbar already draws the line above */
	display:grid;
	gap:1px;
	grid-auto-rows:minmax(148px, 1fr);
	grid-template-columns:repeat(7, 1fr);
	min-height:0;
	overflow:auto;
	.month-dow { background:var(--color_bg-secondary); color:var(--color_text-muted); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); padding:6px; text-align:center; }
	.month-cell { background:var(--color_bg-primary); cursor:cell; display:flex; flex-direction:column; gap:3px; min-height:0; padding:6px; align-items:stretch;
		> * { flex:none; min-height:24px; } /* chips never squash — the cell shows three, then "+n more" */
		&.is-outside { background:var(--color_bg-secondary); .month-date { color:var(--color_text-soft); } }
		&.is-weekend:not(.is-outside) { background:color-mix(in srgb, var(--color_bg-secondary), #fff 40%); }
		&.is-today .month-date { background:var(--color_brand-secondary); color:#fff; }
		&:hover { background:var(--color_bg-secondary-darker); }
	}
	.month-date { align-self:flex-end; border-radius:50%; display:inline-grid; font-size:var(--font_size-small); font-weight:var(--font_weight-bold-primary); height:26px; place-items:center; width:26px; &:hover { background:var(--color_bg-secondary-darkest); } }
	.month-event { --event_color:var(--stage_assigned); align-items:center; background:color-mix(in srgb, var(--event_color), #fff 85%); border-inline-start:3px solid var(--event_color); border-radius:4px; color:color-mix(in srgb, var(--event_color), #000 40%); display:flex; font-size:var(--font_size-xsmall); gap:5px; overflow:hidden; padding:2px 6px; text-align:start; white-space:nowrap;
		.month-time { color:var(--color_text-muted); flex:none; }
		&[data-category="logistics"], &[data-tone="ok"] { --event_color:var(--stage_agreed); }
		&[data-tone="working"] { --event_color:var(--stage_working); }
		&[data-status="cancelled"], &[data-status="past"] { --event_color:var(--color_text-muted); }
		&[data-status="cancelled"] { text-decoration:line-through; }
		&.is-task { background:var(--color_bg-secondary-darkest); border-color:var(--color_text-soft); color:var(--color_text); cursor:pointer; input { accent-color:var(--color_text); margin:0; width:12px; height:12px; flex:none; } .month-task-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start; color:inherit; } &[data-status="overdue"] { background:var(--status_overdue-bg); color:var(--status_overdue); border-color:var(--status_overdue); input { accent-color:var(--status_overdue); } } &[data-status="done"] { opacity:.6; } }
		&:hover { filter:brightness(.95); }
	}
	.month-more { color:var(--color_text-muted); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); text-align:start; padding:2px 6px; &:hover { color:var(--color_text); } }
}

/* ========================================================================== */
/* CALENDAR YEAR — twelve mini months                                        */
/* ========================================================================== */
.calendar-year { display:grid; gap:var(--gutter-small); grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); min-height:0; overflow:auto; padding:var(--gutter-small) var(--gutter) var(--gutter); align-content:start; }

/* ========================================================================== */
/* EVENT POPOVER — anchored card                                             */
/* ========================================================================== */
.event-popover {
	background:var(--color_bg-primary);
	border-radius:var(--radius);
	box-shadow:var(--shadow_float);
	display:grid;
	gap:12px;
	padding:14px 14px 12px;
	position:fixed;
	width:340px;
	z-index:46;
	.popover-close { position:absolute; top:8px; inset-inline-end:8px; width:30px; height:30px; background:transparent; .feather { width:16px; height:16px; } &:hover { background:var(--color_bg-secondary); } }
	.popover-head { --event_color:var(--stage_assigned); border-inline-start:4px solid var(--event_color); display:grid; gap:4px; padding-inline:10px 32px; h3 { font-family:var(--font_name-primary); font-size:var(--font_size-medium); font-weight:var(--font_weight-bold-primary); } .pill { justify-self:start; }
		&[data-category="logistics"], &[data-tone="ok"] { --event_color:var(--stage_agreed); } &[data-tone="working"] { --event_color:var(--stage_working); } &[data-category="followup"] { --event_color:var(--color_text-soft); } }
	.popover-facts { display:grid; gap:8px; margin:0; > div { display:flex; gap:10px; font-size:var(--font_size-small); } dt { color:var(--color_text-muted); flex:none; margin-block-start:2px; } dd { margin:0; small { color:var(--color_text-muted); } } }
	.popover-actions { display:flex; flex-wrap:wrap; gap:6px; border-block-start:1px solid var(--color_line); padding-block-start:10px; .btn { height:32px; padding-inline:10px; font-size:var(--font_size-small); gap:6px; .feather { width:14px; height:14px; } } }
	.popover-list { display:grid; gap:4px; max-height:300px; overflow:auto; .sheet-row { padding:8px 10px; } }
}

/* ========================================================================== */
/* MEDIA QUERY — calendar                                                     */
/* ========================================================================== */
@media (max-width:1100px) {
	.calendar { --calendar_gutter:56px; --calendar_sidebar:220px; }
	.calendar[data-mode="week"] { .calendar-head, .calendar-grid { min-width:max(100%, calc(var(--calendar_gutter) + 7 * 140px)); } }
	.calendar[data-mode="day"] .calendar-main { grid-template-columns:1fr; grid-template-rows:minmax(50dvh, 1fr) auto; .day-agenda { border-inline-start:0; border-block-start:1px solid var(--color_line); } }
	.calendar-nav .calendar-title { font-size:var(--font_size-medium); }
}
@media (max-width:860px) {
	.calendar { --calendar_sidebar:200px; } /* the sidebar is always there; it just narrows */
	.event-popover { inset-inline:0 !important; inset-block-end:0; top:auto !important; width:auto; border-radius:var(--radius-large) var(--radius-large) 0 0; }
	.agenda-item { grid-template-columns:56px 10px 1fr; .agenda-actions { grid-column:1 / -1; opacity:1; justify-content:flex-end; } }
}

/* CIRCLES — anything round must never be squeezed by a flex row */
.btn-round, .menu-btn, .avatar, .call-icon, .action-icon, .summary-icon, .step-dot, .stage-dot, .queue-dot, .agenda-dot, .item-unread, .card-unread, .event-type-dot, .swatch, .month-date, .popover-close { flex:none; }
.topbar .page-title { flex:none; }
/* completed check — inline before the name (salesperson); in the owner bar (management) */
.calendar-event .event-name .feather { width:14px; height:14px; color:var(--event_color); vertical-align:-2px; margin-inline-end:4px; display:inline; }
body[data-role="management"] .calendar-event .event-owner { padding-inline-end:24px; }
/* narrow day columns — drop the thumbnail so the words keep their room */
.calendar-col { container-type:inline-size; }
@container (max-width:170px) {
	.calendar-event .thumb { display:none; }
	.calendar-event .event-body { padding-inline:8px; }
	.calendar-event .event-unit { display:none; }
}
.calendar-event .event-name { line-height:1.2; .feather { display:inline-block; vertical-align:-1px; } }
.calendar-event .event-meta { white-space:normal; flex-wrap:wrap; row-gap:0; }

/* ========================================================================== */
/* STATUS GLYPHS — the one status vocabulary on every calendar surface       */
/* ========================================================================== */
.status-glyph { display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-inline-end:4px; flex:none;
	&[data-status="done"] { color:var(--status_ok); }
	&[data-status="cancelled"] { color:var(--color_text-muted); }
	&[data-status="overdue"] { color:var(--status_overdue-text); } }
.calendar-event .event-name .status-glyph { color:var(--status_ok); }
.calendar-event .event-name .status-glyph[data-status="cancelled"] { color:var(--color_text-muted); }
.month-event .status-glyph { width:12px; height:12px; margin-inline-end:2px; }
.popover-status { align-items:center; color:var(--color_text-muted); display:inline-flex; font-size:var(--font_size-small); gap:4px; &[data-status="done"] { color:var(--status_ok); } &[data-status="overdue"] { color:var(--status_overdue); } }
.popover-head[data-status="cancelled"] h3 { text-decoration:line-through; color:var(--color_text-muted); }

/* POPOVER FOLLOW-UPS — the lead's follow-ups, workable from the appointment */
.event-popover .popover-followups { border-block-start:1px solid var(--color_line); display:grid; gap:6px; padding-block-start:10px;
	h4 { color:var(--color_text-muted); font-family:var(--font_name-primary); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); letter-spacing:.06em; text-transform:uppercase; }
	ul { display:grid; gap:2px; }
	li { align-items:center; display:flex; gap:8px; input { accent-color:var(--color_text); margin:0; flex:none; } &[data-status="overdue"] .popover-followup strong { color:var(--status_overdue); } &[data-status="done"] .popover-followup { opacity:.55; } }
	.popover-followup { border-radius:var(--radius_small); display:grid; flex:1; min-width:0; padding:4px 6px; text-align:start; strong { font-weight:var(--font_weight-bold-primary); font-size:var(--font_size-small); } small { color:var(--color_text-muted); font-size:var(--font_size-xsmall); } &:hover { background:var(--color_bg-secondary); } }
	.popover-empty { color:var(--color_text-soft); font-size:var(--font_size-small); }
	.sheet-chip { justify-self:start; display:inline-flex; align-items:center; gap:4px; .feather { width:12px; height:12px; } }
}

/* ========================================================================== */
/* INLINE EDITING — fields inside the event popover edit in place            */
/* ========================================================================== */
.event-popover { width:380px; max-height:calc(100dvh - 24px); overflow:auto;
	.popover-facts.is-editable { .popover-field { display:flex; gap:10px; font-size:var(--font_size-small); dt { color:var(--color_text-muted); flex:none; margin-block-start:6px; } dd { margin:0; flex:1; min-width:0; display:grid; gap:6px; } } }
	.inline-field { border-radius:var(--radius_small); display:block; padding:4px 8px; margin-inline-start:-8px; text-align:start; width:calc(100% + 8px); line-height:1.35; transition:background var(--motion);
		small { display:block; color:var(--color_text-muted); font-size:var(--font_size-xsmall); }
		.is-placeholder { color:var(--color_text-soft); }
		.event-type-dot { display:inline-block; vertical-align:middle; margin-inline-end:6px; }
		&:hover { background:var(--color_bg-secondary); }
		&.is-editing { background:var(--color_brand-secondary-soft); box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); }
		&.is-title { display:inline; width:auto; margin:0; padding:0 4px; font:inherit; &:hover { background:var(--color_bg-secondary); } }
	}
	.inline-picker { background:var(--color_bg-secondary); border-radius:var(--radius_small); padding:10px; display:grid; gap:8px; animation:crm-rise var(--motion) both;
		.mini-month { .mini-day { background:transparent; &:hover { background:var(--color_bg-secondary-darkest); } &.is-selected { background:var(--color_text); } } .mini-head .menu-btn { background:transparent; } }
		.inline-chips { display:flex; flex-wrap:wrap; gap:5px; max-height:160px; overflow:auto; .sheet-chip { background:#fff; padding:6px 10px; } }
		.inline-list { display:grid; gap:4px; max-height:220px; overflow:auto; .sheet-row { background:#fff; padding:8px 10px; &.is-selected { outline:2px solid var(--color_brand-secondary); } } }
		.inline-hint { color:var(--color_text-muted); font-size:var(--font_size-xsmall); }
		.inline-notes { background:#fff; border:1px solid var(--color_line-strong); border-radius:var(--radius_small); font:inherit; font-size:var(--font_size-small); min-height:70px; outline:none; padding:8px 10px; resize:vertical; width:100%; &:focus { border-color:var(--color_text-muted); } }
	}
	.popover-actions .btn-quiet { margin-inline-start:auto; color:var(--color_text-muted); width:32px; padding:0; }
}

/* DRAFT CARD — the "New" state of the event popover, styled like the original editor */
.event-popover {
	.editor-head { align-items:center; display:flex; justify-content:space-between; h2 { font-family:var(--font_name-primary); font-size:var(--font_size-large); font-weight:var(--font_weight-bold-primary); } }
	.editor-kind .segmented { display:flex; > button { flex:1; } > button.is-active { color:var(--color_brand-secondary); } }
	.editor-row.is-draft { background:var(--color_bg-secondary); border-radius:var(--radius_small); display:grid; padding:0; > * + * { border-block-start:1px solid var(--color_line); } .inline-picker { border-block-start:0; margin:0 8px 8px; } }
	.draft-row { align-items:center; display:flex; gap:10px; min-height:48px; padding:6px 14px; .feather { color:var(--color_text-muted); flex:none; } .inline-field { flex:1; margin:0; width:auto; padding:4px 6px; font-weight:var(--font_weight-bold-primary); &.is-editing { background:var(--color_brand-secondary-soft); box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); } } .editor-muted { color:var(--color_text-muted); font-size:var(--font_size-small); } .event-type-dot { background:var(--stage_assigned); border-radius:50%; height:10px; width:10px; flex:none; &[data-category="followup"] { background:var(--color_text-soft); } &[data-category="logistics"] { background:var(--stage_agreed); } }
		&.is-split { .editor-label { flex:1; font-weight:var(--font_weight-bold-primary); } .editor-value { background:#fff; border-radius:var(--radius_small); flex:none; padding:6px 12px; width:auto; margin:0; font-weight:var(--font_weight-bold-primary); } } }
	.inline-notes.is-draft { background:var(--color_bg-secondary); border:0; border-radius:var(--radius_small); font:inherit; font-size:var(--font_size-small); min-height:60px; outline:none; padding:12px 14px; resize:vertical; width:100%; }
	.popover-close { z-index:1; }
}

/* DRAFT CARD — native dropdowns + readable time chips */
.event-popover .draft-row .draft-select { appearance:none; background:none; border:0; flex:1; font-weight:var(--font_weight-bold-primary); min-width:0; outline:none; padding:8px 0; cursor:pointer; color:var(--color_text); &:invalid, &.is-error { color:var(--color_text-soft); } &.is-error { box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); border-radius:var(--radius_small); padding-inline:6px; } }
.event-popover .inline-picker .inline-chips .sheet-chip { color:var(--color_text); background:var(--color_bg-primary); border:1px solid var(--color_line); &.is-active { background:var(--color_brand-secondary); border-color:var(--color_brand-secondary); color:#fff; } &:disabled { color:var(--color_text-soft); background:var(--color_bg-secondary-darkest); } }
.event-popover .inline-picker { background:var(--color_bg-secondary-darkest); }
.event-popover .editor-row.is-draft .inline-picker { background:var(--color_bg-primary); border:1px solid var(--color_line); }

/* EVENT CARD — same bones as the New card */
.event-popover {
	.editor-head .popover-status { font-size:var(--font_size-small); }
	.editor-head[data-status="cancelled"] h2 { text-decoration:line-through; color:var(--color_text-muted); }
	.draft-row.is-static { .draft-text { flex:1; font-weight:var(--font_weight-bold-primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
	.popover-followups { border-block-start:0; padding-block-start:0; }
	.popover-actions { border-block-start:0; padding-block-start:0; }
}

/* NOW LABEL — the current time in the gutter, iCal-style */
.calendar-times .calendar-now-label { background:var(--color_brand-secondary); border-radius:var(--radius_pill); color:#fff; font-size:var(--font_size-tiny); font-weight:var(--font_weight-extra-bold-primary); inset-inline-end:6px; line-height:1; padding:3px 6px; position:absolute; transform:translateY(-50%); z-index:4; height:auto; text-align:center; }

/* FULL DAY — 24 hours, off-hours shaded; now-line across the week */
.calendar-col { --work_start:0px; --work_end:0px; background-image:linear-gradient(var(--color_line) 1px, transparent 1px), linear-gradient(to bottom, var(--color_bg-secondary-darker) var(--work_start), transparent var(--work_start), transparent var(--work_end), var(--color_bg-secondary-darker) var(--work_end)); background-size:100% var(--calendar_hour), 100% 100%; &.is-today { background-image:linear-gradient(var(--color_line) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--color_brand-secondary), var(--color_bg-secondary-darker) 96%) var(--work_start), color-mix(in srgb, var(--color_brand-secondary), #fff 97%) var(--work_start), color-mix(in srgb, var(--color_brand-secondary), #fff 97%) var(--work_end), color-mix(in srgb, var(--color_brand-secondary), var(--color_bg-secondary-darker) 96%) var(--work_end)); } }
.calendar-grid .calendar-now { --now_today:0; --now_days:7; inset-inline-start:var(--calendar_gutter); inset-inline-end:0; border-block-start:1px solid color-mix(in srgb, var(--color_brand-secondary), #fff 45%); &::before { inset-inline-start:calc(var(--now_today) * (100% / var(--now_days))); top:-5px; } &::after { content:""; position:absolute; top:-1px; height:2px; background:var(--color_brand-secondary); inset-inline-start:calc(var(--now_today) * (100% / var(--now_days))); width:calc(100% / var(--now_days)); } }
.calendar-times span { position:relative; }
.calendar-times span.is-first { transform:none; padding-block-start:2px; }

/* gutter: midnight at both ends; weekday off-hours lighter than weekends */
.calendar-times span.is-last { height:0; transform:translateY(-1.2em); }
.calendar-col { --offhours:color-mix(in srgb, var(--color_bg-secondary), #fff 45%); background-image:linear-gradient(var(--color_line) 1px, transparent 1px), linear-gradient(to bottom, var(--offhours) var(--work_start), transparent var(--work_start), transparent var(--work_end), var(--offhours) var(--work_end)); &.is-weekend { --offhours:var(--color_bg-secondary-darker); background-color:var(--color_bg-secondary); } &.is-today { --offhours:color-mix(in srgb, var(--color_brand-secondary), var(--color_bg-secondary) 95%); background-image:linear-gradient(var(--color_line) 1px, transparent 1px), linear-gradient(to bottom, var(--offhours) var(--work_start), color-mix(in srgb, var(--color_brand-secondary), #fff 97%) var(--work_start), color-mix(in srgb, var(--color_brand-secondary), #fff 97%) var(--work_end), var(--offhours) var(--work_end)); } }
/* month: the Sun–Sat row is a thin header, not a day-sized cell */
.calendar-month { grid-template-rows:auto repeat(6, minmax(148px, 1fr)); grid-auto-rows:minmax(148px, 1fr); .month-dow { padding:8px 6px; position:sticky; top:0; z-index:1; } }
/* month: three clearly different tones — header strip, weekend, outside-month */
.calendar-month {
	.month-dow { background:var(--color_bg-secondary-darkest); color:var(--color_text); }
	.month-cell.is-weekend:not(.is-outside) { background:color-mix(in srgb, var(--color_bg-secondary), #fff 35%); }
	.month-cell.is-outside { background:var(--color_bg-secondary-darkest); .month-date { color:var(--color_text-soft); } &.is-weekend { background:color-mix(in srgb, var(--color_bg-secondary-darkest), #000 3%); } }
	.month-cell.is-outside:hover { background:color-mix(in srgb, var(--color_bg-secondary-darkest), #000 3%); }
}
/* month header strip: plain white with muted labels, iCal-style */
.calendar-month .month-dow { background:var(--color_bg-primary); color:var(--color_text-muted); border-block-end:1px solid var(--color_line); }
/* month: outside-month days sit clearly apart from the grid lines */
.calendar-month { background:#d9d9dc; border-color:#d9d9dc;
	.month-cell.is-outside { background:var(--color_bg-secondary); &.is-weekend { background:color-mix(in srgb, var(--color_bg-secondary), #000 2%); } &:hover { background:var(--color_bg-secondary-darker); } }
	.month-cell.is-weekend:not(.is-outside) { background:#fafafb; }
	.month-dow { border-block-end:0; }
}

/* ========================================================================== */
/* CALENDAR YEAR — iCal-style: 4×3 months filling the view                   */
/* ========================================================================== */
.calendar-year {
	align-content:stretch;
	gap:0;
	grid-template-columns:repeat(4, 1fr);
	grid-template-rows:repeat(3, 1fr);
	padding:var(--gutter-small) var(--gutter) var(--gutter);
	.mini-month.is-small {
		border:0; border-radius:0; padding:var(--gutter-small) var(--gutter);
		display:grid; grid-template-rows:auto 1fr; gap:6px;
		&:hover { background:var(--color_bg-secondary); border-radius:var(--radius); }
		&.is-current .mini-title { color:var(--color_brand-secondary); }
		.mini-head { justify-content:flex-start; }
		.mini-title { font-family:var(--font_name-secondary); font-size:var(--font_size-large); font-weight:var(--font_weight-extra-bold-primary); padding:0; gap:10px; small { font-family:var(--font_name-primary); font-size:var(--font_size-xsmall); } &:hover { background:transparent; text-decoration:underline; text-underline-offset:4px; } }
		.mini-grid { align-content:start; gap:2px 0; }
		.mini-dow { font-size:var(--font_size-tiny); color:var(--color_text-soft); }
		.mini-day { font-size:var(--font_size-small); aspect-ratio:auto; height:28px; border-radius:50%; width:28px; justify-self:center;
			&.is-outside { visibility:hidden; }
			&:nth-child(7n + 1), &:nth-child(7n) { color:var(--color_text-muted); }
			&.has-events { font-weight:var(--font_weight-extra-bold-primary); color:var(--color_text); text-decoration:none; &::after { background:var(--stage_assigned); } }
			&.is-today { color:var(--color_brand-secondary); box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); background:transparent; &::after { background:var(--color_brand-secondary); } }
		}
	}
}
@media (max-width:1100px) { .calendar-year { grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(4, 1fr); } }
@media (max-width:700px) { .calendar-year { grid-template-columns:repeat(2, 1fr); grid-template-rows:none; grid-auto-rows:auto; } }
/* year: closer to iCal — name sits on the first column, no hovers, solid red today */
.calendar-year .mini-month.is-small {
	&:hover { background:transparent; }
	.mini-title { padding-inline-start:2px; font-size:var(--font_size-large); small { display:none; } &:hover { text-decoration:none; } }
	.mini-grid { justify-items:start; }
	.mini-dow, .mini-day { width:26px; text-align:center; justify-self:start; }
	.mini-day { height:26px; font-size:var(--font_size-xsmall);
		&:hover { background:transparent; }
		&.is-today { background:var(--color_brand-secondary); color:#fff; box-shadow:none; font-weight:var(--font_weight-extra-bold-primary); &::after { display:none; } }
		&.has-events:not(.is-today) { font-weight:var(--font_weight-bold-primary); &::after { display:none; } }
	}
}
.calendar-year .mini-month.is-small .mini-day.is-past { color:var(--color_text-muted); font-weight:var(--font_weight-primary); }
/* year: bring back the item count and the event dots */
.calendar-year .mini-month.is-small {
	.mini-title small { display:inline; }
	.mini-day.has-events:not(.is-today)::after { display:block; }
	.mini-day.is-today::after { display:block; background:#fff; }
	.mini-day.has-events.is-past::after { background:var(--color_text-soft); }
}
/* mini-month dots: breathing room under the number; today's circle carries its own meaning */
.mini-month .mini-day { height:30px; padding-block-end:5px; &.has-events::after { inset-block-end:3px; height:4px; width:4px; } &.is-today::after { display:none !important; } }
.calendar-year .mini-month.is-small .mini-day { height:30px; padding-block-end:5px; &.is-today { padding-block-end:0; } }

/* ========================================================================== */
/* MINI MONTH — number circle + dot as two separate things (no ovals)        */
/* ========================================================================== */
.mini-month .mini-day {
	aspect-ratio:auto; height:auto; width:auto; padding:0 0 7px; border-radius:0; background:transparent !important; box-shadow:none !important; display:grid; justify-items:center; gap:0;
	.mini-num { align-items:center; border-radius:50%; display:inline-flex; height:26px; justify-content:center; width:26px; }
	&.is-today .mini-num { background:var(--color_brand-secondary); color:#fff; font-weight:var(--font_weight-extra-bold-primary); }
	&.is-selected:not(.is-today) .mini-num { background:var(--color_text); color:#fff; }
	&.has-events::after { content:""; display:block !important; background:var(--stage_assigned); border-radius:50%; height:4px; width:4px; position:absolute; inset-block-end:1px; inset-inline-start:50%; transform:translateX(-50%); }
	&.is-today.has-events::after { display:block !important; background:var(--color_brand-secondary); }
	&.is-past.has-events::after { background:var(--color_text-soft); }
	&.is-today.is-past::after { background:var(--color_brand-secondary); }
}
.calendar-year .mini-month.is-small .mini-day { height:auto; width:auto; padding:0 0 7px; .mini-num { width:26px; height:26px; } &.is-today { padding-block-end:7px; } }
.calendar-year { grid-template-rows:repeat(3, minmax(300px, 1fr)); overflow:auto; .mini-month.is-small .mini-grid { gap:4px 0; } }
/* mini-day is a square hit area; only the inner number is a circle */
.mini-month .mini-day, .calendar-year .mini-month.is-small .mini-day { border-radius:0 !important; position:relative; }
.mini-month .mini-day.is-today::after { display:block !important; background:var(--color_brand-secondary) !important; }
.mini-month .mini-day.is-today:not(.has-events)::after { display:none !important; }

/* ========================================================================== */
/* FILTER MENU — dropdown of checkboxes (stores, salespeople)                 */
/* ========================================================================== */
.filter-menu { position:relative;
	.filter-control { cursor:pointer; > span { font-weight:var(--font_weight-bold-primary); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
	&.is-open .filter-control { background:var(--color_bg-secondary-darkest); }
	.filter-menu-panel { background:var(--color_bg-primary); border-radius:var(--radius); box-shadow:var(--shadow_float); display:grid; gap:2px; max-height:360px; min-width:240px; overflow:auto; padding:8px; position:absolute; inset-inline-start:0; top:calc(100% + 6px); z-index:30; animation:crm-rise var(--motion) both;
		.calendar-list-item { padding:8px 10px; small { color:var(--color_text-muted); margin-inline-start:auto; font-size:var(--font_size-xsmall); } .swatch[data-store] { background:var(--color_text-soft); } .swatch[data-all] { background:var(--color_text); } }
		.is-all { border-block-end:1px solid var(--color_line); border-radius:0; margin-block-end:4px; padding-block-end:10px; font-weight:var(--font_weight-bold-primary); }
	}
}

/* ========================================================================== */
/* PHONE — Daily View as two full screens (iPhone Messages pattern)           */
/* Everything keys off body[data-device="phone"], set by crmDevice().         */
/* ========================================================================== */
[data-phone] { display:none !important; }
body[data-device="phone"] [data-phone] { display:flex !important; }
body[data-device="phone"] .inbox-item .item-chevron[data-phone] { display:block !important; }

body[data-device="phone"][data-view="daily-view"] {
	--keyboard_offset:0px;
	--phone_topbar:56px;
	height:100dvh; overflow:hidden;
	.daily-view { display:block; height:100dvh; min-height:0; overflow:hidden; position:relative; }
	.inbox, .conversation { background:var(--color_bg-primary); display:flex; flex-direction:column; inset:0; min-height:0; position:absolute; transition:transform 220ms ease; will-change:transform; }
	.inbox { border:0; transform:translateX(0); z-index:1; }
	.conversation { display:flex; grid-template-rows:none; transform:translateX(100%); z-index:2; box-shadow:-12px 0 30px rgba(0,0,0,.12); }
	&[data-screen="conversation"] .inbox { transform:translateX(-28%); }
	&[data-screen="conversation"] .conversation { transform:none; }

	/* --- shared top bar --- */
	.phone-topbar { align-items:center; background:color-mix(in srgb, var(--color_bg-primary), transparent 8%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-block-end:1px solid var(--color_line); display:grid; flex:none; gap:8px; grid-template-columns:44px 1fr 44px; min-height:var(--phone_topbar); padding:calc(max(env(safe-area-inset-top), var(--safe_top, 0px)) + 6px) 10px 6px; position:relative; z-index:3;
		.menu-btn { width:40px; height:40px; background:transparent; justify-self:center; .feather { width:24px; height:24px; } &:hover { background:var(--color_bg-secondary); } }
		.phone-title { font-family:var(--font_name-secondary); font-size:var(--font_size-large); font-weight:var(--font_weight-extra-bold-primary); text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; }
		.phone-badge { align-items:center; background:var(--color_brand-secondary); border-radius:var(--radius_pill); color:#fff; display:inline-flex; font-family:var(--font_name-primary); font-size:var(--font_size-tiny); font-weight:var(--font_weight-extra-bold-primary); height:20px; justify-content:center; min-width:20px; padding-inline:6px; }
		.phone-lead { align-items:center; display:flex; flex-direction:column; gap:2px; justify-self:center; .avatar-small { width:34px; height:34px; font-size:var(--font_size-small); } .phone-lead-name { font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
		.phone-back .feather { width:28px; height:28px; color:var(--color_brand-secondary); }
	}

	/* --- inbox screen --- */
	.inbox-header, .inbox-search, .inbox-tabs { display:none; }
	.phone-filter { position:relative; .phone-filter-dot { position:absolute; top:6px; inset-inline-end:6px; width:8px; height:8px; border-radius:50%; background:var(--color_brand-secondary); } }
	.phone-focus { display:flex !important; flex:none; gap:14px; overflow-x:auto; padding:8px 14px 10px; scrollbar-width:none; &::-webkit-scrollbar { display:none; }
		.focus-item { align-items:center; display:flex; flex-direction:column; flex:none; gap:6px; width:64px; .avatar { width:56px; height:56px; font-size:var(--font_size-primary); position:relative; } .focus-dot { border:2px solid #fff; border-radius:50%; height:14px; position:absolute; inset-block-end:0; inset-inline-end:0; width:14px; background:var(--stage_assigned); &[data-status="overdue"], &[data-status="urgent"] { background:var(--status_overdue); } &[data-status="appointment"] { background:var(--status_ok); } } small { color:var(--color_text); font-size:var(--font_size-tiny); font-weight:var(--font_weight-bold-primary); max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
	}
	.inbox-list { border-block-start:1px solid var(--color_line); flex:1; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-block-end:8px; }
	.inbox-item { grid-template-columns:10px 48px 1fr 18px; gap:2px 12px; padding:12px 12px 12px 8px; min-height:68px; border-block-end:1px solid var(--color_line); position:relative;
		.item-unread { margin-block-start:20px; }
		.avatar { width:48px; height:48px; font-size:var(--font_size-primary); grid-row:1 / span 3; }
		.item-name { font-size:var(--font_size-primary); grid-column:3; time { font-size:var(--font_size-xsmall); } }
		.item-unit { grid-column:3; font-size:var(--font_size-small); }
		.item-preview { grid-column:3; font-size:var(--font_size-small); display:grid; grid-template-columns:1fr auto; span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pill { font-size:var(--font_size-tiny); padding:4px 7px; } }
		.item-chevron { grid-column:4; grid-row:1 / span 3; align-self:center; color:var(--color_text-soft); width:18px; height:18px; }
		&.is-active { background:transparent; color:inherit; .item-unit, .item-preview, .item-name time { color:var(--color_text-muted); } .avatar { background:color-mix(in srgb, var(--stage_color, #8d8d8d), #fff 72%); color:color-mix(in srgb, var(--stage_color, #585858), #000 45%); } /* the phone's selected row is transparent, so the disc keeps its tint */ .item-unread { background:var(--stage_assigned); &[data-status=""] { background:transparent; } &[data-status="overdue"] { background:var(--status_overdue); } } .pill { background:var(--status_neutral-bg); color:var(--status_neutral); &[data-status="overdue"], &[data-status="urgent"] { background:var(--status_overdue-bg); color:var(--status_overdue-text); } &[data-status="info"], &[data-status="appointment"] { background:var(--status_info-bg); color:var(--status_info-text); } } }
		&:active { background:var(--color_bg-secondary); }
	}
	.phone-bottombar { align-items:center; background:color-mix(in srgb, var(--color_bg-primary), transparent 8%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-block-start:1px solid var(--color_line); display:flex !important; flex:none; gap:10px; padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);
		.phone-search { flex:1; background:var(--color_bg-secondary); border-radius:12px; padding-inline:10px 4px; input { height:40px; font-size:var(--font_size-primary); } button { padding:8px; color:var(--color_text-muted); border-radius:50%; .feather { width:20px; height:20px; } } }
		.phone-compose { width:44px; height:44px; background:transparent; border:0; color:var(--color_brand-secondary); .feather { width:24px; height:24px; } }
	}

	/* --- conversation screen --- */
	.lead-header { border:0; display:flex; flex-direction:column; padding:6px 0 0;
		.lead-identity { display:none; }
		.lead-summary { order:1; } .stage-stepper { order:2; } .lead-actions { order:3; }
		.lead-summary { padding:6px 0 10px; &::before, &::after { display:none; } .summary-track { gap:10px; padding-inline:14px; scroll-snap-type:none; } }
		.summary-card { flex:0 0 232px; padding:10px; gap:10px; .thumb { width:64px; height:48px; } .summary-title { font-size:var(--font_size-primary); } .summary-meta { font-size:var(--font_size-xsmall); } .summary-meta2 { display:none; } .summary-status .pill { font-size:var(--font_size-micro); } }
		.stage-stepper { border-block:1px solid var(--color_line); padding:8px 14px; gap:10px; ol { flex:1; justify-content:space-between; } li { min-width:0; flex:1; font-size:var(--font_size-tiny); gap:4px; .step-dot { width:18px; height:18px; .feather { width:11px; height:11px; } &::after { width:8px; height:8px; } } &::before { top:8px; inset-inline-start:calc(50% + 11px); width:calc(100% - 22px); } } .stepper-status { display:none; } }
		.lead-actions { display:flex; gap:6px; overflow-x:auto; padding:8px 14px; scrollbar-width:none; &::-webkit-scrollbar { display:none; }
			.action-button { flex:none; flex-direction:row; gap:6px; background:var(--color_bg-secondary); border-radius:var(--radius_pill); padding:6px 12px 6px 6px; font-size:var(--font_size-small); color:var(--color_text); span.action-icon { width:28px; height:28px; .feather { width:15px; height:15px; } } &[data-action="call"] { display:none; } }
			.lead-cta { border:0; margin:0; padding:0; flex:none; .btn { height:40px; font-size:var(--font_size-small); padding-inline:14px; } }
			.reopen-lead { height:40px; }
		}
	}
	&[data-role="sales"] .lead-header, &[data-role="management"] .lead-header { display:flex; }
	.thread { padding:12px 12px 20px; gap:10px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
		.thread-message { max-width:82%; .message-body { font-size:var(--font_size-primary); padding:10px 14px; border-radius:20px; } }
		.thread-image { max-width:82%; img { width:min(100%, 240px); } }
		.thread-call, .thread-email { max-width:92%; }
		.thread-note { max-width:96%; font-size:var(--font_size-small); }
		.thread-event { font-size:var(--font_size-xsmall); padding:6px 12px; }
		.thread-day { font-size:var(--font_size-xsmall); }
	}
	.composer { grid-template-columns:auto 1fr auto; gap:8px; padding:8px 10px calc(env(safe-area-inset-bottom) + 8px + var(--keyboard_offset)); align-items:end;
		.composer-add { width:38px; height:38px; }
		.composer-mode { grid-column:1 / -1; grid-row:1; .segmented { display:flex; > button { flex:1; padding:6px 10px; font-size:var(--font_size-small); } } }
		.composer-input { grid-row:1; grid-column:2; padding-inline:14px 6px; input { height:40px; font-size:var(--font_size-primary); } }
		.composer-add { grid-row:1; grid-column:1; }
		.composer-send { grid-row:1; grid-column:3; width:38px; height:38px; opacity:0; transform:scale(.6); transition:opacity var(--motion), transform var(--motion); }
		&.has-text .composer-send { opacity:1; transform:none; }
		.composer-tools { display:none; }
	}

	/* --- sheets on a phone rise from the bottom --- */
	.detail-panel { inset-inline:0; inset-block-end:0; inset-block-start:auto; width:auto; max-height:92dvh; border-radius:var(--radius-large) var(--radius-large) 0 0; transform:translateY(105%); &.is-open { transform:none; } .detail-head { padding-block-start:22px; &::before { content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:40px; height:5px; border-radius:3px; background:var(--color_line-strong); } } }
	.modal .overlay { align-items:flex-end; padding:0; }
	.modal .modal-window { border-radius:var(--radius-large) var(--radius-large) 0 0; max-height:92dvh; width:100%; }
	.sidebar-navigation { inset:0; width:100%; border-radius:0; }
}
@media (prefers-reduced-motion:reduce) { body[data-device="phone"] .inbox, body[data-device="phone"] .conversation { transition:none; } }
.dictate-wave { display:inline-flex; gap:4px; align-items:flex-end; height:32px; margin-block-end:8px; i { display:block; width:6px; border-radius:3px; background:var(--color_brand-secondary); animation:crm-wave 1s ease-in-out infinite; height:12px; &:nth-child(2) { animation-delay:.1s; } &:nth-child(3) { animation-delay:.2s; } &:nth-child(4) { animation-delay:.3s; } &:nth-child(5) { animation-delay:.4s; } } }
@keyframes crm-wave { 0%, 100% { height:10px; } 50% { height:32px; } }
body[data-device="phone"][data-view="daily-view"] .lead-header .stage-stepper { align-self:stretch; width:100%; ol { width:100%; } li { font-size:var(--font_size-micro); letter-spacing:-.01em; } }
body[data-device="phone"][data-view="daily-view"] .inbox .inbox-list { max-height:none; }
body[data-device="phone"][data-view="daily-view"] .conversation { min-height:0; }

/* PHONE MENU — iOS-style dropdown hanging off a top-bar button */
.phone-menu { background:color-mix(in srgb, var(--color_bg-primary), transparent 6%); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.08); display:grid; inset-inline-end:10px; min-width:200px; overflow:hidden; position:absolute; top:calc(100% - 4px); z-index:50; animation:crm-rise var(--motion) both; transform-origin:top right;
	button { align-items:center; display:flex; gap:12px; justify-content:space-between; padding:12px 16px; font-size:var(--font_size-primary); text-align:start; span { display:flex; align-items:baseline; gap:8px; } small { color:var(--color_text-muted); font-size:var(--font_size-small); } .feather { width:18px; height:18px; color:var(--color_text); } & + button { border-block-start:.5px solid var(--color_line); } &:active { background:var(--color_bg-secondary); } }
}
/* phone top bar: round grey buttons at both ends, title centered between them */
body[data-device="phone"][data-view="daily-view"] .phone-topbar { grid-template-columns:44px 1fr 44px; .menu-btn { background:var(--color_bg-secondary); border-radius:50%; width:40px; height:40px; .feather { width:20px; height:20px; } &:active { background:var(--color_bg-secondary-darkest); } } .phone-title { justify-self:center; } .phone-filter .phone-filter-dot { top:2px; inset-inline-end:2px; border:2px solid #fff; width:10px; height:10px; } .phone-back { background:transparent; .feather { width:28px; height:28px; } } }
body[data-device="phone"][data-view="daily-view"] .phone-topbar { justify-content:space-between; .phone-title, .phone-lead { flex:1; justify-content:center; text-align:center; } .menu-btn { flex:none; } }

/* phone composer: + · Text/Email/Note · field · mic · send, opt-in line underneath, pinned to the bottom */
body[data-device="phone"][data-view="daily-view"] .composer {
	grid-template-columns:auto auto minmax(0, 1fr) auto; grid-template-rows:auto auto; gap:6px; align-items:center; padding:8px 8px calc(env(safe-area-inset-bottom) + 6px + var(--keyboard_offset));
	.composer-add { grid-row:1; grid-column:1; width:36px; height:36px; }
	.composer-mode { grid-row:1; grid-column:2; .segmented { display:inline-flex; padding:3px; > button { padding:5px 8px; font-size:var(--font_size-xsmall); } } }
	.composer-input { grid-row:1; grid-column:3; min-width:0; padding-inline:12px 6px; input { height:36px; font-size:var(--font_size-primary); min-width:0; } }
	.composer-dictate { grid-row:1; grid-column:4; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--color_text-muted); background:var(--color_bg-secondary); .feather { width:18px; height:18px; } }
	.composer-send { grid-row:1; grid-column:4; width:36px; height:36px; opacity:1; transform:none; }
	.composer-tools { display:none; }
}
/* phone composer: the opt-in line sits above the row */
body[data-device="phone"][data-view="daily-view"] .composer { grid-template-rows:auto; .composer-add, .composer-mode, .composer-input, .composer-send { grid-row:1; } }
/* phone composer: disclaimer sits above the composer's top border */

/* phone conversation: call + ⋯ on the right; the action strip is gone (it's all in the menu) */
body[data-device="phone"][data-view="daily-view"] {
	.phone-actions { display:flex; gap:8px; flex:none; }
	.phone-topbar .phone-lead { flex:1; }
	.lead-header .lead-actions { display:none; }
}

/* phone composer: Text / Email / Note collapse into one icon with a dropdown that opens upward */
body[data-device="phone"][data-view="daily-view"] .composer { position:relative;
	.composer-mode { display:none; }
	.composer-mode-btn { grid-row:1; grid-column:2; width:36px; height:36px; border-radius:50%; background:var(--color_bg-secondary); display:inline-flex !important; align-items:center; justify-content:center; color:var(--color_brand-secondary); .feather { width:18px; height:18px; } }
	.phone-menu.is-up { top:auto; inset-block-end:calc(100% - 4px); inset-inline-start:8px; inset-inline-end:auto; transform-origin:bottom left; button span .feather { width:16px; height:16px; color:var(--color_text-muted); } }
}
/* conversation top bar: equal side widths so the person stays dead center */
body[data-device="phone"][data-view="daily-view"] .conversation .phone-topbar { .phone-back { width:88px; justify-content:flex-start; border-radius:var(--radius_pill); } .phone-actions { width:88px; justify-content:flex-end; } .phone-lead { flex:1; } }
/* conversation screen: the thread takes all the room so the composer is always at the bottom */
body[data-device="phone"][data-view="daily-view"] .conversation { .thread { flex:1 1 auto; min-height:0; } .lead-header, .phone-topbar, .composer { flex:none; } }
/* phone sheets: always full width from the bottom, whatever the content */
body[data-device="phone"] .modal { .overlay { flex-direction:column; justify-content:flex-end; align-items:stretch; padding:0; } .modal-window { width:100%; max-width:100%; flex:0 0 auto; border-radius:var(--radius-large) var(--radius-large) 0 0; max-height:92dvh; } .modal-footer { padding-block-end:calc(env(safe-area-inset-bottom) + 14px); } }
/* the modal frame must not be a box of its own (the earlier rule was lost in a cleanup) */
.modal .modal-frame { display:contents; }
body[data-device="phone"][data-view="daily-view"] .modal .overlay { align-items:stretch; flex-direction:column; justify-content:flex-end; }
/* back chevron: no button shape on tap/focus — it's a glyph, like iOS */
body[data-device="phone"][data-view="daily-view"] .phone-topbar .phone-back { background:transparent !important; border-radius:0; box-shadow:none; &:hover, &:active, &:focus, &:focus-visible { background:transparent !important; outline:none; } &:active .feather { opacity:.5; } }
/* both phone top bars share one height */
body[data-device="phone"][data-view="daily-view"] .phone-topbar { --phone_topbar:64px; height:calc(max(env(safe-area-inset-top), var(--safe_top, 0px)) + var(--phone_topbar)); min-height:0; padding-block:0; padding-block-start:max(env(safe-area-inset-top), var(--safe_top, 0px)); align-items:center; .phone-lead { gap:1px; .avatar-small { width:32px; height:32px; font-size:var(--font_size-xsmall); } .phone-lead-name { font-size:var(--font_size-xsmall); line-height:1.1; } } }

/* ========================================================================== */
/* PHONE — shared: drawer under the notch, round close, swipe to close        */
/* ========================================================================== */
body[data-device="phone"] .sidebar-navigation { padding-block-start:calc(max(env(safe-area-inset-top), var(--safe_top, 0px)) + 12px); .sidebar-navigation-head { min-height:64px; margin-block-end:12px; } .sidebar-navigation-close { background:var(--color_bg-secondary); border-radius:50%; width:40px; height:40px; flex:none; } }
body[data-device="phone"] .phone-topbar .phone-title:empty { display:none; }

/* ========================================================================== */
/* PHONE — Calendar: day mode (iOS Calendar), agenda → event screens          */
/* ========================================================================== */
body[data-device="phone"][data-view="calendar"] {
	--keyboard_offset:0px;
	height:100dvh; overflow:hidden;
	.calendar { display:none !important; }
	.phone-cal, .phone-event { background:var(--color_bg-primary); display:flex !important; flex-direction:column; inset:0; min-height:0; position:absolute; transition:transform 220ms ease; will-change:transform; }
	.phone-cal { transform:translateX(0); z-index:1; }
	.phone-event { transform:translateX(100%); z-index:2; box-shadow:-12px 0 30px rgba(0,0,0,.12); }
	&[data-screen="event"] .phone-cal { transform:translateX(-28%); }
	&[data-screen="event"] .phone-event { transform:none; }

	.phone-topbar { --phone_topbar:64px; align-items:center; background:color-mix(in srgb, var(--color_bg-primary), transparent 8%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-block-end:1px solid var(--color_line); display:flex; flex:none; gap:8px; height:calc(max(env(safe-area-inset-top), var(--safe_top, 0px)) + var(--phone_topbar)); justify-content:space-between; padding:max(env(safe-area-inset-top), var(--safe_top, 0px)) 10px 0; position:relative; z-index:3;
		.menu-btn { background:var(--color_bg-secondary); border-radius:50%; width:40px; height:40px; flex:none; .feather { width:20px; height:20px; } &:active { background:var(--color_bg-secondary-darkest); } }
		.phone-actions { display:flex; gap:8px; flex:none; width:88px; justify-content:flex-end; }
		.phone-month-title { align-items:center; color:var(--color_brand-secondary); display:inline-flex; flex:1; font-size:var(--font_size-primary); font-weight:500; gap:0; justify-content:flex-start; margin-inline-start:-4px; .feather { width:26px; height:26px; margin-inline-end:-2px; } &:disabled { visibility:hidden; } }
		.phone-back { width:88px; justify-content:flex-start; background:transparent !important; border-radius:0; .feather { width:28px; height:28px; color:var(--color_brand-secondary); } &:active .feather { opacity:.5; } }
		.phone-lead { align-items:center; display:flex; flex:1; flex-direction:column; gap:1px; justify-content:center; .avatar-small { width:32px; height:32px; font-size:var(--font_size-xsmall); } .phone-lead-name { font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); line-height:1.1; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
		.phone-cal-filter { position:relative; .phone-filter-dot { position:absolute; top:2px; inset-inline-end:2px; width:10px; height:10px; border-radius:50%; background:var(--color_brand-secondary); border:2px solid #fff; } }
	}

	/* month drop-down */
	.phone-month { border-block-end:1px solid var(--color_line); padding:8px 14px 12px; animation:crm-rise var(--motion) both; .mini-month .mini-day .mini-num { width:36px; height:36px; font-size:var(--font_size-primary); } .mini-month .mini-dow { font-size:var(--font_size-xsmall); } }

	/* week strip */
	.phone-week { border-block-end:1px solid var(--color_line); display:grid; flex:none; grid-template-columns:repeat(7, 1fr); padding:8px 8px 10px; position:relative; touch-action:pan-y;
		.week-day { align-items:center; display:flex; flex-direction:column; gap:4px; padding:2px 0 8px; position:relative; small { color:var(--color_text-muted); font-size:var(--font_size-tiny); font-weight:var(--font_weight-bold-primary); letter-spacing:.04em; } .mini-num { align-items:center; border-radius:50%; display:inline-flex; font-size:var(--font_size-primary); height:36px; justify-content:center; width:36px; }
			&.is-weekend small { color:var(--color_text-soft); }
			&.is-today .mini-num { color:var(--color_brand-secondary); box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); font-weight:var(--font_weight-extra-bold-primary); }
			&.is-selected .mini-num { background:var(--color_text); color:#fff; box-shadow:none; }
			&.is-today.is-selected .mini-num { background:var(--color_brand-secondary); }
			&.has-events::after { content:""; position:absolute; inset-block-end:2px; inset-inline-start:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--stage_assigned); }
			&.is-selected::after { background:var(--color_text); } &.is-today.is-selected::after { background:var(--color_brand-secondary); }
		}
		.week-today { position:absolute; inset-inline-end:10px; top:-30px; z-index:4; height:26px; padding-inline:10px; font-size:var(--font_size-xsmall); }
	}
	.phone-week-wrap { position:relative; flex:none; .week-today { position:absolute; inset-inline-end:12px; top:-46px; } }

	/* agenda */
	.phone-agenda { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;
		.agenda-head { align-items:center; display:flex; gap:10px; padding:12px 14px 6px; h2 { flex:1; font-size:var(--font_size-medium); font-family:var(--font_name-secondary); } .column-count { display:none; } .btn { display:none; } }
		.agenda-date { color:var(--color_text-muted); font-family:var(--font_name-secondary); font-size:var(--font_size-primary); font-weight:var(--font_weight-bold-primary); padding:14px 14px 4px; &.is-today { color:var(--color_brand-secondary); } }
		.agenda-list { display:grid; padding:0 8px 8px; }
		.agenda-item { grid-template-columns:62px 4px 1fr auto; gap:0 12px; padding:12px 8px; border-block-end:1px solid var(--color_line); border-radius:0; align-items:stretch;
			time { font-size:var(--font_size-small); small { font-size:var(--font_size-tiny); } }
			.agenda-dot { width:4px; height:auto; border-radius:2px; align-self:stretch; }
			.agenda-text strong { font-size:var(--font_size-primary); } .agenda-text small { white-space:normal; }
			.agenda-actions { display:none; }
			.agenda-check { width:18px; height:18px; }
			&:active { background:var(--color_bg-secondary); }
		}
		.agenda-empty { padding:48px var(--gutter); }
	}
	.phone-bottombar { align-items:center; background:color-mix(in srgb, var(--color_bg-primary), transparent 8%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-block-start:1px solid var(--color_line); display:flex !important; flex:none; gap:10px; padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);
		.phone-search { flex:1; background:var(--color_bg-secondary); border-radius:12px; padding-inline:10px 4px; input { height:40px; font-size:var(--font_size-primary); } }
		.phone-compose { width:44px; height:44px; background:transparent; border:0; color:var(--color_brand-secondary); .feather { width:24px; height:24px; } }
	}

	/* event screen: the card body without the popover chrome */
	.phone-event-body { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:12px 14px calc(env(safe-area-inset-bottom) + 24px); display:grid; gap:12px; align-content:start;
		.editor-head { display:none; }
		.phone-event-status { align-items:center; color:var(--color_text-muted); display:flex; font-size:var(--font_size-small); gap:6px; justify-content:center; &[data-status="done"] { color:var(--status_ok); } &[data-status="overdue"] { color:var(--status_overdue); } &[data-status="cancelled"] { text-decoration:line-through; } }
		.editor-row.is-draft { background:var(--color_bg-secondary); border-radius:var(--radius_small); display:grid; padding:0; > * + * { border-block-start:1px solid var(--color_line); } .inline-picker { border-block-start:0; margin:0 8px 8px; background:var(--color_bg-primary); border:1px solid var(--color_line); } }
		.draft-row { align-items:center; display:flex; gap:10px; min-height:48px; padding:6px 14px; .feather { color:var(--color_text-muted); flex:none; } .draft-select { appearance:none; background:none; border:0; flex:1; font-weight:var(--font_weight-bold-primary); min-width:0; outline:none; padding:8px 0; color:var(--color_text); } .editor-muted { color:var(--color_text-muted); font-size:var(--font_size-small); } .draft-text { flex:1; font-weight:var(--font_weight-bold-primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .event-type-dot { background:var(--stage_assigned); border-radius:50%; height:10px; width:10px; flex:none; &[data-category="followup"] { background:var(--color_text-soft); } &[data-category="logistics"] { background:var(--stage_agreed); } }
			&.is-split { .editor-label { flex:1; font-weight:var(--font_weight-bold-primary); } .editor-value { background:#fff; border-radius:var(--radius_small); flex:none; padding:6px 12px; width:auto; margin:0; font-weight:var(--font_weight-bold-primary); &.is-editing { background:var(--color_brand-secondary-soft); box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); } } } }
		.inline-notes { background:var(--color_bg-secondary); border:0; border-radius:var(--radius_small); font:inherit; font-size:var(--font_size-small); min-height:70px; outline:none; padding:12px 14px; resize:vertical; width:100%; }
		.inline-picker { background:var(--color_bg-secondary-darkest); border-radius:var(--radius_small); padding:10px; display:grid; gap:8px; .inline-chips { display:flex; flex-wrap:wrap; gap:5px; max-height:180px; overflow:auto; .sheet-chip { color:var(--color_text); background:#fff; border:1px solid var(--color_line); &.is-active { background:var(--color_brand-secondary); border-color:var(--color_brand-secondary); color:#fff; } &:disabled { color:var(--color_text-soft); background:var(--color_bg-secondary-darkest); } } } .inline-list { display:grid; gap:4px; max-height:240px; overflow:auto; .sheet-row { background:#fff; &.is-selected { outline:2px solid var(--color_brand-secondary); } } } .inline-hint { color:var(--color_text-muted); font-size:var(--font_size-xsmall); } .mini-month .mini-day .mini-num { width:32px; height:32px; } }
		.popover-followups { display:grid; gap:6px; h4 { color:var(--color_text-muted); font-family:var(--font_name-primary); font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); letter-spacing:.06em; text-transform:uppercase; } ul { display:grid; gap:2px; } li { align-items:center; display:flex; gap:8px; input { accent-color:var(--color_text); margin:0; flex:none; } } .popover-followup { border-radius:var(--radius_small); display:grid; flex:1; min-width:0; padding:6px 8px; text-align:start; background:var(--color_bg-secondary); strong { font-weight:var(--font_weight-bold-primary); font-size:var(--font_size-small); } small { color:var(--color_text-muted); font-size:var(--font_size-xsmall); } } .popover-empty { color:var(--color_text-soft); font-size:var(--font_size-small); } .sheet-chip { justify-self:start; display:inline-flex; align-items:center; gap:4px; .feather { width:12px; height:12px; } } }
		.popover-actions { display:none; }
		.phone-event-conversation { justify-content:center; height:44px; }
	}
	/* new-event draft rises as a full-width sheet */
	.event-popover { inset-inline:0 !important; inset-block-end:0; top:auto !important; width:auto; max-height:92dvh; border-radius:var(--radius-large) var(--radius-large) 0 0; padding-block-end:calc(env(safe-area-inset-bottom) + 12px); box-shadow:0 -12px 40px rgba(0,0,0,.2); }
}
body[data-device="phone"][data-view="calendar"] { position:relative; .topbar { display:none !important; } }

/* phone calendar polish: today ring in the month drop-down, chevron flip, Today pill in the agenda head */
body[data-device="phone"][data-view="calendar"] {
	.phone-month .mini-month .mini-day.is-today:not(.is-selected) .mini-num { background:transparent; color:var(--color_brand-secondary); box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); }
	.phone-agenda .agenda-head .btn.week-today { display:inline-flex; height:28px; padding-inline:12px; font-size:var(--font_size-small); }
}
/* phone calendar: scrolling month stack (iOS), Today in the bottom bar */
body[data-device="phone"][data-view="calendar"] {
	.phone-cal.is-months { .phone-week, .phone-agenda { display:none; } .phone-month { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:0 14px; border:0; animation:none; } }
	.phone-dow { display:grid; grid-template-columns:repeat(7, 1fr); text-align:center; font-size:var(--font_size-xsmall); font-weight:500; color:var(--color_text-muted); padding:6px 0; margin:0 -14px; padding-inline:14px; background:var(--color_bg-primary); position:sticky; top:0; z-index:1; border-block-end:1px solid var(--color_line); }
	.phone-month-block { padding:14px 0 6px; .mini-month { gap:6px; } .mini-head { justify-content:flex-start; } .mini-dow { display:none; } .mini-title { font-family:var(--font_name-secondary); font-size:var(--font_size-large); font-weight:var(--font_weight-extra-bold-primary); padding:0; pointer-events:none; } &.is-current .mini-title { color:var(--color_brand-secondary); } .mini-month .mini-grid { gap:6px 0; } .mini-month .mini-day .mini-num { width:38px; height:38px; font-size:var(--font_size-primary); } .mini-month .mini-day.is-today:not(.is-selected) .mini-num { background:transparent; color:var(--color_brand-secondary); box-shadow:inset 0 0 0 1.5px var(--color_brand-secondary); } .mini-month .mini-day.is-past { color:var(--color_text-muted); } }
	.phone-bottombar .phone-today { height:40px; padding-inline:14px; border:0; background:var(--color_bg-secondary); font-size:var(--font_size-primary); flex:none; &.is-away { color:var(--color_brand-secondary); } }
}
/* phone calendar: year level (stack of years, tap a month to zoom in) */
body[data-device="phone"][data-view="calendar"] {
	.phone-year-block { padding:16px 0 8px; border-block-end:1px solid var(--color_line); &.is-current .phone-year-title { color:var(--color_brand-secondary); } }
	.phone-year-title { font-family:var(--font_name-secondary); font-size:var(--font_size-display); font-weight:var(--font_weight-extra-bold-primary); margin:0 0 10px; }
	.phone-year-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 12px; }
	.phone-year-month { display:block; padding:0; border:0; background:none; text-align:left; color:inherit; font:inherit; strong { display:block; font-family:var(--font_name-secondary); font-size:var(--font_size-primary); margin-block-end:4px; } &.is-today strong { color:var(--color_brand-secondary); } .year-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px 0; } .year-day { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; flex:none; font-size:var(--font_size-micro); line-height:1; justify-self:center; &.is-outside { visibility:hidden; } &.is-today { background:var(--color_brand-secondary); color:#fff; font-weight:700; } &.has-events:not(.is-today) { text-decoration:underline; text-decoration-color:var(--color_brand-secondary); text-underline-offset:2px; } } }
}
/* phone calendar: day mode is the hour grid, one column, like iOS */
body[data-device="phone"][data-view="calendar"] {
	.phone-agenda { --calendar_hour:100px; --calendar_gutter:58px; --calendar_days:1; position:relative; padding:0;
		.calendar-grid { --calendar_days:1; grid-template-columns:var(--calendar_gutter) 1fr; }
		.calendar-times span { height:var(--calendar_hour); font-size:var(--font_size-tiny); &.is-last { height:0; } } /* the closing 12 AM label takes no row */
		.calendar-times .calendar-now-label { font-size:var(--font_size-micro); width:auto; height:auto; border-radius:4px; padding:2px 5px; line-height:1; inset-inline-end:6px; white-space:nowrap; display:inline-block; }
		.calendar-col { background-size:100% var(--calendar_hour); }
		/* cards fit their hour: one-line unit, one-line meta (type · time · store), small thumb, slim owner stripe */
		.calendar-event { font-size:var(--font_size-small); .event-body { gap:8px; align-items:flex-start; } .thumb { width:44px; height:30px; } .event-text { gap:1px; min-width:0; } .event-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .event-unit { font-size:var(--font_size-xsmall); } .event-meta { font-size:var(--font_size-xsmall); br { display:none; } .feather { width:12px; height:12px; margin-inline-start:6px; } } .event-owner { font-size:var(--font_size-micro); padding-block:2px; } }
		.phone-empty { position:sticky; top:8px; margin:0 14px; z-index:2; background:var(--color_bg-secondary); border-radius:var(--radius_pill); padding:6px 12px; text-align:center; font-size:var(--font_size-small); color:var(--color_text-muted); }
	}
}

/* ========================================================================== */
/* LEAD TABLE — the List layout of the pipeline: sortable columns, row = lead */
/* ========================================================================== */
.board-modes { margin-inline-start:var(--gutter-small); button { display:inline-flex; align-items:center; gap:6px; .feather { width:15px; height:15px; } } }
.lead-table-wrap { flex:1; min-height:0; overflow:auto; padding:var(--gutter); }
.lead-table { width:100%; min-width:960px; border-collapse:collapse; /* narrower than this it scrolls sideways inside .lead-table-wrap rather than wrapping every cell */ background:var(--color_bg-primary); border:1px solid var(--color_line); border-radius:var(--radius-large); overflow:hidden;
	th { text-align:start; font-size:var(--font_size-xsmall); color:var(--color_text-muted); font-weight:var(--font_weight-bold-primary); text-transform:uppercase; letter-spacing:.04em; padding:10px 14px; border-block-end:1px solid var(--color_line); background:var(--color_bg-secondary); position:sticky; top:calc(-1 * var(--gutter)); z-index:1;
		button { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:4px; text-transform:inherit; letter-spacing:inherit; .feather { width:14px; height:14px; } &:hover { color:var(--color_text); } }
		&[aria-sort="ascending"], &[aria-sort="descending"] { color:var(--color_text); } }
	td { padding:12px 14px; border-block-end:1px solid var(--color_line); vertical-align:middle; font-size:var(--font_size-small); }
	tr:last-child td { border:0; }
	.lead-table-row { cursor:pointer; &:hover td { background:var(--color_bg-secondary); } &:focus-visible { outline:2px solid var(--color_brand-secondary); outline-offset:-2px; } &.is-muted { color:var(--color_text-muted); } }
	.cell-lead { display:flex; align-items:center; gap:10px; strong { display:block; } .row-flag { display:flex; } }
	.cell-unit, .cell-owner, .cell-waiting, .cell-stage { white-space:nowrap; }
	.cell-lead strong { white-space:nowrap; }
	.cell-activity { color:var(--color_text-muted); max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; .feather { width:14px; height:14px; vertical-align:-2px; margin-inline-end:4px; } }
	.cell-age { color:var(--color_text-muted); white-space:nowrap; }
	.cell-timer { white-space:nowrap; }
}
.row-unread { width:8px; height:8px; border-radius:50%; flex:none; background:transparent; &[data-status="unread"] { background:var(--stage_assigned); } &[data-status="overdue"] { background:var(--status_overdue); } }
.row-flag { align-items:center; color:var(--status_flag); display:inline-flex; font-size:var(--font_size-xsmall); gap:4px; .feather { width:12px; height:12px; } &[data-tone="ok"] { color:var(--status_ok); } &[data-tone="warn"] { color:var(--status_overdue); } }
.stage-chip { display:inline-flex; align-items:center; gap:6px; font-weight:var(--font_weight-bold-primary); color:var(--stage_color, var(--color_text)); .stage-dot { width:8px; height:8px; border-radius:50%; background:var(--stage_color, var(--color_text-soft)); flex:none; } }
.lead-table-foot { display:flex; justify-content:space-between; align-items:center; color:var(--color_text-muted); font-size:var(--font_size-small); padding:10px 4px; label { display:inline-flex; gap:6px; align-items:center; } }

/* LEAD ROW — list form of a lead (phone board, search results) */
.lead-row { align-items:center; background:var(--color_bg-primary); border:0; border-block-end:1px solid var(--color_line); color:inherit; cursor:pointer; display:grid; font:inherit; gap:0 12px; grid-template-columns:8px 44px 1fr auto; padding:12px 14px 12px 12px; text-align:start; width:100%;
	.avatar { width:44px; height:44px; font-size:var(--font_size-small); flex:none; }
	.row-text { display:flex; flex-direction:column; gap:2px; min-width:0; .row-name { font-size:var(--font_size-primary); } small { color:var(--color_text-muted); font-size:var(--font_size-small); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .row-activity { display:flex; align-items:center; gap:4px; .feather { width:13px; height:13px; flex:none; } } }
	.row-side { display:flex; flex-direction:column; align-items:flex-end; gap:4px; time { color:var(--color_text-muted); font-size:var(--font_size-xsmall); } .row-chevron { width:18px; height:18px; color:var(--color_text-soft); } }
	&.is-muted { .row-name { color:var(--color_text-muted); } .avatar { filter:saturate(.35); } }
	&:active { background:var(--color_bg-secondary); }
}

/* ========================================================================== */
/* PHONE — Pipeline: stage strip + lead rows → lead screen                    */
/* ========================================================================== */
body[data-device="phone"][data-view="pipeline"] {
	height:100dvh; overflow:hidden;
	.topbar { display:none !important; }
	.phone-board, .phone-lead-screen { background:var(--color_bg-primary); display:flex !important; flex-direction:column; inset:0; min-height:0; position:absolute; transition:transform 220ms ease; will-change:transform; }
	.phone-board { transform:translateX(0); z-index:1; }
	.phone-lead-screen { transform:translateX(100%); z-index:2; box-shadow:-12px 0 30px rgba(0,0,0,.12); }
	&[data-screen="lead"] .phone-board { transform:translateX(-28%); }
	&[data-screen="lead"] .phone-lead-screen { transform:none; }

	.phone-topbar { --phone_topbar:64px; align-items:center; background:color-mix(in srgb, var(--color_bg-primary), transparent 8%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-block-end:1px solid var(--color_line); display:flex; flex:none; gap:8px; height:calc(max(env(safe-area-inset-top), var(--safe_top, 0px)) + var(--phone_topbar)); justify-content:space-between; padding:max(env(safe-area-inset-top), var(--safe_top, 0px)) 10px 0; position:relative; z-index:3;
		.menu-btn { background:var(--color_bg-secondary); border-radius:50%; width:40px; height:40px; flex:none; .feather { width:20px; height:20px; } &:active { background:var(--color_bg-secondary-darkest); } }
		.phone-title { flex:1; }
		.phone-actions { display:flex; gap:8px; flex:none; justify-content:flex-end; }
		.phone-board-filter { position:relative; .phone-filter-dot { position:absolute; top:2px; inset-inline-end:2px; width:10px; height:10px; border-radius:50%; background:var(--color_brand-secondary); border:2px solid #fff; } }
		.phone-back { background:transparent; width:88px; justify-content:flex-start; border-radius:var(--radius_pill); .feather { width:28px; height:28px; } }
		.phone-lead { align-items:center; display:flex; flex:1; flex-direction:column; gap:2px; justify-content:center; text-align:center; .avatar-small { width:34px; height:34px; font-size:var(--font_size-small); } .phone-lead-name { font-size:var(--font_size-xsmall); font-weight:var(--font_weight-bold-primary); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
		.phone-lead + .phone-actions { width:88px; }
	}
	.phone-desk { padding:10px 14px 0; .segmented { display:flex; > a { flex:1; text-align:center; } } }
	.phone-stages { display:flex; gap:8px; overflow-x:auto; padding:10px 14px; scrollbar-width:none; flex:none; border-block-end:1px solid var(--color_line); &::-webkit-scrollbar { display:none; }
		.stage-pill { align-items:center; background:var(--color_bg-secondary); border:0; border-radius:var(--radius_pill); color:var(--color_text-muted); display:inline-flex; flex:none; font:inherit; font-size:var(--font_size-small); font-weight:var(--font_weight-bold-primary); gap:6px; height:34px; padding:0 12px 0 10px; .stage-dot { width:8px; height:8px; border-radius:50%; background:var(--stage_color, var(--color_text-soft)); flex:none; } .column-count { background:transparent; color:inherit; padding:0; font-size:var(--font_size-small); }
			&.is-selected { background:var(--color_text); color:#fff; .stage-dot { background:var(--stage_color, #fff); } } }
	}
	/* BOARD mode: the same columns as desktop — grey, the next one peeking so you know to swipe, each scrolling on its own */
	.pipeline { display:flex; flex:1; min-height:0; height:auto; gap:10px; overflow-x:auto; overflow-y:hidden; padding:10px 14px calc(env(safe-area-inset-bottom) + 6px); scroll-snap-type:none; scrollbar-width:none; cursor:grab; touch-action:pan-x pan-y; @media (pointer:coarse) { scroll-snap-type:x proximity; } &.is-panning { scroll-snap-type:none; cursor:grabbing; } -webkit-overflow-scrolling:touch; &::-webkit-scrollbar { display:none; } &[hidden] { display:none; }
		.pipeline-column { flex:0 0 min(84vw, 360px); max-width:none; scroll-snap-align:start; padding:12px 10px; .column-header { margin-block-end:10px; } &.is-collapsed { flex-basis:min(84vw, 360px); .column-body { display:flex; } } .column-header .feather:last-child { display:none; } }
		.lead-card { cursor:pointer; }
	}
	.phone-leads { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; &[hidden] { display:none; }
		.column-empty { align-items:center; color:var(--color_text-muted); display:flex; flex-direction:column; gap:10px; justify-content:center; min-height:50%; padding:48px var(--gutter); text-align:center; font-size:var(--font_size-primary); .feather { width:32px; height:32px; } } /* same empty state as a desktop column, centred in the list */ .agenda-date { font-weight:var(--font_weight-bold-primary); padding:12px 14px 4px; color:var(--color_text-muted); font-size:var(--font_size-small); text-transform:uppercase; letter-spacing:.04em; } .forsale-summary { padding:14px; } }
	.phone-bottombar { align-items:center; background:color-mix(in srgb, var(--color_bg-primary), transparent 8%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-block-start:1px solid var(--color_line); display:flex !important; flex:none; gap:10px; padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);
		.phone-search { flex:1; height:40px; border-radius:var(--radius_pill); background:var(--color_bg-secondary); border-color:transparent; input { font-size:var(--font_size-primary); } }
		.phone-compose { width:40px; height:40px; flex:none; border-radius:50%; background:transparent; color:var(--color_brand-secondary); .feather { width:22px; height:22px; } } }

	.phone-lead-body { flex:1; min-height:0; overflow:auto; padding:14px 14px calc(env(safe-area-inset-bottom) + 24px); display:flex; flex-direction:column; gap:14px;
		.phone-lead-unit { display:flex; gap:12px; align-items:center; .thumb { width:84px; height:56px; border-radius:var(--radius); overflow:hidden; background:var(--color_bg-secondary); flex:none; display:flex; align-items:center; justify-content:center; img { width:100%; height:100%; object-fit:cover; } svg { width:48px; height:24px; color:var(--color_text-soft); } } strong { display:block; font-size:var(--font_size-primary); } small { color:var(--color_text-muted); display:block; } }
		.card-flag { margin:0; }
		.phone-lead-group { background:var(--color_bg-secondary); border-radius:var(--radius-large); overflow:hidden; .sheet-row { width:100%; border:0; border-block-end:1px solid var(--color_line); background:transparent; padding:12px 14px; gap:12px; font:inherit; color:inherit; text-align:start; display:flex; align-items:center; &:last-child { border:0; } .sheet-row-text { flex:1; min-width:0; } .stage-dot { width:10px; height:10px; border-radius:50%; background:var(--stage_color, var(--color_text-soft)); flex:none; } .feather:last-child { color:var(--color_text-soft); } } button.sheet-row:active { background:var(--color_bg-secondary-darkest); } }
		.phone-lead-actions { display:grid; grid-template-columns:1fr auto; gap:10px; .btn { height:46px; justify-content:center; gap:8px; } }
	}
	.modal .overlay { align-items:stretch; flex-direction:column; justify-content:flex-end; padding:0; }
	.modal .modal-window { border-radius:var(--radius-large) var(--radius-large) 0 0; max-height:92dvh; width:100%; max-width:100%; }
}
/* phone drag: the lifted card follows the finger; its column slot dims; the target column highlights */
body[data-device="phone"][data-view="pipeline"] {
	.drag-ghost { position:fixed; z-index:60; pointer-events:none; margin:0; box-shadow:0 18px 40px rgba(0,0,0,.28); transform-origin:center; opacity:.96; }
	.pipeline.is-touch-dragging { scroll-snap-type:none; .lead-card.is-dragging { opacity:.3; } .pipeline-column.is-drop-target { outline:2px dashed var(--color_brand-secondary); outline-offset:-2px; background:color-mix(in srgb, var(--stage_color), #fff 88%); } }
	.pipeline .lead-card { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
}

/* ========================================================================== */
/* NARROW DESKTOP (< 1100px) — Daily View keeps the thread tall              */
/* ========================================================================== */
@media (max-width:1100px) {
	/* summary cards: compact so more of the row fits */
	body[data-device="desktop"] .lead-header .lead-summary { .summary-track { gap:10px; } .summary-card { flex:0 0 232px; padding:10px; gap:10px; .thumb { width:64px; height:48px; } .summary-title { font-size:var(--font_size-primary); } .summary-meta { font-size:var(--font_size-xsmall); } .summary-meta2 { display:none; } .summary-status .pill { font-size:var(--font_size-micro); } } }
	/* inbox rows: smaller name so the preview and timer fit beside it */
	body[data-device="desktop"] .inbox-item .item-name { font-size:var(--font_size-primary); }
	/* composer: Text / Email / Note collapse into the one mode icon + dropdown, like the phone */
	body[data-device="desktop"] .composer { position:relative;
		.composer-mode { display:none; }
		.composer-mode-btn { display:inline-flex !important; width:40px; height:40px; border-radius:50%; background:var(--color_bg-secondary); align-items:center; justify-content:center; color:var(--color_brand-secondary); .feather { width:18px; height:18px; } }
		.phone-menu.is-up { top:auto; inset-block-end:calc(100% - 4px); inset-inline-start:8px; inset-inline-end:auto; transform-origin:bottom left; button span .feather { width:16px; height:16px; color:var(--color_text-muted); } }
	}
}

/* < 1024px: the lead action strip condenses to Call + ⋯ (the phone's pattern) */
.lead-actions-compact { display:none; position:relative; gap:8px; .menu-btn { background:var(--color_bg-secondary); border-radius:50%; width:40px; height:40px; flex:none; .feather { width:20px; height:20px; } &[data-action="call"] { color:var(--color_brand-secondary); } } .phone-menu { top:calc(100% + 6px); inset-inline-end:0; } }
@media (max-width:1024px) {
	body[data-device="desktop"] .lead-header .lead-actions { > .action-button, > .reopen-lead, > .lead-cta { display:none !important; } .lead-actions-compact { display:inline-flex; } }
}

/* iOS focus-zoom guard (bug fix, not a design change): Safari zooms any field under 16px on focus. Every phone input is
   already 16px; the draft notes textarea is designed at 14px, so it renders at 16px and is scaled back to 14/16 —
   pixel-identical, but Safari sees 16px and doesn't zoom. This replaced maximum-scale=1, which blocked pinch-zoom. */
body[data-device="phone"] .inline-notes.is-draft { font-size:16px; transform:scale(.875); transform-origin:top left; width:calc(100% / .875); }

/* ========================================================================== */
/* TOAST — a brief confirmation after an action; the same words go to a       */
/* screen reader through the stack's live region. Bottom-centre; on the       */
/* Daily View it sits above the composer, on the phone above the bottom bar.  */
/* ========================================================================== */
.toast-stack { --toast_offset:24px; position:fixed; inset-inline:0; bottom:calc(env(safe-area-inset-bottom) + var(--toast_offset)); display:grid; justify-items:center; gap:8px; pointer-events:none; z-index:120; }
body[data-view="daily-view"][data-device="desktop"] .toast-stack { inset-inline-start:var(--inbox_width); } /* centred on the thread; the offset above the composer is measured by crmToast */
body[data-device="phone"] .toast-stack { bottom:calc(env(safe-area-inset-bottom) + var(--toast_offset) + var(--keyboard_offset, 0px)); }
.toast { align-items:center; background:var(--color_text); border-radius:var(--radius_pill); box-shadow:0 8px 24px rgba(0,0,0,.22); color:#fff; display:flex; font-size:var(--font_size-small); font-weight:var(--font_weight-bold-primary); gap:12px; max-width:min(92vw, 520px); padding:10px 12px 10px 18px; pointer-events:auto; animation:toast-in .22s ease-out;
	.feather { width:16px; height:16px; color:#7ee2a3; flex:none; }
	&[data-tone="warn"] .feather { color:#ffc36b; }
	.toast-undo { background:transparent; border:0; color:#ffb3b9; font:inherit; font-weight:var(--font_weight-extra-bold-primary); padding:6px 8px; border-radius:var(--radius_pill); cursor:pointer; &:hover { background:rgba(255,255,255,.12); } }
	&.is-leaving { animation:toast-out .18s ease-in forwards; }
}
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes toast-out { to { opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion:reduce) { .toast, .toast.is-leaving { animation:none; } }

/* ========================================================================== */
/* STATES — loading, offline, failed send, no results                        */
/* (all driven by crmRequest(); Settings → Connection simulates them)        */
/* ========================================================================== */
/* loading veil + skeletons */
.is-loading { position:relative; }
.loading-veil { position:absolute; inset:0; background:var(--color_bg-primary); z-index:5; overflow:hidden; padding:var(--gutter-small) var(--gutter); display:grid; align-content:start; gap:14px; }
.skeleton { background:linear-gradient(90deg, var(--color_bg-secondary) 0%, color-mix(in srgb, var(--color_bg-secondary), #fff 50%) 50%, var(--color_bg-secondary) 100%); background-size:200% 100%; animation:sk-shimmer 1.4s linear infinite; border-radius:var(--radius_small); display:block; }
@keyframes sk-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .skeleton { animation:none; } }
.sk-row { display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:center; }
.sk-circle { width:44px; height:44px; border-radius:50%; }
.sk-lines { display:grid; gap:8px; }
.sk-line { height:12px; }
.sk-bubble { height:44px; width:52%; border-radius:18px; background:var(--color_bg-secondary); &.out { margin-inline-start:auto; background:color-mix(in srgb, var(--thread_outbound), #fff 80%); } &.wide { width:68%; } }
.sk-columns { display:flex; gap:var(--gutter-small); height:100%; }
.sk-column { flex:1 0 clamp(280px, 22vw, 340px); max-width:460px; background:var(--color_bg-secondary); border-radius:var(--radius); padding:14px 12px; display:grid; align-content:start; gap:10px; }
.sk-card { background:var(--color_bg-primary); border-radius:var(--radius_small); padding:14px 12px; display:grid; gap:10px; }
.sk-grid { position:absolute; inset:0 0 0 var(--calendar_gutter, 64px); }
.sk-block { position:absolute; width:12%; border-radius:var(--radius_small); }
body[data-device="phone"] .loading-veil { padding-inline:14px; }
body[data-device="phone"] .sk-columns { gap:10px; } body[data-device="phone"] .sk-column { flex:0 0 84vw; }

/* offline banner */
.net-banner { align-items:center; background:var(--status_flag-bg); border-block-end:1px solid color-mix(in srgb, var(--status_flag), #fff 60%); color:var(--status_flag-text); display:flex; flex:none; font-size:var(--font_size-small); font-weight:var(--font_weight-bold-primary); gap:10px; padding:8px var(--gutter); z-index:4;
	.feather { width:16px; height:16px; flex:none; } span { flex:1; min-width:0; } .btn { height:30px; padding-inline:12px; font-size:var(--font_size-xsmall); background:var(--color_bg-primary); border:1px solid color-mix(in srgb, var(--status_flag), #fff 50%); color:inherit; } }
body[data-device="phone"] .net-banner { padding-inline:14px; }

/* message states */
.thread-message[data-status="pending"] { opacity:.85; }
.thread-message[data-status="failed"] { .message-body { background:var(--status_overdue-bg); color:var(--status_overdue-text); } .message-meta { color:var(--status_overdue-text); display:flex; align-items:center; gap:4px; justify-content:flex-end; .feather { width:13px; height:13px; } } }
.link-btn { background:none; border:0; color:inherit; font:inherit; font-weight:var(--font_weight-extra-bold-primary); text-decoration:underline; padding:2px 4px; cursor:pointer; border-radius:var(--radius_small); }

/* no results */
.no-results { display:grid; justify-items:center; gap:8px; color:var(--color_text-muted); .feather { width:28px; height:28px; color:var(--color_text-soft); } .btn { margin-block-start:4px; } br { display:none; } }
.segmented.segmented-small { padding:3px; > button { padding:5px 10px; font-size:var(--font_size-xsmall); } }
.sheet-row.is-static .segmented { margin-inline-start:auto; flex:none; }
/* start page: a phone link and its landscape twin share one row */
.picker-links .picker-row { display:flex; gap:6px; > a:first-child { flex:1; } .alt { flex:none; width:40px; justify-content:center; padding-inline:0; .feather { margin:0; } } }

/* provenance tag on system/assistant events in the thread */
.thread-event .thread-by { margin-inline-start:6px; color:var(--color_text-soft); font-size:var(--font_size-tiny); display:inline-flex; align-items:center; gap:3px; .feather { width:11px; height:11px; } }

/* phone List mode: the desktop table, full-bleed, grab or swipe sideways; the row list is retired */
body[data-device="phone"][data-view="pipeline"] .lead-table-wrap { flex:1; min-height:0; overflow:auto; padding:0; -webkit-overflow-scrolling:touch; cursor:grab; &[hidden] { display:none; } &.is-panning { cursor:grabbing; user-select:none; }
	.lead-table { min-width:960px; border-radius:0; border-inline:0; th { top:0; } td:last-child, th:last-child { padding-inline-end:28px; } td:first-child, th:first-child { padding-inline-start:16px; } } /* the table is full-bleed, so the end cells carry the page gutter */
	.lead-table-foot { padding:10px 14px calc(env(safe-area-inset-bottom) + 10px); }
}
.lead-table-wrap.is-panning { cursor:grabbing; user-select:none; }
.lead-table-wrap { cursor:grab; }