/* Design tokens the app and dfComponents read, carried over from the DHX Suite theme (suite.css) with
   DHX's resolved values, so removing DHX changes nothing. Names kept to avoid touching 191 uses. */
:root {
	--dhx-font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif;
	--dhx-font-size-normal: 14px;
	--dhx-font-size-small: 12px;
	--dhx-line-height-normal: 20px;
	--dhx-icon-size-normal: 20px;
	--dhx-font-weight-regular: 400;
	--dhx-font-weight-medium: 500;
	--dhx-font-color-primary: rgba(0, 0, 0, 0.7);
	--dhx-font-color-secondary: rgba(0, 0, 0, 0.5);
	--dhx-font-color-disabled: rgba(0, 0, 0, 0.3);
	--dhx-font-color-contrast: #fff;
	--dhx-background-primary: hsl(0, 0%, 100%);
	--dhx-background-secondary: hsl(0, 0%, 97%);
	--dhx-background-additional: hsl(0, 0%, 90%);
	--dhx-border-color: rgba(0, 0, 0, 0.1);
	--dhx-border-radius: 2px;
	--dhx-color-primary: hsl(200, 98%, 40%);
	--dhx-color-danger: hsl(0, 100%, 60%);
	--dhx-color-success: hsl(154, 89%, 37%);
	--dhx-s-toolbar-background: hsl(0, 0%, 100%);
	--dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, 0.07);
	--dhx-s-toolbar-button-background-active: rgba(0, 0, 0, 0.15);
}

/* Plain HTML inputs and buttons written into app markup (accounting assets/journals, CV templates,
   numbering, ticket form builder, flow library). They used DHX Suite's .dhx_input / .dhx_button
   classes; these copy the look suite.css gave them (its values as resolved in the app, including
   DHX's own hover/disabled shades) so the markup no longer needs suite.css. Kept near the top so
   later rules in this file still win ties, as they did over suite.css.
   Markup: <input class="dfInput">, <select class="dfInput">,
   <button class="dfButton dfButton--primary|secondary|danger [dfButton--small]"><span class="dfButton__text">..</span></button> */
.dfInput {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: auto;
	padding: 6px 8px;
	margin: 0;
	font-family: var(--dhx-font-family);
	font-size: var(--dhx-font-size-normal);
	line-height: var(--dhx-line-height-normal);
	color: var(--dhx-font-color-primary);
	background-color: var(--dhx-background-secondary);
	background-clip: padding-box;
	box-shadow: inset 0 0 0 1px var(--dhx-border-color);
	border: 0;
	border-radius: var(--dhx-border-radius);
	outline: 0;
	transition: border-color 0.2s ease-in, box-shadow 0.2s ease-in;
}
.dfInput::placeholder {
	color: var(--dhx-font-color-secondary);
}
.dfInput:focus {
	box-shadow: inset 0 0 0 1px var(--dhx-color-primary);
}
.dfButton {
	overflow: visible;
	position: relative;
	text-decoration: none;
	background-image: none;
	border: 0;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	white-space: nowrap;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--dhx-font-family);
	font-size: var(--dhx-font-size-normal);
	font-weight: var(--dhx-font-weight-medium);
	line-height: var(--dhx-line-height-normal);
	text-align: center;
	color: var(--dhx-font-color-contrast);
	transition: background-color 0.2s ease-in, color 0.2s ease-in, box-shadow 0.2s ease-in;
}
.dfButton:hover,
.dfButton:focus {
	transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.dfButton:active,
.dfButton:focus-visible {
	outline: none;
}
.dfButton:disabled {
	pointer-events: none;
}
.dfButton__text {
	pointer-events: none;
}
.dfButton--small {
	padding: 4px 12px;
	font-size: var(--dhx-font-size-normal);
	line-height: var(--dhx-line-height-normal);
}
.dfButton.dfButton--primary {
	background-color: var(--dhx-color-primary);
	outline-width: 0;
}
.dfButton.dfButton--primary:focus,
.dfButton.dfButton--primary:hover {
	background-color: rgb(3, 169, 252);
}
.dfButton.dfButton--primary:active {
	background-color: var(--dhx-color-primary);
	box-shadow: none;
}
.dfButton.dfButton--primary:disabled {
	color: var(--dhx-font-color-contrast);
	background-color: rgb(126, 196, 231);
}
.dfButtonPrimary {
	background: var(--df-accent);
	color: var(--df-surface);
	border: 1px solid var(--df-accent);
	border-radius: var(--df-radius-sm);
	font-weight: 500;
	cursor: pointer;
}
.dfButtonPrimary:hover {
	filter: brightness(0.95);
}
.dfButtonPrimary:disabled {
	opacity: 0.5;
	cursor: default;
}
/* DemandSign toolbar: .dfc-toolbar__button already sets padding, border and weight; add colours only. */
.dfc-toolbar .dfButtonPrimary {
	border: 0;
	border-radius: 0;
}
.dfDashEmpty {
	color: var(--df-text-muted);
	font-size: var(--df-font-size-sm);
	text-align: center;
	padding: var(--df-space-3);
}
.dfButton.dfButton--secondary {
	background-color: rgb(77, 77, 77);
	outline-width: 0;
}
.dfButton.dfButton--secondary:focus,
.dfButton.dfButton--secondary:hover {
	background-color: rgb(102, 102, 102);
}
.dfButton.dfButton--secondary:active {
	background-color: rgb(77, 77, 77);
	box-shadow: none;
}
.dfButton.dfButton--secondary:disabled {
	color: var(--dhx-font-color-contrast);
	background-color: rgb(179, 179, 179);
}
.dfButton.dfButton--danger {
	background-color: var(--dhx-color-danger);
	outline-width: 0;
}
.dfButton.dfButton--danger:focus,
.dfButton.dfButton--danger:hover {
	background-color: rgb(255, 102, 102);
}
.dfButton.dfButton--danger:active {
	background-color: var(--dhx-color-danger);
	box-shadow: none;
}
.dfButton.dfButton--danger:disabled {
	color: var(--dhx-font-color-contrast);
	background-color: rgb(232, 125, 125);
}

:root {
	--tocloco-blue: #3041b0;
	--jse-theme-color: #777777;
	--sidebar-gray: #ebebeb;
	--text: #555555;
	--dhx-color-primary: #3041b0;
	--wx-kanban-header-height: 30px !important;
	--ag-font-size: 12px !important;

	--uiGrey: #c9d3cd25;
	--uiGreyBorder: #e5ebe725;

	--uiGreen: #17c95825;
	--uiGreenBorder: #b6ecca4f;

	--uiAmber: #ffe19b7a;
	--uiAmberBorder: #ffe19b;

	--uiRed: #c9174c66;
	--uiRedBorder: #d64f7766;

	--uiCritical: rgba(127, 29, 29, 0.55);
	--uiCriticalBorder: var(--df-critical);

	--panelHeader: var(--df-surface);
	--panelHeaderText: var(--df-text);

	--dhx-z-index-overlay: 25000;

	--uiPurple: rgba(139, 92, 246, 0.15);
	--uiPurpleBorder: rgba(139, 92, 246, 0.25);

	--uiBlue: rgba(0, 0, 200, 0.1);
	--uiBlueBorder: rgba(0, 0, 200, 0.15);
}
.mtpYearTotalHeader {
	background-color: var(--uiBlue) !important;
}
:root {

	--uiBlueProjectSidebar: #0000c805;
	--uiRedProjectSidebar: rgba(201, 23, 76, 0.03);
	--uiAmberProjectSidebar: rgba(255, 225, 155, 0.1);
	--uiGreenProjectSidebar: rgba(182, 236, 202, 0.15);
	--uiGreyProjectSidebar: rgba(229, 235, 231, 0.2);
}
.toolbarTitlePadding {
	padding-top: 9px;
}

.jse-menu.svelte-pf7s2l {
	background-color: var(--tocloco-blue) !important;
}

.sidebarBackgroundBlue {
	background-color: var(--uiBlueProjectSidebar);
}
.sidebarBackgroundGreen {
	background-color: var(--uiGreenProjectSidebar);
}
.sidebarBackgroundAmber {
	background-color: var(--uiAmberProjectSidebar);
}
.sidebarBackgroundRed {
	background-color: var(--uiRedProjectSidebar);
}
.sidebarBackgroundGrey {
	background-color: var(--uiGreyProjectSidebar);
}

.colorRed * {
	color: var(--uiRed);
}

.colorAmber * {
	color: var(--uiAmberBorder);
}

/* Vertical (rotated) column headers on the RACI grids.
   Retargeted from AG: Lattice puts the header text straight into .lat-header-label and
   has no inner text element, so the writing-mode goes on the label itself. */
.rotate-header .lat-header-label {
	height: 100%;
	padding: 0 !important;
	width: 55px;
	writing-mode: vertical-lr;
	line-height: 2em;
}

.toolbarChrome {
	background-color: #f0f0f0;
}

.header-leadership {
	background-color: #f2da9d;
}
.header-team {
	background-color: #a5cced;
}
.header-subteams {
	background-color: #bfee9b;
}
.header-external {
	background-color: #f2b9e8;
}

.uiGreyCell {
	background-color: var(--uiGrey);
	box-sizing: border-box;
	border-color: var(--uiGreyBorder);
	border-width: 1px;
}

.uiGreenCell {
	background-color: var(--uiGreen);
	box-sizing: border-box;
	border-color: var(--uiGreenBorder);
	border-width: 1px;
}

.uiAmberCell {
	background-color: var(--uiAmber);
	box-sizing: border-box;
	border-color: var(--uiAmberBorder);
	border-width: 1px;
}

.uiRedCell {
	background-color: var(--uiRed);
	box-sizing: border-box;
	border-color: var(--uiRedBorder);
	border-width: 1px;
	color: white;
}

/* scroll overrides for chrome/windows */
/* kanban scrolling overrides */
.wx-list-wrapper {
	overflow: auto !important;
}

.wx-list-wrapper::-webkit-scrollbar {
	width: 8px;
}

.wx-list-wrapper::-webkit-scrollbar-button {
	height: 0px;
}

.wx-list-wrapper::-webkit-scrollbar-thumb {
	background: #bbbbbb;
}

/* kanban container horizonal scrollbar */
.wx-content-wrapper::-webkit-scrollbar {
	height: 16px;
}

.wx-content-wrapper::-webkit-scrollbar-thumb {
	background: #bbbbbb;
}


/* ag grid scroll overrides*/


.wx-header.svelte-o226r {
	height: 40px !important;
	min-height: 40px !important;
}


.bom-subcomp-row {
	font-style: italic;
	background-color: #f7f8fa;
}

.highlightUpdateDF {
	background-color: #bdceef !important;
}
.transitionUpdateDF {
	transition: background-color 1000ms linear;
}

.alertbar {
	background-color: red;
	color: white;
	padding-left: 20px;
	font-weight: bold;
}

.messagebar {
	background-color: rgba(212, 212, 212);
	/*color: white;*/
	padding-left: 20px;
	/*font-weight: bold;*/
}

body {
	position: relative;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	margin: 0;
}
#body {
	position: relative;
	height: 100%;
}

/*
#body *::-webkit-scrollbar {
	display: none;
}
*/

#overlayObject {
	position: absolute;
	top: 0;
	left: 0;
	/*width: calc(100vw - 200px);*/
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9999;
	display: none;
}

#overlayObject .roundedTopLeft {
	border-top-left-radius: 10px;
}

#overlayObject2 {
	position: absolute;
	top: 0;
	left: 0;
	/*width: calc(100vw - 200px);*/
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 10010;
	display: none;
}

#overlayObject2 .roundedTopLeft {
	border-top-left-radius: 10px;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	/* width: 100vw; */
	bottom: 0;
	right: 0;
	display: none;
	z-index: 10000;
	background-color: rgba(255, 255, 255, 0);
	backdrop-filter: blur(3px); /* Adjust the blur intensity */
	-webkit-backdrop-filter: blur(3px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlay.active {
	background-color: rgba(0, 0, 0, 0.4);
}

#overlayObjectSlide {
	position: absolute;
	top: 0;
	left: 120vw;
	bottom: 0;
	right: 0;
	z-index: 9999;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlayObjectSlide2 {
	position: absolute;
	top: 0;
	left: 120vw;
	bottom: 0;
	right: 0;
	z-index: 10005;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlayObjectSlide3 {
	position: absolute;
	top: 0;
	left: 120vw;
	bottom: 0;
	right: 0;
	z-index: 10006;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlaySlide {
	position: absolute;
	top: 0;
	left: 150vw;
	bottom: 0;
	right: 0;
	z-index: 10000;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlayObjectSlide3.active,
#overlayObjectSlide2.active,
#overlayObjectSlide.active,
#overlaySlide.active {
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

#overlayObjectSlide3 .slideIn,
#overlayObjectSlide2 .slideIn,
#overlayObjectSlide .slideIn,
.slideInObject,
#overlaySlide .slideIn {
	left: 120vw;
	transition: left 0.5s ease;
}

#overlay2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 120vw;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 10001;
	display: none;
}

form {
	height: 100%;
}

.sidebarIcon span {
	display: inline-block;
	height: 100px;
	width: 100px;
	background-color: var(--tocloco-blue);
	color: white;
	font-size: 60px;
	text-align: center;
	line-height: 100px;
}





.appframe {
	background-color: #f6f4fb;
}

.backgroundTransparent {
	background-color: rgba(0, 0, 0, 0);
}


.background {
	background-color: #f6f4fb;
}

.rounded {
	border-radius: 20px;
}

.borderBottom {
	border-bottom: 1px solid #f0f0f0;
}

.borderTop {
	border-top: 1px solid #f0f0f0;
}

.borderRight {
	border-right: 1px solid #f0f0f0;
}

.borderLeft,
.appBackground {
	background-image: url(assets/images/login_background.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.loginFormStyles {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.loginFormStyles img {
	width: 100%;
}

/* Mobile login: single full-width column, form vertically centred */
.loginFormMobile {
	display: flex;
	align-items: center;
	background: #ffffff;
}

.loginFormMobile .loginFormStyles {
	max-width: 420px;
}

.loginFormMobile .logo {
	text-align: center;
}

.loginFormMobile .logo img {
	width: auto;
	max-width: 220px;
}

/* Login column on the Lattice form module (core_login.js). The panel fills the shell cell as a
   column: logo at the top, form in the middle, sign-up text and links at the foot. Buttons take
   the brand colour the domain branding sets through DHX's primary colour. */
.loginForm { background: #ffffff; }
.dfLogin {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	box-sizing: border-box;
	padding: 40px;
	overflow-y: auto;
}
.dfLogin .lat-form { --lattice-accent: var(--df-accent); }
/* Narrow screens: the whole column centred, as the DHX login was. */
.dfLogin--narrow { padding: 24px; width: 100%; justify-content: center; }
.dfLogin--narrow .dfLoginSpacer { flex: 0 0 8px; }
.dfLogin[hidden] { display: none; }
.dfLoginSpacer { flex: 1 1 auto; min-height: 8px; }
.dfLogin .login-heading { margin: 0; }
.dfLoginFailed { background: #d71b1b; color: #ffffff; text-align: center; padding: 10px; border-radius: 8px; }
.dfLoginFailed[hidden] { display: none; }
.dfLoginSignup { margin: 0; text-align: left; }
.dfLoginLinks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Settings pages on the Lattice shell + form (settings_month.js first): the shell fills the app
   frame cell; the form keeps a readable width and the brand colour on its buttons. */
.dfSettingsHost { height: 100%; }
.dfSettingsForm { max-width: 640px; }
.dfSettingsForm.lat-form { --lattice-accent: var(--df-accent); }
.dfSettingsForm--wide { max-width: none; }
/* Lattice 1.103 paints the form root and fieldset bodies with --lattice-form-surface (default: the
   page background, white). App forms sit on grey panels and slide-outs and were transparent before,
   so the surface role is set transparent app-wide (documented theming role, docs/THEMING.md). */
.lat-form { --lattice-form-surface: transparent; }
/* Lattice forms inside DHX layout cells (_utils_lattice_form.js): the wrapper scrolls, the form
   (the host itself carries .lat-form) keeps its natural height and takes the brand colour. */
.dfLatticeCellScroll { box-sizing: border-box; height: 100%; overflow-y: auto; }
.dfLatticeCellForm.lat-form { --lattice-accent: var(--df-accent); }
/* Settings page sections (_utils_settings_page.js): a .dfFormHeader heading, grey help text, then a form. */
.dfSettingsHelp { margin: 0 0 15px 0; color: #666; }
.dfSettingsForm + .dfSettingsSection { margin-top: 30px; }
.dfSettingsSection > div { margin-bottom: 15px; }

/* Candidate emails settings (settings_candidate_emails.js): the on/off toggle column reads as a
   link, the preview card looks like a received email, and the guard verdict below it is quiet
   feedback text, coloured only when the email would not go out. */
.recEmToggleCell { color: var(--df-accent); cursor: pointer; font-weight: 500; }
.recEmWarn { margin: 0 0 var(--df-space-3); color: var(--df-warning); font-size: var(--df-font-size-sm); }
.recEmPreviewCard { border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); padding: var(--df-space-4); }
.recEmPreviewSubject { font-weight: 600; font-size: var(--df-font-size-md); margin-bottom: var(--df-space-3); padding-bottom: var(--df-space-3); border-bottom: 1px solid var(--df-border); }
.recEmPreviewBody { font-size: var(--df-font-size); color: var(--df-text); line-height: 1.5; white-space: normal; }
.recEmGuard { margin: var(--df-space-3) 0 0; font-size: var(--df-font-size-sm); color: var(--df-text); }
.recEmGuard-muted { color: var(--df-text-muted); }
.recEmGuard-skip { color: var(--df-danger); }

/* Simple (slide-in) editor on the Lattice form (defined_object_simple_editor_lattice.js): the
   same inset grey panel as the DHX form it replaces, scrolling inside the slide-out. */
.dfSimpleLatticeScroll { box-sizing: border-box; height: 100%; overflow-y: auto; padding: 20px 25px; background: #f5f5f5; }
/* The host element is the form root (createForm adds .lat-form to it), hence the compound selector. */
.dfSimpleLatticeForm.lat-form { --lattice-accent: var(--df-accent); --lattice-form-item-gap: 20px; }
.dfLogin .loginCopyright { margin: 0; }

.toolbarTop {
	background: var(--tocloco-blue);
	color: white;
	height: 50px !important;
}

.toolbarTop * {
	color: white;
}

.bottombar,
.bottombar * {
	background-color: rgb(35, 47, 62);
	color: white;
	line-height: 24px;
	font-size: 12px;
	font-weight: 600;
	padding-right: 10px;
	text-align: right;
}

.sidebar {
	border-right: solid 1px #b0b8bb;
}

.sidebar li {
	margin-bottom: 8px;
}


.channelItem {
	padding: 10px;
	cursor: pointer;
}

.channelItem img {
	width: 100%;
}

.channelItem .channelHeader {
	display: flex;
	flex-direction: row;
}

.channelItem .channelHeader img {
	width: 36px;
	height: 36px;
	margin-right: 20px;
}

.channelItem .channelHeader p {
	margin-top: 0;
}

.channelItem .channelHeader p span {
	font-weight: bold;
}

.mediaHolder {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.mediaHolder img {
	object-fit: cover;
	overflow-clip-margin: content-box;
}

.sidebar2 h3 {
	font-size: 26px;
	line-height: 38px;
	margin-top: 10px;
}




.ajs-header {
	font-family: 'Roboto';
	color: white;
	background-color: var(--tocloco-blue) !important;
}

.ajs-content {
	font-family: 'Roboto';
}


.ajs-message {
	font-family: 'Roboto';
	color: white;
	position: relative;
	padding-right: 32px !important;
}
/* Visual close affordance — AlertifyJS notifications are click-to-dismiss
   by default, so the ✕ is presentational; clicking anywhere on the toast
   (including the icon) dismisses it. */
.ajs-message::after {
	content: '\00d7';
	position: absolute;
	top: 6px;
	right: 10px;
	font-size: 20px;
	line-height: 1;
	opacity: 0.7;
	pointer-events: none;
}
.ajs-message:hover::after {
	opacity: 1;
}

/* Inline action buttons inside toast notifications (toastConfirm helper). */
.dfToastBody {
	margin-bottom: 8px;
}
.dfToastActions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.dfToastBtn {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}
.dfToastBtn:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.6);
}
.dfToastBtn-primary {
	background: #fff;
	color: #0f172a;
	border-color: #fff;
}
.dfToastBtn-primary:hover {
	background: #f1f5f9;
}

/* TimeSummary row type — metric cards + by-contributor strip. */
.dfTimeSummary-root {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 10px;
}
.dfTimeSummary-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.dfTimeSummary-card {
	background: #f5f4ef;
	border-radius: 10px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dfTimeSummary-cardValue {
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.1;
}
.dfTimeSummary-cardLabel {
	font-size: 13px;
	color: #6b7280;
}
.dfTimeSummary-billable {
	color: #3f6212;
}
.dfTimeSummary-by {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px 16px;
}
.dfTimeSummary-byLabel {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin-bottom: 10px;
}
.dfTimeSummary-byGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.dfTimeSummary-contributor {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.dfTimeSummary-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.dfTimeSummary-avatarInitials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #dbeafe;
	color: #1e3a8a;
	font-size: 12px;
	font-weight: 600;
}
.dfTimeSummary-contributorBody {
	min-width: 0;
	flex: 1;
}
.dfTimeSummary-contributorName {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dfTimeSummary-contributorMeta {
	font-size: 12px;
	color: #6b7280;
}
.dfTimeSummary-active {
	color: #15803d;
	font-weight: 600;
}
.dfTimeSummary-active::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #16a34a;
	margin-right: 4px;
	vertical-align: middle;
}
@media (max-width: 900px) {
	.dfTimeSummary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dfTimeSummary-byGrid { grid-template-columns: 1fr; }
}

/* ─────────────────────────── interactionFeed ─────────────────────────── */
.dfIFeed-root {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 10px;
}
.dfIFeed-composer {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #ffffff;
	overflow: hidden;
}
.dfIFeed-tabs {
	display: flex;
	border-bottom: 1px solid #e5e7eb;
	background: #f9fafb;
}
.dfIFeed-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #4b5563;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}
.dfIFeed-tab i { font-size: 12px; }
.dfIFeed-tab:hover { background: #f3f4f6; }
.dfIFeed-tab--active {
	color: #1f2937;
	border-bottom-color: var(--tocloco-blue, #3b82f6);
	background: #ffffff;
}
.dfIFeed-host {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dfIFeed-host input,
.dfIFeed-host textarea,
.dfIFeed-host select {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	color: #111827;
	background: #ffffff;
	outline: none;
	box-sizing: border-box;
}
.dfIFeed-host input:focus,
.dfIFeed-host textarea:focus,
.dfIFeed-host select:focus {
	border-color: var(--tocloco-blue, #3b82f6);
	box-shadow: 0 0 0 2px rgba(48, 65, 176, 0.12);
}
.dfIFeed-host textarea {
	resize: vertical;
	min-height: 80px;
}
.dfIFeed-callMeta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	align-items: stretch;
}
.dfIFeed-callMeta .dfIFeed-outcome {
	min-width: 0;
}
.dfIFeed-replyTools {
	display: flex;
	gap: 4px;
	margin-top: -4px;
}
.dfIFeed-toolBtn {
	background: transparent;
	border: 1px solid transparent;
	color: #6b7280;
	padding: 4px 8px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
}
.dfIFeed-toolBtn:hover { background: #f3f4f6; color: #111827; }
.dfIFeed-actions {
	display: flex;
	justify-content: flex-end;
	padding: 8px 12px 12px;
}
.dfIFeed-send {
	background: var(--tocloco-blue, #3b82f6);
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.dfIFeed-send:hover { background: #2a369e; }
.dfIFeed-send[disabled],
.dfIFeed-send--sending { opacity: 0.7; cursor: wait; }

/* Stream */
.dfIFeed-stream {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dfIFeed-streamEmpty {
	color: #9ca3af;
	font-size: 13px;
	padding: 12px;
	text-align: center;
}
.dfIFeed-card {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 14px;
	background: #ffffff;
}
.dfIFeed-card--note  {
	background: #fffbeb;
	border-color: #fde68a;
}
.dfIFeed-card--email { border-color: #dbeafe; }
.dfIFeed-card--call  { border-color: #d1fae5; }
.dfIFeed-cardHeader {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.dfIFeed-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.dfIFeed-avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #dbeafe;
	color: #1e3a8a;
	font-size: 11px;
	font-weight: 600;
}
.dfIFeed-cardWho { min-width: 0; flex: 1; }
.dfIFeed-cardName {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
}
.dfIFeed-cardMeta {
	font-size: 11px;
	color: #6b7280;
	margin-top: 1px;
}
.dfIFeed-cardSubject {
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 4px;
}
.dfIFeed-cardBody {
	font-size: 13px;
	color: #374151;
	line-height: 1.5;
	word-break: break-word;
}
.dfIFeed-cardBody--clamped {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dfIFeed-cardBody--open {
	display: block;
}
.dfIFeed-expand {
	margin-top: 6px;
	background: transparent;
	border: none;
	color: #4b5563;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
}
.dfIFeed-expand:hover { color: #111827; }
.dfIFeed-expand i { transition: transform 150ms ease; font-size: 10px; }
.dfIFeed-card--note .dfIFeed-cardBody { color: #78350f; }
.dfIFeed-cardPills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.dfIFeed-cardPills span {
	background: #f3f4f6;
	color: #374151;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
}
.dfIFeed-event {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #6b7280;
	font-size: 12px;
	padding: 4px 14px;
}
.dfIFeed-event i { color: #9ca3af; }
.dfIFeed-eventAgo { margin-left: auto; color: #9ca3af; font-size: 11px; }

/* Original message — pinned at the top, distinct from regular cards. */
.dfIFeed-original {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 14px;
	background: #f9fafb;
}
.dfIFeed-original .dfIFeed-cardHeader { margin-bottom: 8px; }

/* ── interactionFeed: activity presentation (feedMode: "activity") ── */
.dfIFeed-root--activity { gap: 14px; }
.dfIFeed-actHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.dfIFeed-actHeader .dfFormHeader { margin: 0; }
.dfIFeed-filterToggle {
	display: inline-flex;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 2px;
	flex-shrink: 0;
}
.dfIFeed-filterBtn {
	border: none;
	background: transparent;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	font-family: inherit;
}
.dfIFeed-filterBtn--active {
	background: #ffffff;
	color: #111827;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.dfIFeed-stream--scroll {
	max-height: 540px;
	overflow-y: auto;
	gap: 0;
}
.dfIFeed-composer--bottom { margin-top: 2px; }

/* flat activity rows */
.dfIFeed-actRow {
	display: flex;
	gap: 10px;
	padding: 12px 2px;
	border-bottom: 1px solid #f1f5f9;
}
.dfIFeed-actRow:last-child { border-bottom: none; }
.dfIFeed-actIcon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}
.dfIFeed-actIcon--slate  { background: #f1f5f9; color: #64748b; }
.dfIFeed-actIcon--blue   { background: #dbeafe; color: #2563eb; }
.dfIFeed-actIcon--green  { background: #dcfce7; color: #16a34a; }
.dfIFeed-actIcon--red    { background: #fee2e2; color: #dc2626; }
.dfIFeed-actIcon--amber  { background: #fef3c7; color: #d97706; }
.dfIFeed-actIcon--purple { background: #ede9fe; color: #7c3aed; }
.dfIFeed-actRow .dfIFeed-avatar { width: 26px; height: 26px; }
.dfIFeed-actMain { flex: 1; min-width: 0; }
.dfIFeed-actLine {
	font-size: 13px;
	color: #374151;
	line-height: 1.45;
}
.dfIFeed-actLine strong { font-weight: 600; color: #111827; }
.dfIFeed-actStrong { font-weight: 600; color: #111827; }
.dfIFeed-actVerb { color: #6b7280; }
.dfIFeed-actAgo { color: #9ca3af; font-size: 12px; }
.dfIFeed-actBody {
	margin-top: 3px;
	font-size: 13px;
	color: #374151;
	line-height: 1.5;
	word-break: break-word;
}
.dfIFeed-actBody:empty { display: none; }
.dfIFeed-actBody p { margin: 0; }
.dfIFeed-actSubject { font-weight: 600; color: #1f2937; }

/* composer action bar — voice / attach buttons */
.dfIFeed-iconBtn {
	background: transparent;
	border: none;
	color: #6b7280;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 15px;
	font-family: inherit;
}
.dfIFeed-iconBtn:hover { background: #f3f4f6; color: #111827; }
.dfIFeed-mic { color: #dc2626; }
.dfIFeed-mic--on {
	background: #fee2e2;
	color: #dc2626;
	animation: dfIFeedPulse 1.2s ease-in-out infinite;
}
@keyframes dfIFeedPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.dfIFeed-actionsSpacer { flex: 1; }
.dfIFeed-actions { align-items: center; gap: 4px; }
.dfIFeed-body--auto { min-height: 44px; resize: none; }

/* @mention and #reference pills */
.dfIFeed-mention {
	background: #eef2ff;
	color: #4338ca;
	border-radius: 4px;
	padding: 0 4px;
	font-weight: 500;
}
.dfIFeed-ref {
	background: #f1f5f9;
	color: #2563eb;
	border-radius: 4px;
	padding: 0 4px;
	font-weight: 500;
	cursor: pointer;
}
.dfIFeed-ref:hover { background: #e2e8f0; }

/* ── BACKLOG Overview cards ── */
.dfOvCard {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	margin: 5px 0 16px;
}
.dfOvCard-head {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 10px;
}
.dfOvCard-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #64748b;
}
.dfOvCard-count { font-size: 12px; color: #94a3b8; }
.dfOvCard-spacer { flex: 1; }
.dfOvCard-add {
	border: none;
	background: transparent;
	color: #2563eb;
	cursor: pointer;
	font-size: 14px;
	padding: 2px 6px;
	border-radius: 6px;
}
.dfOvCard-add:hover { background: #eff6ff; }

.dfOvProgress {
	height: 6px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 12px;
}
.dfOvProgress-fill {
	height: 100%;
	border-radius: 999px;
	background: #94a3b8;
	transition: width 150ms ease;
}
.dfOvProgress-fill--success { background: #16a34a; }
.dfOvProgress-fill--warn { background: #f59e0b; }

.dfOvSubtask {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 2px;
	border-bottom: 1px solid #f1f5f9;
}
.dfOvSubtask:last-child { border-bottom: none; }
.dfOvSubtask-check { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.dfOvSubtask-title {
	flex: 1;
	font-size: 13px;
	color: #1f2937;
	cursor: pointer;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dfOvSubtask-title:hover { color: #2563eb; }
.dfOvSubtask-title--done { text-decoration: line-through; color: #94a3b8; }
.dfOvSubtask-pts {
	font-size: 11px;
	font-weight: 600;
	color: #475569;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 1px 7px;
	flex-shrink: 0;
}
.dfOvSubtask-addrow { margin-top: 8px; }
.dfOvSubtask-addinput {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 7px 9px;
	font-size: 13px;
	font-family: inherit;
	box-sizing: border-box;
}
.dfOvEmpty {
	font-size: 13px;
	color: #94a3b8;
	font-style: italic;
	padding: 8px 2px;
}
.dfOvAvatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.dfOvAvatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #dbeafe;
	color: #1e3a8a;
	font-size: 9px;
	font-weight: 600;
}
.dfOvAvatar--none {
	display: inline-block;
	background: #f1f5f9;
	border: 1px dashed #cbd5e1;
	box-sizing: border-box;
}
.dfOvDod-foot {
	margin-top: 10px;
	font-size: 11px;
	color: #94a3b8;
	font-style: italic;
}

/* Block popover + WSJF info */
.dfBlockPop { display: flex; flex-direction: column; gap: 10px; }
.dfBlockPop-reason {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
	box-sizing: border-box;
}
.dfBlockPop-btn {
	align-self: flex-end;
	background: #f59e0b;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.dfBlockPop-btn:hover { background: #d97706; }
.dfWsjfInfo p { margin: 0 0 8px; font-size: 13px; }
.dfWsjfInfo-formula {
	font-family: monospace;
	background: #f1f5f9;
	padding: 8px 10px;
	border-radius: 6px;
}

/* Activity feed: the row's Lattice form is the card (the standard record-editor card), so the
   root sits flush inside it. */
.dfIFeed-root.dfIFeed-root--activity {
	padding: 0;
}
/* The feed and the comment box sit in by the .dfFormHeader inset, so they line up with the title. */
.dfIFeed-root--activity > .dfIFeed-stream,
.dfIFeed-root--activity > .dfIFeed-composer {
	margin-left: 5px;
	margin-right: 5px;
}


.functionToolbar span {
	font-weight: 300;
}

/* Realtime "Item Updated" notice — complex editor object toolbar */
.liveUpdateNotice span {
	display: inline-block;
	color: var(--tocloco-blue, #3041b0) !important;
	background: #ffffff !important;
	border-radius: 6px;
	padding: 4px 10px;
}

.sideForm label {
	text-align: left !important;
	font-weight: 300;
}

/* Fields with a help icon render the label as a flex row, so text-align alone
   doesn't left-align them — force flex-start, and left-align every descendant
   so help and non-help labels share the same start edge. */
.sideForm label {
	justify-content: flex-start !important;
}
.sideForm label,
.sideForm label * {
	text-align: left !important;
}




.tasks_grid-template {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.tasks_grid-status {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin-right: 6px;
	font-size: var(--dhx-font-size-small);
}
.tasks_grid-status--normal,
.tasks_grid-status--normal:hover {
	background-color: var(--dhx-color-success);
}
.tasks_grid-status--high,
.tasks_grid-status--high:hover {
	background-color: var(--dhx-color-danger);
}
.tasks_grid-status--low,
.tasks_grid-status--low:hover {
	background-color: var(--dhx-color-primary);
}


.wx-todo_popup li:first-child {
	display: none;
}

.wx-todo_button-add,
.wx-todo_popup li:nth-child(4),
.wx-todo_popup li:nth-child(5),
.wx-todo_popup li:nth-child(7),
.wx-todo_popup li:nth-child(9) {
	display: none;
}

.layoutMarginLeft {
	margin-left: 20px;
}

.layoutMarginTop {
	margin-top: 20px;
}

.layoutMarginBottom {
	margin-bottom: 20px;
}

.layoutBorder {
	border: 1px solid #dddddd;
}

.colorLinkedin {
	color: #0077b5;
}

/* Lattice calendar (codebase/lattice/modules/calendar): the app's look on the
   module's tokens and classes. Replaced the FullCalendar overrides 2026-10-01. */
.lat-calendar {
	--lattice-calendar-accent: #6366f1;
	--lattice-calendar-header-bg: #fff;
	--lattice-calendar-header-fg: #6366f1;
	--lattice-calendar-today-bg: rgba(99, 102, 241, 0.04);
	--lattice-calendar-cell-min-height: 120px;
	--lattice-calendar-card-radius: 8px;
	font-family: 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif;
	background: #fff;
}

.lat-calendar .lat-calendar__header {
	padding: 16px 8px;
}

/* Only the day cells scroll: the toolbar stays put and the weekday row sticks
   to the top of the scrolling body, as the kanban's column headers do. */
.lat-calendar .lat-calendar__body {
	overflow: auto;
}

.lat-calendar .lat-calendar__body > .lat-calendar__grid[role="row"] {
	position: sticky;
	top: 0;
	z-index: 2;
}

.lat-calendar .lat-calendar__title {
	font-feature-settings: 'liga';
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lat-calendar .lat-calendar__weekday {
	font-feature-settings: 'liga';
	font-size: 13px;
	font-weight: 600;
	color: #6366f1;
	text-transform: uppercase;
	padding: 10px 4px;
}

.lat-calendar .lat-calendar__button {
	background: #fff;
	border: 1px solid #d1d5db;
	color: #374151;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lat-calendar .lat-calendar__button:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
}

.lat-calendar .lat-calendar__button[aria-pressed="true"] {
	background: #f0f0ff;
	border-color: #6366f1;
	color: #4338ca;
}

.lat-calendar .lat-calendar__nav .lat-calendar__button + .lat-calendar__button {
	margin-left: -1px;
}

.lat-calendar .lat-calendar__daynum {
	color: #475569;
}

/* A post card is drawn by the app (df_render_post_card) straight into the
   module's card element: give it the card look and let it wrap and grow. */
.lat-calendar .lat-calendar__card.scheduledPost {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	padding: 10px 12px;
	border: 1px solid #e5e7eb;
	border-left-width: 1px;
	border-left-color: #e5e7eb;
	border-radius: 8px;
	background: #fff;
	margin: 0 0 4px 0;
}

.lat-calendar .lat-calendar__card.scheduledPost:hover {
	border-color: #c7d2fe;
}

/* Scheduled post cards */
.scheduledPost .postLanguage {
	font-size: 11px;
	color: #6b7280;
	padding: 2px 6px;
}

.scheduledPost .postEngagement {
	display: flex;
	gap: 8px;
	padding: 6px 6px 4px;
	margin-top: 4px;
	font-size: 12px;
	color: #10b981;
	border-top: 1px solid #e5e7eb;
}

.scheduledPost {
	width: 100%;
	padding: 10px 12px;
	font-size: 13px;
	background-color: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: box-shadow 0.15s, border-color 0.15s;
	cursor: pointer;
}

.scheduledPost:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	border-color: #c7d2fe;
}

.scheduledPost > div {
	overflow: hidden;
}

.scheduledPost .channel {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.4;
}

.scheduledPost .channel i {
	font-size: 14px;
}

.scheduledPost .postChannel {
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 4px;
}

.scheduledPost .postContent {
	color: #475569;
	font-size: 13px;
	line-height: 1.4;
	margin: 6px 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.scheduledPost .postStatus {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	margin: 6px -12px -10px -12px;
	padding: 6px 12px;
	border-top: 1px solid #f1f5f9;
	border-radius: 0 0 8px 8px;
	overflow: visible;
}

.scheduledPost .postMedia img {
	width: 100%;
	border-radius: 6px;
	margin: 6px 0;
}

.colorPositive {
	color: #16a34a;
}

.colorNegative {
	color: #dc2626;
}

.scheduledPost .statusPosted {
	color: #16a34a;
	background: #f0fdf4;
	border-top-color: #bbf7d0;
}

.scheduledPost .statusScheduled {
	color: #2563eb;
	background: #eff6ff;
	border-top-color: #bfdbfe;
}

.scheduledPost .statusFailed {
	color: #dc2626;
	background: #fef2f2;
	border-top-color: #fecaca;
}

.scheduledPost .statusProcessing {
	color: #d97706;
	background: #fffbeb;
	border-top-color: #fde68a;
}

.scheduledPost .statusDraft {
	color: #6b7280;
	background: #f9fafb;
	border-top-color: #e5e7eb;
}

.scheduledPost .statusDefault {
	color: #6b7280;
}

.scheduledPost .postStatus .postTime {
	margin-left: auto;
}

.scheduledPost .postMetrics {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 12px 6px 12px;
	margin: 0 -12px -10px -12px;
	border-radius: 0 0 8px 8px;
}

.scheduledPost .postMetrics.statusPosted {
	border-top: none;
	padding-top: 0;
}

.scheduledPost .postStatus.statusPosted {
	border-radius: 0;
	margin-bottom: 0;
	padding-bottom: 4px;
}

.scheduledPost .postMetric {
	display: flex;
	align-items: center;
	gap: 4px;
}

.scheduledPost .postMetric i {
	font-size: 11px;
}

/*
.wx-kanban .wx-row .wx-content {	
	flex-grow: 1;
	height: calc(100% - 70px);
	align-self: stretch;
}
.wx-content {
	height: 100% !important;
	max-content: auto;
}
.wx-content-wrapper > .wx-content,
.wx-content {
	height: 100% !important;
	
}
*/

.wx-kanban .wx-header {
	padding: 0;
}
.wx-kanban .wx-column {
	margin-left: 0 !important;
	padding: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.wx-kanban > .wx-content-wrapper > .wx-content {
	height: 100%;
}

.wx-kanban .wx-collapse-icon {
	display: none;
}

.wx-kanban .wx-header .wx-label {
	background-color: var(--tocloco-blue);
	color: white;
	margin: 0;
	padding: 0 10px 0 10px;
}

.wx-kanban .wx-header .wx-label .wx-menu {
	display: none;
}

.wx-controls-wrapper {
	display: none !important;
}

.wx-card {
	margin: 5px 0 0 0 !important;
	/*
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	*/
	overflow: hidden;
}

.kanbanLabelContainer {
	display: flex;
	flex-direction: row;
	padding: 7px;
	padding-top: 0;
}

.kanbanLabelContainer > div {
	width: 30px;
}
.kanbanLabelContainer > p {
	margin: 0;
	font-size: 13px;
}

.kanbanProjectContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.kanbanProjectContainer div:first-child {
	flex-grow: 1;
}

.kanbanSprint {
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: lightgrey;
	border-radius: 3px;
	width: fit-content;
	padding: 3px 6px 3px 6px;
}

.overdueSprint {
	background-color: red;
	color: white;
}

/*
.wx-row {
	flex-grow: 1;
}

.wx-kanban .wx-column: {
	display: flex;
}

.wx-kanban .wx-list-wrapper {
	display: flex; flex-direction: column; flex-grow:1; height: 100%;	
	overflow-y: scroll;
	height: calc(100% - 100px);
}
*/

.wx-row.svelte-30nbk4 {
	height: calc(100% - 0px);
}

.wx-content.svelte-30nbk4 {
	height: calc(100% - 0px);
}

.wx-list-wrapper {
	padding-left: 2px;
	padding-right: 2px;
}

.wx-list-wrapper.svelte-1ck6han {
	height: calc(100%);
}

.wx-row.svelte-30nbk4:not(.wx-collapsed) {
	height: calc(100% - 36px);
}

.wx-selected.svelte-1t9rqgm {
	border: var(--wx-kanban-card-border);
}

.kanbanInlineMenu {
	display: inline-block;
	width: 10px;
}

.kanbanInlineMenu:hover {
	color: red;
}

.userCircle {
	display: inline-block;
	background-color: var(--tocloco-blue);
	margin: 0 4px 0 0;
	border-radius: 50%;
}

.userCircleInner {
	color: white;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	height: 25px;
	width: 25px;
	font-size: 11px;
}

.alertify-notifier {
	z-index: 10000000;
}

/* Top-positioned notifiers start below the 40px app header bar. */
.alertify-notifier.ajs-top {
	top: 50px;
}

/* A maximised Lattice grid is position:fixed at z-index 2147483000 and marks the
   body with lat-maximised-host. Toasts, alertify dialogs and DHX popups opened
   while it fills the window must sit above it, or they appear behind the grid. */
.lat-maximised-host .alertify-notifier,
.lat-maximised-host .alertify {
	z-index: 2147483600;
}

.fdListCell {
	border-radius: 8px !important;
}


/* timeline */

#lineCont {
	width: 100%;
	height: 20%;
}

#line {
	height: 6px;
	width: 70%;
	background: white;
	border-radius: 5px;
	margin: auto;
	top: 50%;
	transform: translateY(-50%);
	position: relative;
}

#span {
	display: none;
	width: 70%;
	margin: auto;
	margin-top: 25%;
	text-align: center;
	color: white;
}

.circle {
	width: 20px;
	height: 20px;
	background: #e97162;
	border-radius: 15px;
	position: absolute;
	top: -7px;
	border: 3px solid white;
	cursor: pointer;
	&:before {
		content: '';
		width: 10px;
		height: 10px;
		background: white;
		position: absolute;
		border-radius: 100%;
		top: 2px;
		left: 2px;
		display: none;
	}
	.popupSpan {
		width: auto;
		height: auto;
		padding: 10px;
		white-space: nowrap;
		display: inline-block;
		color: white;
		position: absolute;
		top: 20px;
		left: -75px;
		display: none;
		transition: all 0.1s ease-out;
	}
	/*
     &:nth-child(odd) .popupSpan {
	   top: 20px;
	}
    */
	&.hover:before,
	&.active:before {
		display: block;
	}
	&.hover .popupSpan,
	&.active .popupSpan {
		display: block;
	}
	&.active .popupSpan {
		top: -40px;
	}
}

#mainCont {
	height: 80%;
	width: 100%;
	position: relative;
	color: white;
	font-size: 62px;
	text-align: center;
	transition: all 0.2s ease-out;
	span {
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 30%;
		transition: all 0.2s ease-out;
		&.right {
			left: 200%;
		}
		&.center {
			left: 0% !important;
		}
		&.left {
			left: -100%;
		}
	}
}

.healthList li {
	padding: 0 10px 0 10px;
}

.health {
	display: flex;
	flex-direction: row;
	height: 52px;
	line-height: 52px;
	align-items: center;
}

.health span:first-of-type {
	width: 33%;
	font-weight: bold;
}

.health i {
	font-size: 150%;
}

.ragRed {
	color: #ef3d4e;
	/*rgb(239, 61, 78)*/
}

.ragAmber {
	color: #ffe19b;
}

.ragGreen {
	color: #69e885;
	/*rgb(105, 232, 133)*/
}

.ragRedBackground {
	background-color: #ffb1b9;
	/*rgb(239, 61, 78)*/
}

.ragAmberBackground {
	background-color: #ffe19b;
}

.ragGreenBackground {
	background-color: #a9f9bb;
	/*rgb(105, 232, 133)*/
}


.instance * {
	color: #ededed;
}

.headerhighlight,
.headerhighlight * {
	background-color: #eaeaea;
}
.condensedGrid * {
	font-size: 10px;
}

.cardTags {
	background-color: blanchedalmond;
	padding: 3px 6px 3px 6px;
	border-radius: 8px;
	font-size: 80%;
	margin-right: 5px;
}

.kanbanCardProject {
	margin: 0;
}

.kanbanCardProject span {
	background-color: #ededed;
	padding: 3px 6px 3px 6px;
	border-radius: 8px;
	font-size: 80%;
	margin-right: 5px;
}

.transparentTA * {
	background: none;
	box-shadow: none;
}

/* Dashboard tiles. Was .grid-stack-item-content before the dashboards moved to
   the Lattice layout; the look is unchanged. */
.lat-layout__window {
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 8px;
	overflow: hidden;
}

.dashwidget {
	padding: 0px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dashwidgettitle {
	font-weight: bold;
	background: #d4d4d4;
	padding: 10px !important;
	border-bottom: 1px solid #e2e2e2;
}

.dashwidgetstat {
	font-size: 300%;
	text-align: center;
	align-content: space-around;
	flex-grow: 1;
	padding: 10px;
}

.dashwidgetlist {
	font-size: 300%;
	text-align: center;
	align-content: space-around;
	flex-grow: 1;
	padding: 10px;
}

.dashwidgetchart {
	text-align: center;
	align-content: space-around;
	flex-grow: 1;
	padding: 10px;
}

.dashwidgetchart i {
	font-size: 300%;
}

#pivot .item_content {
	color: black;
}


.mainsidebar {
	padding: 0 !important;
}

.replyFormBg {
	background: lightgray !important;
	border-radius: 5px;
}

.ticketDate {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #0e9700;
	display: inline-block;
	margin-right: 5px;
	margin-left: 5px;
}

.ticketOverdue {
	background-color: red !important;
}

.ticket_header_cell h3 {
	padding: 0;
	margin-bottom: 10px;
}

.fa-arrow-turn-left,
.fa-arrow-turn-right {
	font-size: 5px;
	transform: scale(0.75);
}

.ticket_overlay_close_icon {
	margin-right: 6px;
}

.ticket_overlay_right_column {
	box-shadow: inset 10px 0 10px -8px #ebeff3;
}

.ticket_overlay_toolbar {
	box-shadow: 0px 10px 10px -8px #ebeff3;
}

.ticketTag {
	padding: 4px;
	border-radius: 6px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
	font-weight: 500;
	display: flex;
	align-items: center;
	height: 24px;
	font-size: 13px;
	padding-right: 8px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: white;
}

.Circle {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;
	margin-left: 6px;
	background: none;
	background-color: none;
}

.LowCircle,
.ClosedCircle,
.dateCircle {
	background-color: #00ac46;
}

.MediumCircle {
	background-color: #fdc500;
}

.overdueDateCircle,
.HighCircle,
.OpenCircle {
	/* background-color: #fd8c00; */
	background-color: #f10f0f;
}

.CriticalCircle {
	background-color: #780000;
}

.greyGridRow {
	/*background: rgba(47, 65, 176, 0.1);*/
	background-color: #2f41b01a;
}

/** Initiatives **/


.ini_white {
	background-color: white;
}
.ini_black {
	background-color: black;
}
.ini_red {
	background-color: #f94144;
}
.ini_orange1 {
	background-color: #f3722c;
}
.ini_orange2 {
	background-color: #f8961e;
}
.ini_peach {
	background-color: #f9844a;
}
.ini_yellow {
	background-color: #f9c74f;
}
.ini_green {
	background-color: #90be6d;
}
.ini_turquoise {
	background-color: #43aa8b;
}
.ini_sage {
	background-color: #4d908e;
}
.ini_purple {
	background-color: #3041b0;
}
.ini_blue2 {
	background-color: #0068ff;
}

/* for tci budget tracker */

.dfHeaderAmber,
.dfHeaderAmber:hover {
	background-color: var(--uiAmber) !important;
}

.iconsWindow {
	z-index: 10000000000;
}


.titleblock {
	/*background-color: #CC533D !important;*/
	background-color: var(--tocloco-blue) !important;
}

.titleblock * {
	color: white;
	font-weight: 600;
}


.hovercontrols {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	border: 1px solid green;
}

.blocksView {
	background: none;
}


.hoverdrag {
	position: absolute;
	top: 2px;
	right: 44px;
	width: 20px;
	height: 20px;
	background-color: green;
	color: white;
	text-align: center;
	line-height: 20px;
}

.hoveredit {
	position: absolute;
	top: 2px;
	right: 22px;
	width: 20px;
	height: 20px;
	background-color: green;
	color: white;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
}

.hoverdelete {
	position: absolute;
	top: 2px;
	right: 0px;
	width: 20px;
	height: 20px;
	background-color: green;
	color: white;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
}

.fullwidth,
.fullwidth button {
	width: 100%;
}


/* The app frame (app.js) is a Lattice shell on #body.dfAppFrame; screens used to inherit these from
   the DHX main layout: uppercase padded h2 section titles, and hidden scrollbars
   (.dhx_widget * in dhtmlx-suite-9-scrollbar-fix.css). */
.dfAppFrame h2 {
	text-transform: uppercase;
	padding: 10px 20px 10px 20px;
}
.dfAppFrame *::-webkit-scrollbar {
	display: none !important;
}
.dfAppFrame * {
	scrollbar-width: none !important;
}


.templateName {
	position: absolute;
	width: 100%;
	height: 40px;
	background-color: var(--tocloco-blue);
	padding: 5px;
	bottom: 0;
	text-align: center;
	line-height: 30px;
	color: white;
	margin: 0 !important;
	text-transform: uppercase;
	font-weight: 600;
}


.editorCol,
.protoCol {
	background-color: #f4f6f8;
	transition: width 0.2s;
}

.previewCol {
	justify-content: center;
	display: flex;
	background-color: unset !important;
}


.phonezone {
	border-bottom-left-radius: 12% 6%;
	border-bottom-right-radius: 12% 6%;
}

.guideName {
	margin-top: 10px;
	margin-right: 20px;
}

.saveGuide button {
	margin-top: 10px;
	margin-right: 10px;
	/*border-radius: 6px !important;*/
	overflow: hidden;
	padding: 8px 20px 8px 20px;
}

.saveGuide span {
	font-size: 14px;
}

.bolder input {
	font-weight: 700;
	text-transform: uppercase;
}

.optionsblock {
	margin-bottom: 10px;
}

.protoForm,
.globalForm {
	background: none;
}

.deleteGuide button {
	background-color: #cc533d !important;
}

.deleteGuide button:hover {
	background-color: #c68e8e !important;
}

.deleteGuide button span {
	color: white !important;
}

.guideName input {
	font-size: 14px;
	background-color: white;
	padding: 10px;
	border-radius: 6px;
	border-color: white;
	box-shadow: inset 0 0 0 1px white;
}

.guideName input:focus {
	background-color: rgb(243, 243, 243);
	box-shadow: inset 0 0 0 1px #73672f;
}

.templateBlock {
	font-size: 12px;
	padding: 0;
	display: flex;
	height: 100%;
	justify-content: center;
	flex-direction: column;
	position: relative;
	background-repeat: none;
	background-size: cover;
	border-radius: 6px;
	overflow: hidden;
}


.guideBlock > *:not(:first-child) {
	margin-top: 20px !important;
}


.pageIconSelect select {
	font-family: 'Font Awesome 6 Pro';
}

.mappedFieldsFormContainer {
	max-height: 55%;
	overflow: scroll;
}
.mappedFieldsForm {
	flex: unset !important;
	flex-grow: unset;
	flex-shrink: unset;
	overflow: unset;
}
.mappedFieldsForm > div {
	overflow: hidden !important;
}
.alignToBottom {
	margin-top: auto;
}
.hide {
	display: none;
}

.purple button {
	background-color: #3041b0 !important;
}


.purpleTask {
	background-color: #5061d4 !important;
	border: none !important;
}

.purpleChild {
	background-color: rgb(139, 160, 255);
	border: none !important;
}

.removeZIndex {
	z-index: unset !important;
}
#dfSidebarCon {
	border-radius: 0;
	border: none;
}

.df-menu-item {
	display: flex;
	height: 36px;
	align-items: center;
	padding-left: 32px;
	cursor: pointer;
}

.df-menu-item * {
	background-color: white;
	color: black;
}

.df-menu-item:hover,
.df-menu-item:hover * {
	background-color: #eeeeee;
	color: black;
}

.e-acrdn-header-icon {
	width: 24px;
}

.e-acrdn-header-content {
	color: black !important;
	font-size: 13px !important;
}

.df-side-icon,
.e-acrdn-header-icon {
	color: black !important;
}

.e-acrdn-content {
	padding: 0 !important;
}

.df-menu-selected,
.df-menu-selected * {
	background-color: var(--tocloco-blue);
	color: white !important;
}


.userbutton button {
	background: rgba(0, 0, 0, 0);
}

.userbutton span {
	margin: 5px;
}

.fixed-frontdoor-button {
	position: fixed;
	bottom: 60px;
	right: 40px;
}

.stickyButtons {
	position: sticky;
	bottom: 0;
	right: 0;
	width: 100%;
}

.adminRadios {
	overflow: hidden !important;
}


.whitetab {
	background-color: white !important;
}

.swimlane {
	height: 45% !important;
	min-width: unset !important;
}

.swimlane .wx-column.svelte-1ppa004.svelte-1ppa004:last-child {
	margin-right: 0px !important;
}

.swimlane .wx-label {
	padding-top: 20px;
	padding-bottom: 10px !important;
	padding: 10px 12px 10px 24px !important;
	font-size: 14px;
	border-bottom: 1px solid #ffffff;
	background-color: #d9d9d9;
	border-left: 1px solid white;
}

.swimlane .wx-content {
	overflow: hidden;
}

.mt5 {
	margin-top: 5px;
}

.ft-comment-tooltip {
	position: fixed;
	background: #fff;
	border: 1px solid #ddd;
	border-left: 3px solid #ffe19b;
	border-radius: 4px;
	padding: 10px 14px;
	max-width: 300px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 2000001;
	pointer-events: none;
	font-size: 13px;
	line-height: 1.4;
	transform: translateY(-100%);
}


.greyCell {
	background-color: rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0);
}
.greyCellBoldItalic {
	background-color: rgba(0, 0, 200, 0.1);
	font-style: italic;
	font-weight: bold;
}

.italicCellDarkBold {
	background-color: rgba(0, 0, 80, 0.1);
	font-style: italic;
	font-weight: bold;
}
.italicCellDarkerBold {
	background-color: rgba(0, 0, 200, 0.1);
	font-style: italic;
	font-weight: bold;
}

.italicCellDark {
	background-color: rgba(0, 0, 80, 0.1);
	font-style: italic;
}

.italicCellDarker {
	background-color: rgba(0, 0, 200, 0.1);
	font-style: italic;
}

.bold {
	font-weight: bold;
}

.greyCellBold {
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: bold;
}
.grey {
	background-color: rgba(0, 0, 0, 0.1);
}

.excelNumber {
	font-weight: inherit;
}

.rowGroupGrid {
	/* color: var(--tocloco-blue); */
	filter: saturate(30%);
	border: none !important;
	font-weight: bold;
}

.rowGroupGrid::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(90, 86, 208, 0.123);
	pointer-events: none;
	border: none !important;
}

.highlightbom {
	background-color: #f0f7ff !important;
}

.assignGrid * {
	font-size: 12px !important;
}


/* Team Task List Items */

.taskListItem {
	display: flex;
	align-items: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
.taskItemName {
	width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	margin-right: 15px;
}
.taskItemDate {
	margin: 0;
	margin-right: 15px;
	font-weight: bold;
}
.taskItemDateIcon {
	margin-right: 8px;
}
.taskItemLeft {
	display: flex;
	align-items: center;
}
.taskItemRight {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: auto;
}
.taskItemWorkload {
	margin: 0;
	margin-right: 15px;
	font-weight: bold;
}
.taskItemWorkloadIcon {
	margin-right: 5px;
}
.taskItemImg {
	height: 25px;
	width: 25px;
	border-radius: 50%;
	object-fit: cover;
	background-color: lightgray;
	margin-right: 15px;
}
.taskListForm {
	height: 25px;
	overflow: hidden !important;
	padding: 0 !important;
}
.taskItemSelectContainer {
	margin-left: auto;
}
.taskListSelect {
	height: 25px;
	font-size: 10px;
	margin-left: auto;
}
.taskListSelect select {
	font-size: 10px;
	width: 70px !important;
	padding: 0 0 0 5px;
	height: 100%;
}

@media (max-width: 1500px) {
	.taskListItem {
		font-size: 11px;
	}
	.taskItemName {
		width: 60px;
		margin-right: 10px;
	}
	.taskItemDateIcon {
		margin-right: 5px;
	}
	.taskItemWorkloadIcon {
		margin-right: 3px;
	}
}

.tag {
	border-radius: 100px;
	padding-top: 2px;
	padding-left: 4px;
	padding-right: 12px;
	line-height: 2;
	font-weight: 500;
	border: 1.5px solid rgba(91, 91, 91, 0.1);
	display: flex;
	/*
    justify-content: center;
	align-items: center;
    */
	flex-direction: row;
	height: 30px;
	margin-top: 4px;
}

.greyTag {
	background-color: #c2c2c230;
	border: 1.5px solid #cecece;
}

.greenTag {
	background-color: #84ca8130;
	border: 1.5px solid rgb(70, 227, 114, 0.2);
}

.redTag {
	background-color: rgb(255, 0, 0, 0.05);
	color: rgb(234, 83, 83);
	border: 1.5px solid rgb(255, 0, 0, 0.3);
}

.amberTag {
	background-color: #fdc3584f;
}

.circle {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50%;
	margin-right: 8px;
	margin-left: 6px;
	position: relative;
	margin-top: 15px;
}

.greyCircle {
	background-color: #cecece;
	border: #cecece;
}

.greenCircle {
	background-color: #6d9b7e;
	border: #6d9b7e;
}

.redCircle {
	background-color: #ea5353;
	border: #ea5353;
}

.amberCircle {
	background-color: #a06d37;
	border: #a06d37;
}

.smaller * {
	font-size: 10px !important;
}

.subtask-grid {
	border: 1px solid #dfdfdf;
	margin-bottom: 10px;
}

.status-select {
	padding: 4px 0px;
	border-radius: 4px;
	border: 1px solid #ddd;
}

.status-form {
	min-width: 120px;
}


.sidebar-toggle {
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: #fff;
	border: 1px solid #757575;
	border-radius: 50%;
	cursor: pointer !important;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999 !important;
	transition: transform 0.3s;
	pointer-events: all !important;
}

.sidebar-toggle i {
	cursor: pointer !important;
}

.sidebar.collapsed {
	width: 24px !important;
	padding: 0 !important;
	overflow: hidden;
}

.sidebar.collapsed .sidebar-toggle {
	right: 0px !important;
}

.sidebar.collapsed .sidebar-toggle i {
	transform: rotate(180deg);
}

.sidebar.collapsed #dfSidebarCon {
	opacity: 0;
	visibility: hidden;
}

#dfSidebar {
	position: relative;
	transition: width 0.3s;
	pointer-events: all !important;
	overflow-x: hidden;
	height: calc(100% - 60px) !important;
	border-bottom: 1px solid gray;
}

.sidebar {
	pointer-events: all !important;
	transition: width 0.3s, min-width 0.3s, max-width 0.3s;
}

#dfSidebarCollapse:hover {
	background-color: #eee;
}

#dfSidebarCollapse i {
	transition: transform 0.3s;
}


.rowBorderBottom {
	position: relative;
	border: none;
}
.rowBorderBottom:after {
	content: '';
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: black;
}

.riskListItem {
	margin: 0;
	padding: 0;
}

.riskProjectName {
	font-size: 80%;
	font-weight: bold;
	text-transform: uppercase;
}

.riskScore {
	width: 70px;
}

.riskScore span {
	width: 90%;
	display: inline-block;
	text-align: center;
	font-size: 90%;
}

.riskScoreHigh {
	margin-top: 5px;
}
.riskScoreHigh span {
	background-color: #ef3d4e;
	padding: 5px;
	font-weight: bold;
	color: white;
	border-radius: 4px;
}

.riskScoreMedium span {
	background-color: #ffe19b;
	padding: 5px;
	font-weight: bold;
	border-radius: 4px;
}

.riskScoreLow span {
	background-color: #69e885;
	padding: 5px;
	font-weight: bold;
	border-radius: 4px;
}

.riskListItem {
	cursor: pointer;
	display: flex;
	flex-direction: row;
}

.smallerInput input {
	font-size: 80%;
}

.dataviewNoBorder * {
	border: 0 !important;
}

.notSaved * {
	text-align: center;
	background-color: red;
	color: white;
	border-radius: 3px;
	font-weight: bold;
}

.timeline-event-label {
	padding-top: 5px;
	font-size: 10px !important;
}


.slideIn [data-cell-id='functionForm'] {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}


.dfButtonRounded button {
	border-radius: 8px;
}

.dfButtonSecondary button {
	background: rgba(46, 63, 167, 0.1) !important;
}

.dfButtonSecondary button span {
	color: rgba(46, 63, 167, 1);
}


.slideIn textarea {
	background-color: white;
	border-radius: 8px;
}

.slideIn select {
	background-color: white;
	border-radius: 8px;
}

.slideIn .tagify {
	background-color: white;
	border-radius: 8px;
}

.roundedCell {
	border-radius: 8px;
	overflow: hidden;
}

.paddingRightCell {
	margin-right: 20px;
}

.backgroundedForm {
	background: rgba(217, 217, 217, 0.2) !important;
	border-radius: 8px;
}


.backgroundedForm [data-cell-id='functionForm'] {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.backgroundedForm input {
	background: white;
	border-radius: 8px;
}

.backgroundedForm input[readonly] {
	background: transparent;
}

.backgroundedForm select {
	background-color: white !important;
	border-radius: 8px;
}


.backgroundedForm textarea {
	background-color: white;
	border-radius: 8px;
}

.roundedGrid {
	border: 1px solid rgba(217, 217, 217, 0.4);
	border-radius: 8px;
	margin-bottom: 20px;
}


.toolbarMarginRight {
	margin-right: 50px !important;
}


.transparentBackground,
.transparentBackground * {
	background: transparent !important;
}

.dfToolbar {
	padding-right: 10px;
	padding-left: 10px;
}

.dfToolbarButton button:hover {
	background: transparent !important;
}

.todoFrame {
	border-radius: 8px;
}

.kanbanLayout {
	border-radius: 8px;
}

li.bufferLeft {
	margin-left: 10px;
}
li.bufferRight {
	margin-right: 10px;
}

.bufferLeft {
	margin-left: 10px;
}

.chartsContainer {
	border-radius: 8px;
}

.noBackground {
	background: transparent !important;
}

.transparentAll * {
	background: transparent !important;
}

.noBorderList li {
	border-bottom-color: rgba(0, 0, 0, 0) !important;
}

.noBorderList li:hover {
	background: none !important;
	cursor: default !important;
}

.roundedCell {
	border-radius: 8px;
}


.dfFormButton button {
	background: rgba(46, 63, 167, 0.1) !important;
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	transition: background-color 200ms linear;
}

.dfFormButton span {
	color: rgba(46, 63, 167, 1);
	transition: color 200ms linear;
}

.dfFormButton button:hover {
	background: rgba(46, 63, 167, 0.3) !important;
}

.dfFormButton button:hover span {
	color: black;
}

.dfFormButtonGrey button {
	background: rgba(0, 0, 0, 0.15) !important;
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	transition: background-color 200ms linear;
}

.dfFormButtonGrey span {
	color: rgba(46, 63, 167, 1);
	transition: color 200ms linear;
}

.dfFormButtonGrey button:hover {
	background: rgba(0, 0, 0, 0.1) !important;
}

.dfFormButtonGrey button:hover span {
	color: black;
}

.dfRoundedInput input {
	border-radius: 8px;
}

.dfPasswordWrap {
	position: relative;
}

.dfPasswordWrap input {
	padding-right: 38px;
}

.dfPasswordToggle {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6b7280;
	font-size: 14px;
	z-index: 2;
}

.dfPasswordToggle:hover {
	color: #2e3fa7;
}

.roundGrid {
	border-radius: 8px;
	overflow: hidden;
	/* Lattice draws its own border on the grid root, and its corner radius comes from
	   this variable, which defaults to 0. Rounding the host alone left a square border
	   meeting a rounded clip, which shows as a doubled line at each corner. Handing the
	   grid the same 8px makes its own border curve with ours. Set on the host rather
	   than a descendant so it works whether Lattice adopts this element as the grid
	   root or mounts inside it: custom properties inherit either way. */
	--lattice-grid-radius: 8px;
}

.dfTabbar {
	padding-left: 2px !important;
}

.dfTabbar li {
	padding: 3px;
	box-sizing: border-box;
	height: 39px !important;
	width: auto !important;
}

.dfTabbar li button {
	box-sizing: border-box;
	border: 1px solid transparent;
	height: 100% !important;
	width: auto !important;
	border-radius: 8px;
	padding-top: 7px !important;
	font-size: 11px;
	padding-left: 10px;
	padding-right: 10px;
}

/* Custom tabbar row type (plain HTML, no DHX Tabbar) */
.dfTabbar-header {
	list-style: none;
	display: flex;
	margin: 0 0 5px 0;
	padding: 3px;
	height: 40px;
	border: 1px solid #2e3fa7;
	border-radius: 8px;
	overflow: hidden;
	background-color: white;
	box-sizing: border-box;
}

.dfTabbar-header li {
	padding: 0 3px;
	box-sizing: border-box;
}

.dfTabbar-btn {
	box-sizing: border-box;
	border: 1px solid transparent;
	background: transparent;
	height: 100%;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	color: inherit;
	font-family: inherit;
	display: flex;
	align-items: center;
}

.dfTabbar-btn:hover {
	background: #eef0fb;
}

.dfTabbar-btn--active {
	background: #2e3fa7 !important;
	border: 1px solid #2e3fa7;
	color: white;
}

.dfLayoutCell {
	border-radius: 8px;
}


.projectOverlayLayout {
	background: rgba(217, 217, 217, 0.2) !important;
	border-radius: 8px !important;
}

.roundedLayout {
	border-radius: 8px;
	overflow: hidden;
}


.projectBrief {
	background: rgba(217, 217, 217, 0.2) !important;
	border-radius: 8px !important;
}

.projectBrief > div {
	background-color: transparent;
}

.projectBrief > div > div {
	box-sizing: border-box;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 8px;
}

.projectReqs {
	box-sizing: border-box;
	border-radius: 8px !important;
	border: 1px solid #e0e0e0 !important;
}

.projectOverlayMilestones {
	box-sizing: border-box;
	border-radius: 8px !important;
	border: 1px solid #e0e0e0 !important;
}

.projectOverlayMTP {
	box-sizing: border-box;
	border-radius: 8px !important;
	border: 1px solid #e0e0e0 !important;
	padding: 20px;
}

.gantt-error {
	display: none !important;
}

.ajs-modal {
	/*z-index: 30000 !important;*/
}

.roundFramed {
	background: white;
	border-radius: 8px;
}


.backgroundWhiteCell {
	background: white !important;
}


[data-cell-id='risksStat'] li {
	height: auto !important;
}

[data-cell-id='nextweek'],
[data-cell-id='thisweek'],
[data-cell-id='boardmemberships'],
[data-cell-id='teammemberships'] {
	border-radius: 8px;
	border: 1px solid #dddddd;
	margin-left: 20px;
}


.e-gantt .e-timeline-cell.e-gantt-weekend,
.e-gantt .e-content .e-gantt-weekend {
	background-color: #f2f2f2;
}
[data-cell-id='layoutScroll'] {
	overflow-y: scroll;
}

.complexObjectLayout {
	background-color: rgb(246, 244, 251) !important;
}


.complexToolbar {
	background: transparent !important;
	margin-top: 5px;
}

.complexToolbar .functionToolbar {
	background: transparent !important;
}


.initial-circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #007bff;
	color: white;
	font-weight: bold;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: sans-serif;
}

.complexObjectRow {
	display: flex;
	flex-direction: row;
}

.wrappedForm > div > fieldset > div {
	flex-wrap: wrap !important;
	flex-direction: row !important;
}

.termeditor-container {
	overflow: hidden !important;
}

.ajs-success {
	background-color: rgb(235, 255, 239) !important;
	border: 1px solid #cdcdcd !important;
	border-left: 5px solid rgb(91, 189, 114) !important;
	color: #333333 !important;
	border-radius: 8px;
}

.alertify-notifier .ajs-message:not(.ajs-success):not(.ajs-error):not(.ajs-warning) {
	background-color: var(--df-surface-sunken) !important;
	border: 1px solid var(--df-border) !important;
	border-left: 5px solid var(--df-border) !important;
	color: var(--df-text) !important;
	border-radius: 8px;
}

.ajs-error {
	background-color: rgb(255, 223, 223) !important;
	border: 1px solid #cdcdcd !important;
	border-left: 5px solid rgb(217, 92, 92) !important;
	color: #333333 !important;
	border-radius: 8px;
}

.ajs-warning {
	background-color: rgb(255, 247, 176) !important;
	border: 1px solid #cdcdcd !important;
	border-left: 5px solid rgb(252, 248, 215) !important;
	color: #333333 !important;
	border-radius: 8px;
}

.complex_url_button button {
	margin-top: 25px;
	color: black;
	background-color: white !important;
}

.complex_url_button button span::before {
	font-size: 12px !important;
}

/* Inline input handler buttons (copy / call / sms / send next to phone, email, etc.) */
.df_input_handler_button {
	margin-top: 25px;
}
/* Variant for fields with hideLabel — no label space to skip past */
.df_input_handler_button-bare {
	margin-top: 0 !important;
}
.df_input_handler_button button {
	margin-top: 0 !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1px solid #d0d5dd !important;
	color: #475467 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.df_input_handler_button button:hover {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
	color: #1e293b !important;
}
.df_input_handler_button button:active {
	background: #e2e8f0 !important;
}
.df_input_handler_button button span::before {
	font-size: 15px !important;
}

.combo-separator {
	border-bottom: 1px solid #ccc;
	height: 1px;
	margin: 4px 0;
	pointer-events: none;
}

.createdSlider {
	position: absolute;
	top: 0;
	left: 120vw;
	bottom: 0;
	right: 0;
	z-index: 9999;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease,
		left 0.5s ease;
	overflow: hidden; /* Prevent content from causing page scroll */
}

.createdSlider.active {
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.createdSlider .slideIn {
	left: 120vw;
	transition: left 0.5s ease;
}




/* ---------------------------------------------------------------------------
   Record (complex) editor frame on the Lattice shell
   (defined_object_complex_editor.js). The frame was a DHX Layout; these rules
   take over from the ones that styled its DHX cells, header and close icon
   (.createdSlider > .dhx_layout > .dhx_layout-cell:nth-child(2),
   .slideInObject > .dhx_layout-cell-header..., .dhx_layout-cell-inner_html),
   which stay for the slide-outs still on DHX.
   Cells: em | slideInCell(.slideInObject.complexObjectLayout, header) >
   [projectSidebar | main > [toolbar(.complexToolbar) | complexframe]].
   --------------------------------------------------------------------------- */
.dfComplexEditorFrame {
	width: 100%;
	height: 100%;
	/* What the DHX layout root (.dhx_widget) gave everything inside it, so plain-DOM
	   rows keep the same type. */
	font-family: var(--dhx-font-family);
	font-weight: var(--dhx-font-weight-regular);
	font-size: var(--dhx-font-size-normal);
	line-height: var(--dhx-line-height-normal);
	color: var(--dhx-font-color-primary);
}

.dfComplexEditorFrame > .slideInObject {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	overflow: hidden;
}

.dfComplexEditorFrame > .slideInObject > .lat-shell__header {
	padding: 0;
	background: var(--dhx-background-primary, #fff);
	color: var(--dhx-font-color-primary);
}

/* The panel body scrolls, as the DHX html cell did. */
.dfComplexEditorFrame .dfComplexEditorBody {
	overflow: auto;
}

/* Plain-DOM rows used to sit inside the frame's DHX cell and picked up
   `.dhx_layout-cell h2` (uppercase, padded section titles); keep that look. */
.dfComplexEditorFrame .dfComplexEditorBody h2 {
	text-transform: uppercase;
	padding: 10px 20px 10px 20px;
}

/* ---------------------------------------------------------------------------
   Slide-out (makePopout, core_stack_popout.js) on the Lattice shell. It was a
   DHX Layout; these rules take over from the DHX cell, header and close icon
   rules above (.createdSlider ... .dhx_layout-cell..., [data-cell-id=
   'functionForm'], .dhx_layout-cell-inner_html), which stay for the slide-outs
   still built on DHX. The header and close button share the record editor's
   rules below.
   Cells: em | slideInCell(.slideIn.dfPopoutPanel, header) > the caller's rows
   (default functionForm(.dfPopoutFunctionForm) | functionFormAction).
   --------------------------------------------------------------------------- */
.dfPopoutFrame {
	width: 100%;
	height: 100%;
	/* What the DHX layout root (.dhx_widget) gave everything inside it. */
	font-family: var(--dhx-font-family);
	font-weight: var(--dhx-font-weight-regular);
	font-size: var(--dhx-font-size-normal);
	line-height: var(--dhx-line-height-normal);
	color: var(--dhx-font-color-primary);
}

.dfPopoutFrame > .dfPopoutPanel {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	overflow: hidden;
}

.dfPopoutFrame > .dfPopoutPanel > .lat-shell__header {
	padding: 0;
	background: var(--dhx-background-primary, #fff);
	color: var(--dhx-font-color-primary);
	border-bottom: 1px solid gray;
}

/* The DHX cells were white. */
.dfPopoutFrame > .dfPopoutPanel > .lat-shell__body {
	background: var(--dhx-background-primary, #fff);
}

/* The body cell scrolls its content, as the DHX html cell did. */
.dfPopoutFrame .dfPopoutFunctionForm {
	overflow: auto;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

/* Content used to sit inside DHX cells and picked up `.dhx_layout-cell h2`. */
.dfPopoutFrame h2 {
	text-transform: uppercase;
	padding: 10px 20px 10px 20px;
}

.dfComplexEditorHeader,
.dfPopoutHeader {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	min-width: 0;
}

.dfComplexEditorHeader__title,
.dfPopoutHeader__title {
	margin: 0;
	padding: 10px 10px 0 10px;
	font-size: 18px;
	font-weight: var(--dhx-font-weight-medium, 500);
	line-height: 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	min-width: 0;
}

.dfComplexEditorHeader__close,
.dfPopoutHeader__close {
	appearance: none;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	flex: none;
}

.dfComplexEditorHeader__close::before,
.dfPopoutHeader__close::before {
	content: '\e59b';
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

.dfComplexEditorHeader__close:hover,
.dfPopoutHeader__close:hover {
	color: var(--dhx-color-primary);
}

.dfComplexEditorHeader__close:focus-visible,
.dfPopoutHeader__close:focus-visible {
	outline: 2px solid var(--tocloco-blue, #3041b0);
	outline-offset: 2px;
}

/*
  Workloads overlay: ensure Bryntum Gantt + ResourceUtilization
  stay within the slide-in container without extending and causing scroll.
*/
.workload-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* Bryntum components inside the workload container */
.workload-container > .b-gantt {
	flex: 2 1 0;
	min-height: 0;
	min-width: 0;
}
.workload-container > .b-splitter {
	flex: 0 0 auto;
}
.workload-container > .b-resourceutilization {
	flex: 1 1 0;
	min-height: 0;
	min-width: 0;
}

.teamSummaryHeaders {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px !important;
	display: flex;
	padding-top: 20px;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.no-header .lat-header {
	display: none !important;
}


.stack {
	position: fixed;
	width: 46px;
	height: 100vh;
	top: 0;
	left: -50px;
	border: 1px solid #e0e0e0;
	transition: left 0.5s ease-in-out;
	z-index: 2000000;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	background-color: white;
	overflow: hidden;
}

.stack.visible {
	left: 0;
}

.defined-map .leaflet-popup-content {
	font-size: 11px;
}

.currencySymbol input {
	padding-left: 25px;
}


.noBorder {
	border: none !important;
}


.wrappedForm .e-file-drop {
	display: none !important;
}

.dfHidden {
	display: none;
}

.dfnotes {
	margin-top: 20px;
}

.dfnotes > div {
	margin-bottom: 20px;
	border: 1px solid #d7d2d2;
	padding: 10px;
	border-radius: 8px;
}

.df-defined-editable-cell::after {
	content: '✏️';
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 10px;
	opacity: 0.6;
}

/*
@media only screen and (min-width: 100px) and (max-width: 1110px) {
	body > div {
		zoom: 0.8;
	}
}

@media only screen and (min-width: 1110px) and (max-width: 1300px) {
	body > div {
		zoom: 0.9;
	}
}

@media only screen and (min-width: 1300px) and (max-width: 1500px) {
	body > div {
		zoom: 0.95;
	}
}
*/

.builderLayout {
	background-color: white !important;
	border-radius: 8px;
	border: 1px solid rgb(216, 211, 211);
}

/* ---------------------------------------------------------------------------
   A panel column takes its height from the flex row, so a column holding more
   panels than fit was simply clipped: the content was in the DOM and reachable
   by script, but nothing drew a scrollbar. The DHX scroll-view above it measures
   once at attach time and its runner stays zero-height when panels grow after
   that, so the column scrolls itself instead.

   Only a column whose content actually overflows gains a scrollbar; the rest are
   unaffected.
   --------------------------------------------------------------------------- */
.complexColumn {
	overflow-y: auto;
}


.complexColumn .complexHeader.backgroundTransparent {
	border: 1px solid var(--dhx-border-color, #dfdfdf);
	border-radius: 8px;
	background-color: #fff;
	overflow: hidden;
}

.dfRowVisibilityWrapper {
	height: inherit;
}

.justHeader {
	border: none !important;
	padding: 0 !important;
}


.backgroundComplex {
	background-color: rgba(217, 217, 217, 0.2);
}


.initiative-card {
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.initiative-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
	gap: 10px;
}

.initiative-status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-top: 8px;
	flex-shrink: 0;
}

.initiative-status.status-draft {
	background-color: #6c757d;
}
.initiative-status.status-proposed {
	background-color: #17a2b8;
}
.initiative-status.status-approved {
	background-color: #28a745;
}
.initiative-status.status-in_progress {
	background-color: #ffc107;
}
.initiative-status.status-on_hold {
	background-color: #fd7e14;
}
.initiative-status.status-completed {
	background-color: #20c997;
}
.initiative-status.status-cancelled {
	background-color: #dc3545;
}

.initiative-card h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	flex: 1;
}

.initiative-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.initiative-owner {
	font-size: 13px;
	color: #6c757d;
	display: flex;
	align-items: center;
	gap: 5px;
}

.initiative-dates {
	display: flex;
	gap: 15px;
	font-size: 12px;
	color: #6c757d;
}

.initiative-dates span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.initiative-description {
	font-size: 14px;
	line-height: 1.5;
	color: #495057;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.initiative-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: auto;
}

.metric {
	text-align: center;
	padding: 8px;
	background-color: #f8f9fa;
	border-radius: 4px;
}

.metric-label {
	display: block;
	font-size: 11px;
	color: #6c757d;
	margin-bottom: 2px;
}

.metric-value {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #212529;
}

.initiative-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e9ecef;
}

.initiative-tags {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	flex: 1;
}

.initiative-tags .tag {
	font-size: 11px;
	padding: 2px 8px;
	background-color: #e9ecef;
	border-radius: 12px;
	color: #495057;
}

.initiative-priority {
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 4px;
	white-space: nowrap;
}

.priority-tag {
	display: inline-block;
	padding: 2px 4px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	color: white;
	width: 100%;
	text-align: center;
}

.priority-critical {
	background-color: #dc3545;
	color: white;
}

.priority-high {
	background-color: #fd7e14;
	color: white;
}

.priority-medium {
	background-color: #ffc107;
	color: #212529;
}

.priority-low {
	background-color: #6c757d;
	color: white;
}

.initiative-category {
	font-size: 12px;
	color: #6c757d;
	font-style: italic;
}

.objectFiles {
	background-color: white !important;
	border: 1px solid rgb(216, 211, 211);
}

div .e-custom-item {
	width: 100% !important;
}

.singleRowNoMargin fieldset {
	margin-bottom: 0 !important;
}


.dropdown-cell {
	position: relative;
	cursor: pointer !important;
	padding-right: 20px !important; /* Make room for the icon */
}

.dropdown-cell::after {
	content: '▼';
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	color: #666;
	font-size: 10px;
	pointer-events: none;
}

.dropdown-cell:hover::after {
	color: #333;
}

.fullHeight > div {
	height: 100%;
}

.nopad > fieldset,
.nopad > fieldset > legend {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.nopad > fieldset > div {
	padding: 0 !important;
}

.layoutSpaced {
	justify-content: space-between;
}

.statbox {
	padding: 20px;
	border-radius: 8px !important;
	height: 100%;
	border-style: solid;
	border-width: 1px;
	display: flex;
	flex-direction: column;
	/*justify-content: space-between;*/
}

.statbox span:first-child {
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 50px;
}

.statbox span:nth-child(2) {
	font-weight: bold;
	font-size: 200%;
	margin-bottom: 10px;
	text-align: center;
}

.statbox span:nth-child(3) {
	text-align: right;
}

.globalsearch input {
	border-radius: 6px;
}

.globalsearch * {
	color: #333333 !important;
}

#pill-highlight {
	transition:
		left 0.1s ease,
		width 0.1s ease;
	box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

.splitDiv {
	display: flex;
	flex-direction: row;
}

.circle-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50% !important;
	gap: 10px;
}

.circle {
	width: 50px !important;
	height: 50px !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.circleLabel {
	color: var(--textColor, #333);
}
.circleRow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.df-sidebar {
	width: 240px;
	background-color: #111827; /* dark slate */
	color: white;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: width 0.3s ease;
}

.df-sidebar.collapsed {
	width: 64px;
}

.df-sidebar-header {
	display: flex;
	align-items: center;
	padding: 1rem;
	background-color: #1f2937;
	border-bottom: 1px solid #374151;
}

.df-sidebar-logo {
	width: 24px;
	height: 24px;
	margin-right: 8px;
}

.df-sidebar-title {
	font-weight: 600;
	font-size: 1.1rem;
	transition: opacity 0.2s ease;
}

.df-sidebar.collapsed .df-sidebar-title {
	opacity: 0;
	pointer-events: none;
}

.df-sidebar-content {
	flex: 1;
	overflow-y: auto;
}

.df-sidebar-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-sidebar-menu li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	cursor: pointer;
	transition: background 0.2s;
}

.df-sidebar-menu li:hover {
	background: #374151;
}

.df-sidebar-menu li.active {
	background: #2563eb;
}

.df-sidebar.collapsed li span {
	display: none;
}

.df-sidebar-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1f2937;
	padding: 0.75rem;
}

.df-sidebar-toggle {
	background: none;
	border: none;
	color: white;
	font-size: 20px;
	cursor: pointer;
}

.df-resource-detail-grid {
	height: 110px !important;
	min-height: 110px !important;
	max-height: 110px !important;
}

.fontawesome-combo .icon-option {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}
.fontawesome-combo .icon-option i {
	font-size: 18px;
	width: 24px;
	text-align: center;
}

.frontDoorGrid {
	padding: 20px;
	display: flex;
	height: 100%;
	cursor: pointer;
}
.frontDoorGrid > div:first-child {
	width: 75%;
	flex-direction: column;
	height: 100%;
	display: flex;
	justify-content: center;
	height: 100%;
}

.frontDoorGrid > div:first-child > div {
	display: flex;
	width: 100%;
}

.frontDoorGrid > div:nth-of-type(2) {
	width: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.frontDoorGrid > div:nth-of-type(2) span {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.frontDoorGrid .hero {
	font-size: 130%;
	font-weight: bold;
}

.angelStats {
	padding: 20px;
	display: flex;
	height: 100%;
}
.angelStats > div:first-child {
	width: 75%;
	flex-direction: column;
	height: 100%;
	display: flex;
	justify-content: center;
	height: 100%;
}

.angelStats > div:first-child > div {
	display: flex;
	width: 100%;
}

.angelStats > div:nth-of-type(2) {
	width: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.angelStats > div:nth-of-type(2) span {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.angelStats .hero {
	font-size: 200%;
	font-weight: bold;
}

.angelDash3Col {
	display: flex;
	margin-top: 10px;
}

.angelDash3Col > div:first-child {
	width: 60px;
}

.angelDash3Col > div:first-child span {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #009200;
	color: white;
	font-weight: bold;
}

.angelDash3Col > div:nth-of-type(2) {
	font-weight: bold;
	width: calc(100% - 160px);
}

.angelDash3Col > div:nth-of-type(2) span {
	font-weight: normal;
}

.angelDash3Col > div:nth-of-type(3) {
	font-weight: bold;
	color: #009200;
	width: 100px;
}

.dfFormHeader {
	font-size: 16px;
	display: flex;
	justify-content: space-between;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: bold;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e0e0e0;
}

.dfFormHeader i {
	color: var(--tocloco-blue);
	font-size: 20px !important;
}

.dfFormHeader:has(+ .dfFormSubheader) {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.dfFormSubheader {
	padding-left: 5px;
	font-size: 13px;
	color: #666;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e0e0e0;
}


.dfc-sidebar {
	--dfc-accent: var(--df-accent);
}

.dfc-sidebar .dfc-sidebar__item--selected .dfc-sidebar__icon > span {
	color: white !important;
}

.highlightPanel {
	background-color: var(--tocloco-blue);
	color: white;
}

.highlightPanel * {
	background-color: var(--tocloco-blue);
	color: white;
}


#chatHost .dfc-chat {
	height: 100%;
}
#chatHost .df-open-shared-wrap {
	margin-top: 4px;
}
#chatHost .is-mine .df-open-shared {
	color: #fff;
	text-decoration: underline;
}

/* shared link styling (optional) */
#chatHost .df-open-shared {
	text-decoration: none;
	font-weight: 600;
}
#chatHost .df-open-shared:hover {
	text-decoration: underline;
}

/* Deal Report */
.dealReport {
	padding: 20px;
	overflow-y: auto;
	height: calc(100vh - 180px);
}
.dealReport-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--tocloco-blue);
}
.dealReport-headerLeft h1 {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 700;
	color: #1e293b;
}
.dealReport-headerLeft p {
	margin: 0;
	font-size: 13px;
	color: #64748b;
}
.dealReport-headerRight {
	text-align: right;
	font-size: 12px;
	color: #64748b;
	line-height: 1.6;
}
.dealReport-cols {
	display: flex;
	gap: 24px;
}
.dealReport-left {
	width: 40%;
}
.dealReport-right {
	width: 60%;
}
.dealReport-sectionHeader {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: var(--tocloco-blue);
	padding: 8px 12px;
	border-radius: 6px 6px 0 0;
	margin-bottom: 0;
	letter-spacing: 0.5px;
}
.dealReport-sectionHeader i {
	margin-right: 8px;
}
.dealReport-section {
	margin-bottom: 16px;
}
.dealReport-sectionBody {
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-top: none;
	border-radius: 0 0 6px 6px;
	padding: 14px;
}
.dealReport-stage {
	background: #fff;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 10px;
	border: 1px solid #e2e8f0;
}
.dealReport-stageHeader {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.dealReport-stageNum {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tocloco-blue);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.dealReport-stageName {
	font-weight: 600;
	font-size: 13px;
	flex-grow: 1;
}
.dealReport-stageScore {
	font-weight: 700;
	font-size: 13px;
	color: var(--tocloco-blue);
}
.dealReport-stageFields {
	padding-left: 36px;
}
.dealReport-field {
	display: flex;
	justify-content: space-between;
	padding: 2px 0;
	font-size: 12px;
	color: #64748b;
}
.dealReport-fieldScore {
	font-weight: 600;
	color: #334155;
}
.dealReport-stageBar {
	height: 5px;
	background: #e2e8f0;
	border-radius: 3px;
	margin-top: 8px;
	overflow: hidden;
}
.dealReport-stageBarFill {
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, #22c55e, #16a34a);
	transition: width 0.6s ease;
}
.dealReport-stagePercent {
	text-align: right;
	font-size: 11px;
	font-weight: 600;
	color: #16a34a;
	margin-top: 3px;
}
.dealReport-detail {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13px;
}
.dealReport-detail:last-child {
	border-bottom: none;
}
.dealReport-detailLabel {
	font-weight: 600;
	color: #334155;
}
.dealReport-detailValue {
	color: #64748b;
	text-align: right;
	max-width: 65%;
}
.dealReport-summaryGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.dealReport-highlights h4,
.dealReport-weakpoints h4 {
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.dealReport-highlights h4 {
	color: #16a34a;
}
.dealReport-weakpoints h4 {
	color: #dc2626;
}
.dealReport-highlights ul,
.dealReport-weakpoints ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.dealReport-highlights li,
.dealReport-weakpoints li {
	padding: 3px 0;
	font-size: 12px;
	color: #475569;
}
.dealReport-highlights li::before {
	content: '+ ';
	color: #16a34a;
	font-weight: 700;
}
.dealReport-weakpoints li::before {
	content: '- ';
	color: #dc2626;
	font-weight: 700;
}
.dealReport-configGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.dealReport-configGrid .dealReport-detail {
	padding: 5px 8px;
}
.dealReport-readinessRow {
	display: flex;
	gap: 16px;
}
.dealReport-readinessChart {
	flex: 1;
}
.dealReport-valuator {
	flex: 1;
}
.dealReport-valuatorRow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}
.dealReport-valuatorLabel {
	width: 120px;
	font-size: 12px;
	font-weight: 500;
	color: #334155;
	flex-shrink: 0;
}
.dealReport-valuatorBar {
	flex-grow: 1;
	height: 8px;
	background: #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
}
.dealReport-valuatorBarFill {
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, #3b82f6, #2563eb);
	transition: width 0.6s ease;
}
.dealReport-valuatorScore {
	width: 30px;
	text-align: right;
	font-size: 12px;
	font-weight: 600;
	color: #334155;
}

.backgroundWhiteCell {
	background: white !important;
}

.dfFormButton button {
	background: rgba(46, 63, 167, 0.1);
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
}

.dfFormButton button:hover {
	background: rgba(46, 63, 167, 0.3);
}

/* ============ Room Map 3D Visualization ============ */

.roommap-rack-label {
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 5px;
	background: rgba(255, 255, 255, 0.88);
	border-radius: 3px;
	border: 1px solid #bbb;
	white-space: nowrap;
	pointer-events: none;
	line-height: 1.2;
}

.roommap-grid-label {
	color: #888;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 11px;
	font-weight: 500;
	pointer-events: none;
}

.roommap-selection-rect {
	position: absolute;
	border: 2px dashed var(--tocloco-blue);
	background: rgba(48, 65, 176, 0.1);
	pointer-events: none;
	z-index: 10;
}

.roommap-legend {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 6px 12px;
	font-size: 12px;
	color: #666;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.roommap-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.roommap-legend-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid #ccc;
	flex-shrink: 0;
}

.roommap-context-menu {
	position: fixed;
	z-index: 10000001;
	min-width: 200px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
	padding: 6px 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 13px;
}

.roommap-context-header {
	padding: 8px 14px 4px;
	font-weight: 600;
	font-size: 14px;
	color: #222;
	border-bottom: 1px solid #eee;
	margin-bottom: 4px;
}

.roommap-context-info {
	padding: 2px 14px 6px;
	font-size: 11px;
	color: #888;
}

.roommap-context-item {
	padding: 7px 14px;
	cursor: pointer;
	color: #333;
	display: flex;
	align-items: center;
	gap: 8px;
}

.roommap-context-item:hover {
	background: #f0f4ff;
	color: #1565c0;
}

.roommap-context-item i {
	width: 16px;
	text-align: center;
}

.dfc-sidebar__item.df-sidebar-separator {
	border-top: 1px solid #ddd;
	margin-top: 8px;
	padding-top: 8px;
}

.dfc-sidebar .dfc-sidebar__item.df-sidebar-section-header {
	border-top: 1px solid #aaa;
	margin-top: 12px;
	padding: 8px 10px;
	background: #d9d9f7;
	color: #333;
	pointer-events: none;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 -12px 0 0 #fff;
}

.dfc-sidebar .dfc-sidebar__item.df-sidebar-section-header.df-sidebar-section-header--blue {
	background: #c5dbf5;
	color: #0c447c;
}

/* ── Grid Popup Timeline ────────────────────────────────────── */

.df-grid-popup {
	position: fixed;
	z-index: 10000;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	padding: 16px 20px;
	min-width: 200px;
	max-width: 320px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease-out;
}

.df-grid-popup.visible {
	opacity: 1;
}

.df-grid-popup-header {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.df-grid-popup-header i {
	color: #666;
}

.df-grid-popup-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}

.df-grid-popup-step {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	padding: 4px 0;
}

.df-grid-popup-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #ccc;
	background: #fff;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* Connecting line between dots */
.df-grid-popup-step:not(:last-child) .df-grid-popup-dot::after {
	content: '';
	position: absolute;
	top: 12px;
	left: 3px;
	width: 2px;
	height: calc(100% + 8px);
	background: #ddd;
}

.df-grid-popup-step.completed .df-grid-popup-dot::after {
	background: #22c55e;
}

.df-grid-popup-step span {
	font-size: 12px;
	color: #888;
	line-height: 1.3;
}

/* Completed steps */
.df-grid-popup-step.completed .df-grid-popup-dot {
	border-color: #22c55e;
	background: #22c55e;
}

.df-grid-popup-step.completed span {
	color: #555;
}

/* Active (current) step */
.df-grid-popup-step.active .df-grid-popup-dot {
	border-color: #22c55e;
	background: #22c55e;
	width: 14px;
	height: 14px;
	margin-left: -1px;
	margin-right: -1px;
}

.df-grid-popup-step.active span {
	color: #111;
	font-weight: 600;
}

/* Gallery view search */
.dfGallerySearch {
	display: flex;
	align-items: center;
	padding: 12px 16px 0;
	position: relative;
}

.dfGallerySearch__icon {
	position: absolute;
	left: 28px;
	color: #94a3b8;
	font-size: 14px;
	pointer-events: none;
}

.dfGallerySearch__input {
	width: 300px;
	padding: 8px 12px 8px 32px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s;
}

.dfGallerySearch__input:focus {
	border-color: #6366f1;
}

/* Gallery view cards */
.dfGalleryGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	padding: 16px;
	overflow-y: auto;
	height: calc(100% - 48px);
	align-content: start;
}

.dfGalleryCard {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: box-shadow 0.15s, border-color 0.15s;
	cursor: pointer;
	overflow: hidden;
}

.dfGalleryCard:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	border-color: #c7d2fe;
}

.dfGalleryCard__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #f1f5f9;
	overflow: hidden;
}

.dfGalleryCard__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dfGalleryCard__tag {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(99, 102, 241, 0.85);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	line-height: 1.4;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dfGalleryCard__info {
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dfGalleryCard__name {
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.dfGalleryCard__ext {
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
	text-transform: uppercase;
	flex-shrink: 0;
}

.dfGalleryCard--selected {
	border-color: #6366f1;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dfGalleryCard__text {
	font-size: 12px;
	color: #475569;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.dfGalleryCard__tooltip {
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	max-width: 300px;
	padding: 8px 12px;
	background: #1e293b;
	color: #f8fafc;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	z-index: 100;
	word-break: break-word;
	pointer-events: none;
}

.dfGalleryCard:hover .dfGalleryCard__tooltip {
	display: block;
}

.dfFormHeader span {
	color: var(--tocloco-blue) !important;
}

/* Enhanced Files Row Type */
.enhancedfiles-upload-zone {
	border: 2px dashed #CBD5E1;
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	background: #F8FAFC;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.enhancedfiles-upload-zone:hover {
	border-color: #3B82F6;
	background: #EFF6FF;
}

.enhancedfiles-drag-over {
	border-color: #3B82F6 !important;
	background: #DBEAFE !important;
	border-style: solid !important;
}

.enhancedfiles-uploading {
	opacity: 0.6;
	pointer-events: none;
}

.enhancedfiles-download-btn:hover {
	background: #2563EB !important;
}

.enhancedfiles-delete-btn:hover {
	color: #EF4444 !important;
}

@keyframes dfSpin {
	to { transform: rotate(360deg); }
}
.df-login-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #e0e0e0;
	border-top-color: var(--tocloco-blue);
	border-radius: 50%;
	animation: dfSpin 0.8s linear infinite;
}


/* ─────────────────────────────────────────────
   heroSummary row type
   ───────────────────────────────────────────── */

.heroSummary-card {
	padding: 22px 22px 18px;
	border-radius: 8px;
	border: 1px solid rgb(216, 211, 211);
	margin-bottom: 12px;
	position: relative;
	transition: opacity 180ms ease, transform 180ms ease;
}

/* Backgrounds */
.heroSummary-bg-white  { background: #fff; }
.heroSummary-bg-subtle { background: linear-gradient(180deg, #f8fafc 0%, #fff 60%); }
.heroSummary-bg-brand  { background: linear-gradient(180deg, rgba(48,65,176,0.04) 0%, #fff 60%); }

/* Main layout: avatar + content + actions */
.heroSummary-main {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

/* Avatar */
.heroSummary-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	font-weight: 600;
	letter-spacing: 0.5px;
	user-select: none;
}
.heroSummary-avatar-initials {
	font-family: inherit;
}
.heroSummary-avatar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Content column */
.heroSummary-content {
	flex: 1;
	min-width: 0;
}

/* Title + tags row — title on top, tags always wrapped below for visual
   consistency regardless of viewport width. */
.heroSummary-titleTagRow {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
}

.heroSummary-titleRegion {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	max-width: 720px;
}

.heroSummary-titleText {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	max-width: 100%;
	display: inline-block;
}

.heroSummary-titleInput {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: #0f172a;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 2px 6px;
	margin: -2px -6px;
	background: transparent;
	outline: none;
	width: 100%;
	min-width: 120px;
	text-overflow: ellipsis;
	transition: border-color 150ms ease, background 150ms ease;
}
.heroSummary-titleInput:hover {
	border-color: #e2e8f0;
	background: #f8fafc;
}
.heroSummary-titleInput-focused,
.heroSummary-titleInput:focus {
	border-color: var(--tocloco-blue);
	background: #fff;
	box-shadow: 0 0 0 2px rgba(48, 65, 176, 0.12);
}

.heroSummary-titleAffix {
	font-size: 22px;
	font-weight: 400;
	color: #94a3b8;
	letter-spacing: -0.3px;
	white-space: nowrap;
}

/* Subtitle */
.heroSummary-subtitle {
	font-size: 13px;
	color: #64748b;
	line-height: 1.4;
	margin-bottom: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Tags */
.heroSummary-tags {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.heroSummary-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	user-select: none;
}

/* Meta strip */
.heroSummary-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.heroSummary-metaItem {
	display: flex;
	align-items: center;
	gap: 5px;
}
.heroSummary-metaLabel {
	font-size: 11px;
	font-weight: 500;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.heroSummary-metaValue {
	font-size: 11px;
	font-weight: 600;
	color: #334155;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.heroSummary-metaCode {
	font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
	font-size: 11px;
	color: #64748b;
	background: #f1f5f9;
	padding: 1px 6px;
	border-radius: 3px;
}
.heroSummary-metaTag {
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 10px;
}
.heroSummary-metaSuffix {
	color: #94a3b8;
	font-weight: 400;
	margin-left: 2px;
}
.heroSummary-metaValue--warning {
	color: rgb(165, 80, 30);
}
.heroSummary-metaValue--danger {
	color: rgb(165, 42, 42);
}
.heroSummary-metaValue--empty {
	color: #cbd5e1;
	font-weight: 400;
}
.heroSummary-metaUserAvatar {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
}

/* Actions */
.heroSummary-actions {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
	padding-top: 2px;
}
.heroSummary-actionBtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: #334155;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 120ms ease, border-color 120ms ease;
}
.heroSummary-actionBtn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}
.heroSummary-actionBtn-primary {
	background: var(--tocloco-blue);
	color: #fff;
	border-color: var(--tocloco-blue);
}
.heroSummary-actionBtn-primary:hover {
	background: #2a369e;
	border-color: #2a369e;
}
.heroSummary-actionBtn-iconOnly {
	padding: 7px 10px;
	gap: 0;
	min-width: 34px;
	justify-content: center;
}
.heroSummary-actionBtn-iconOnly i {
	margin: 0;
}
.heroSummary-actionBtn--success {
	background: rgb(34, 140, 84);
	color: #fff;
	border-color: rgb(34, 140, 84);
}
.heroSummary-actionBtn--success:hover {
	background: rgb(26, 110, 66);
	border-color: rgb(26, 110, 66);
}
.heroSummary-actionBtn--danger {
	background: rgb(180, 60, 60);
	color: #fff;
	border-color: rgb(180, 60, 60);
}
.heroSummary-actionBtn--danger:hover {
	background: rgb(150, 40, 40);
	border-color: rgb(150, 40, 40);
}

/* Action overflow dropdown */
.heroSummary-actionMoreWrapper {
	position: relative;
}
.heroSummary-actionMore {
	padding: 7px 10px;
	font-size: 16px;
	letter-spacing: 2px;
}
.heroSummary-actionDropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	z-index: 100;
	min-width: 180px;
}
.heroSummary-actionDropdownItem {
	padding: 8px 14px;
	font-size: 12px;
	color: #334155;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.heroSummary-actionDropdownItem:hover {
	background: #f8fafc;
}
.heroSummary-actionDropdownItem:first-child {
	border-radius: 8px 8px 0 0;
}
.heroSummary-actionDropdownItem:last-child {
	border-radius: 0 0 8px 8px;
}

/* Extension strip */
.heroSummary-extension {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 22px;
	margin: 14px -22px -18px;
	border-top: 1px solid #e2e8f0;
	border-radius: 0 0 8px 8px;
	background: #f8fafc;
}
.heroSummary-extension[hidden] {
	display: none;
}
.heroSummary-extLeft {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.heroSummary-extRight {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.heroSummary-extHeader {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
}
.heroSummary-extSubheader {
	font-size: 11px;
	color: #64748b;
}
.heroSummary-extBadge {
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	background: #e2e8f0;
	padding: 2px 8px;
	border-radius: 10px;
}
.heroSummary-extAction {
	font-size: 11px;
	padding: 5px 12px;
}

/* Score strip extension */
.heroSummary-scoreStrip {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: nowrap;
}
.heroSummary-scoreTile {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 12px;
	border-right: 1px solid #e2e8f0;
}
.heroSummary-scoreTile:last-child {
	border-right: none;
}
.heroSummary-scoreTileLabel {
	font-size: 10px;
	font-weight: 500;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 2px;
}
.heroSummary-scoreTileValue {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
}

/* Pipeline strip extension — horizontal stage pills for DEAL hero */
.heroSummary-pipelineStrip {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	flex-wrap: wrap;
}
.heroSummary-pipelinePill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	border: 1px solid transparent;
}
.heroSummary-pipelinePill--done {
	background: rgba(34, 140, 84, 0.12);
	color: rgb(26, 95, 60);
	border-color: rgba(34, 140, 84, 0.25);
}
.heroSummary-pipelinePill--current {
	background: rgb(46, 63, 167);
	color: #fff;
	border-color: rgb(46, 63, 167);
}
.heroSummary-pipelinePill--future {
	background: #f1f5f9;
	color: #94a3b8;
	border-color: #e2e8f0;
}
.heroSummary-pipelinePill--terminal {
	background: rgba(120, 120, 120, 0.12);
	color: rgb(70, 70, 70);
	border-color: rgba(120, 120, 120, 0.25);
	font-style: italic;
}
.heroSummary-pipelinePillDuration {
	font-size: 10px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.25);
	padding: 1px 6px;
	border-radius: 8px;
}
.heroSummary-pipelineSep {
	width: 6px;
	height: 1px;
	background: #cbd5e1;
}

/* Compact sticky header */
.heroSummary-compact {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 8px 22px;
	background: #fff;
	border-bottom: 1px solid #e2e8f0;
	position: sticky;
	top: 0;
	z-index: 10;
	height: 56px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 180ms ease, transform 180ms ease;
}
.heroSummary-compact-visible {
	opacity: 1;
	transform: translateY(0);
}
.heroSummary-compactTitle {
	font-size: 15px;
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.heroSummary-card-collapsed {
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	max-height: 0;
	overflow: hidden;
	padding: 0 22px;
	margin: 0;
}

/* heroSummary — idStack avatar variant (ref pill + epic pill) */
.heroSummary-idStack {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 90px;
	min-width: 90px;
	flex-shrink: 0;
}
.heroSummary-idStackRef {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	background: #f1f5f9;
	color: #475569;
	border-radius: 4px;
	padding: 3px 6px;
	text-align: center;
}
.heroSummary-idStackEpic {
	font-size: 10px;
	font-weight: 500;
	background: #ede9fe;
	color: #6d28d9;
	border-radius: 4px;
	padding: 3px 6px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.heroSummary-idStackEpic--empty {
	background: #f8fafc;
	color: #94a3b8;
	font-style: italic;
}

/* heroSummary — conditional banner (e.g. blocked notice) */
.heroSummary-bannerSlot { display: block; }
.heroSummary-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	margin-top: 10px;
}
.heroSummary-banner--warn   { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.heroSummary-banner--danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.heroSummary-banner--info   { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.heroSummary-bannerText { flex: 1; }
.heroSummary-bannerAction {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 6px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	flex-shrink: 0;
}
.heroSummary-bannerAction:hover { background: rgba(0, 0, 0, 0.05); }

/* heroSummary — pipelineStrip: completed check, clickable + warn states */
.heroSummary-pipelinePillCheck { margin-right: 5px; font-size: 10px; }
.heroSummary-pipelinePill--clickable { cursor: pointer; }
.heroSummary-pipelinePill--clickable:hover { filter: brightness(0.96); }
.heroSummary-pipelinePill--warn { box-shadow: inset 0 0 0 2px #fbbf24; }
.heroSummary-metaValue--empty { font-style: italic; }

/* ─────────────────────────────────────────────
   consentBanner row type
   ───────────────────────────────────────────── */

.consentBanner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 22px;
	margin-bottom: 22px;
	border-radius: 10px;
	background: #fbf3e2;
	border: 1px solid #ebd9b3;
	color: #6a4a17;
}
.consentBanner-left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.consentBanner-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #efc97a;
	color: #7a4f0e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.consentBanner-text { min-width: 0; }
.consentBanner-header {
	font-size: 15px;
	font-weight: 600;
	color: #4a350a;
	line-height: 1.3;
}
.consentBanner-subheader {
	font-size: 13px;
	color: #8b6c2a;
	line-height: 1.4;
	margin-top: 2px;
}
.consentBanner-toggles {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.consentBanner-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 90px;
}
.consentBanner-toggleLabel {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	color: #6f5a2c;
	text-align: center;
}
.consentBanner-toggleState {
	font-size: 12px;
	color: #6f5a2c;
	text-align: center;
}
.consentBanner-switch {
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #e8d6a8;
	border: 1px solid #d8c386;
	position: relative;
	padding: 0;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease;
}
.consentBanner-switch:disabled { cursor: wait; opacity: 0.7; }
.consentBanner-switchThumb {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.18);
	transition: transform 160ms ease;
}
.consentBanner-switch-on {
	background: #b6dfb6;
	border-color: #7fbf7f;
}
.consentBanner-switch-on .consentBanner-switchThumb {
	transform: translateX(20px);
}
.consentBanner-toggle-negative .consentBanner-switch-on {
	background: #f1b8b8;
	border-color: #d77f7f;
}

/* Unknown / not-reviewed state */
.consentBanner-switch-unknown {
	background: #ece1c5;
	border-color: #d6c69c;
	border-style: dashed;
}
.consentBanner-switch-unknown .consentBanner-switchThumb {
	transform: translateX(10px);
	background: #f0e7d0;
	box-shadow: none;
	opacity: 0.85;
}
.consentBanner-toggleState-unknown {
	font-style: italic;
	color: #a08552;
}

/* "Review needed" pill in the header */
.consentBanner-reviewPill {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #d97706;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Field-left icon (rendered when a form field has an `icon` property) */
.df_field_left_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	margin-top: 25px;
	color: #64748b;
	font-size: 18px;
}
.df_field_left_icon i {
	line-height: 1;
}
/* Variant for fields with hideLabel — no label space to skip past */
.df_field_left_icon-bare {
	margin-top: 0;
}
/* Lattice gives the input in an icon row a 100% basis, which wrapped it below the icon.
   The input (and any field beside the icon) takes the remaining width instead, as in DHX. */
.lat-form__cols:has(> .lat-form__item .df_field_left_icon) > .lat-form__item:not(:has(.df_field_left_icon)):not(:has(.df_group_pill)) {
	flex: 1 1 0;
	min-width: 0;
}

/* Activity timeline row type — chronological feed of ACTIVITY records */
.activityTimeline {
	padding: 4px 0;
}
.actTimeline-item {
	display: flex;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid #eef0f3;
	cursor: pointer;
	transition: background 100ms ease;
}
.actTimeline-item:last-child { border-bottom: none; }
.actTimeline-item:hover { background: #f8fafc; }
.actTimeline-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}
.actTimeline-body { flex: 1; min-width: 0; }
.actTimeline-header {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.actTimeline-type {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #64748b;
}
.actTimeline-name {
	font-size: 14px;
	font-weight: 500;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
.actTimeline-status {
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	background: #f1f5f9;
	color: #475569;
}
.actTimeline-status-completed { background: #dcfce7; color: #15803d; }
.actTimeline-status-cancelled { background: #fee2e2; color: #b91c1c; }
.actTimeline-status-planned   { background: #dbeafe; color: #1d4ed8; }
.actTimeline-meta {
	font-size: 12px;
	color: #94a3b8;
	margin-top: 2px;
}
.actTimeline-notes {
	font-size: 13px;
	color: #475569;
	margin-top: 6px;
	line-height: 1.4;
	white-space: pre-wrap;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Group preference pills (e.g. Primary on work vs personal phone) */
.df_group_pill {
	margin-top: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4px;
	cursor: pointer;
	border: 1px solid transparent;
	height: 36px;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.df_group_pill-primary {
	background: #3041b0;
	color: #fff;
	border-color: #3041b0;
}
.df_group_pill-primary:hover {
	background: #283a99;
}
.df_group_pill-secondary {
	background: #fff;
	color: #64748b;
	border-color: #d0d5dd;
}
.df_group_pill-secondary:hover {
	background: #f1f5f9;
	color: #1e293b;
	border-color: #94a3b8;
}


/* Chips field — pill-button picker for indexedSelect-style options. */
.dfChipsContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 32px;
	margin-bottom: 12px;
}
.dfChipsContainer .dfChip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background: #ffffff;
	color: #374151;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dfChipsContainer .dfChip:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
}
.dfChipsContainer .dfChip i {
	font-size: 12px;
	width: 14px;
	text-align: center;
}
.dfChipsContainer .dfChip--selected {
	background: #e0e7ff;
	border-color: #6366f1;
	color: #3730a3;
}
.dfChipsContainer .dfChip--selected:hover {
	background: #c7d2fe;
	border-color: #4f46e5;
}
.dfChipsContainer .dfChip--disabled {
	cursor: not-allowed;
	opacity: 0.6;
}
.dfChipsContainer .dfChip--disabled:hover {
	background: #ffffff;
	border-color: #d1d5db;
}

/* Compact deal health panel — replaces the legacy radial gauge with a score
   + 4-factor breakdown. Aggregate score on the left, factor list on the right. */
.dealHealthCompact {
	display: flex;
	height: 100%;
	gap: 16px;
	padding: 12px;
	box-sizing: border-box;
	align-items: stretch;
}
.dealHealthCompact-aggregate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 10px;
	min-width: 90px;
}
.dealHealthCompact-aggregate--success { background: rgba(34, 140, 84, 0.12); color: rgb(26, 95, 60); }
.dealHealthCompact-aggregate--warning { background: rgba(165, 80, 30, 0.12); color: rgb(140, 65, 20); }
.dealHealthCompact-aggregate--danger { background: rgba(165, 42, 42, 0.12); color: rgb(140, 30, 30); }
.dealHealthCompact-score { font-size: 32px; font-weight: 700; line-height: 1; }
.dealHealthCompact-aggLabel { font-size: 11px; font-weight: 500; margin-top: 4px; text-align: center; }
.dealHealthCompact-factors { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dealHealthCompact-factor {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
}
.dealHealthCompact-factorLabel { color: #64748b; }
.dealHealthCompact-factorValue { font-weight: 600; }
.dealHealthCompact-factorValue--success { color: rgb(26, 95, 60); }
.dealHealthCompact-factorValue--warning { color: rgb(140, 65, 20); }
.dealHealthCompact-factorValue--danger { color: rgb(140, 30, 30); }
.dealHealthCompact-factorValue--neutral { color: #94a3b8; }

/* Next best action panel — headline + suggestion + action buttons. */
.dealNextAction {
	display: flex;
	flex-direction: column;
	padding: 12px;
	box-sizing: border-box;
	gap: 8px;
}
.dealNextAction-headline {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
}
.dealNextAction-suggestion {
	font-size: 12px;
	color: #475569;
	line-height: 1.4;
}
.dealNextAction-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dealNextAction-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #334155;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 12px;
	cursor: pointer;
	transition: background 150ms, border-color 150ms;
}
.dealNextAction-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}
.dealNextAction-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 8px;
	color: #94a3b8;
	font-size: 13px;
}
.dealNextAction-empty i {
	font-size: 24px;
	color: rgb(34, 140, 84);
}
/* Flash highlight applied to a form-group when openContactPicker fires.
   Two-second pulse around the field so the user can find what to fill in. */
.dealNextAction-highlight {
	animation: dealNextActionHighlight 2s ease-out;
	border-radius: 6px;
}
@keyframes dealNextActionHighlight {
	0%   { box-shadow: 0 0 0 3px rgba(46, 63, 167, 0.55); background: rgba(46, 63, 167, 0.08); }
	60%  { box-shadow: 0 0 0 3px rgba(46, 63, 167, 0.25); background: rgba(46, 63, 167, 0.04); }
	100% { box-shadow: 0 0 0 0 rgba(46, 63, 167, 0);    background: transparent; }
}

/* highlightIfEmpty form field — applied when a field has highlightIfEmpty:true
   in the entity definition AND the value is null/empty. Tones the label and
   input border in warning amber to flag a missing-but-expected value. */
.df-form-empty-warning label {
	color: rgb(165, 80, 30) !important;
	font-weight: 600;
}

/* ── Approvals view ─────────────────────────────────────────────── */
#approvalControls {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 40px;
	padding: 0 4px 6px 4px;
}
.approvalTabs {
	display: flex;
	gap: 6px;
}
.approvalTab {
	border: none;
	background: transparent;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	color: #475569;
	display: flex;
	align-items: center;
	gap: 6px;
}
.approvalTab:hover {
	background: #f1f5f9;
}
.approvalTabActive {
	background: #e0e7ff;
	color: #3730a3;
	font-weight: 600;
}
.approvalTabCount {
	background: rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: 0 7px;
	font-size: 11px;
	line-height: 18px;
	min-width: 18px;
	text-align: center;
}
.approvalTabActive .approvalTabCount {
	background: #c7d2fe;
}
.approvalBulk {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.approvalBulkLabel {
	font-size: 13px;
	color: #334155;
}
.approvalBulkBtn,
.approvalActionBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid #d6dde6;
	background: #fff;
	border-radius: 7px;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #475569;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.approvalBulkBtn:hover,
.approvalActionBtn:hover {
	background: #f1f5f9;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.approvalActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 100%;
}
.approvalApprove {
	border-color: #bbf7d0;
	background: #f0fdf4;
	color: #15803d;
}
.approvalApprove:hover {
	background: #16a34a;
	border-color: #16a34a;
	color: #fff;
}
.approvalReject {
	border-color: #fecaca;
	background: #fef2f2;
	color: #b91c1c;
}
.approvalReject:hover {
	background: #dc2626;
	border-color: #dc2626;
	color: #fff;
}
.approvalStatusApproved {
	color: #16a34a;
	font-weight: 600;
}
.approvalStatusRejected {
	color: #dc2626;
	font-weight: 600;
}
.approvalStatusPending {
	color: #d97706;
	font-weight: 600;
}
.approvalDetail {
	padding: 16px 20px;
	background: #f8fafc;
	font-size: 13px;
	color: #334155;
}
.approvalDetailGrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px 24px;
	margin-bottom: 14px;
}
.approvalDetailLabel {
	color: #64748b;
	display: inline-block;
	min-width: 80px;
}
.approvalDetailCols {
	display: flex;
	gap: 40px;
	margin-bottom: 14px;
}
.approvalDetailCol {
	flex: 1;
}
.approvalDetailHead {
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 6px;
}
.approvalMuted {
	color: #94a3b8;
	font-style: italic;
}
.approvalChainRow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
}
.approvalChip {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}
.approvalChipApproved {
	background: #16a34a;
}
.approvalChipRejected {
	background: #dc2626;
}
.approvalChipPending {
	background: #cbd5e1;
}
.approvalChainName {
	min-width: 140px;
}
.approvalChainState {
	color: #64748b;
	text-transform: capitalize;
}
.approvalDetailActions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 14px;
}
.approvalDetailOpen {
	color: #4f46e5;
	text-decoration: none;
}
.approvalNotes {
	max-width: 640px;
}
.approvalNoteRow {
	padding: 3px 0;
	border-bottom: 1px solid #eef2f7;
}

/* ================= Photo evidence gallery (photos row type) ================= */
.dfPhotoGallery { padding: 12px 8px; height: 100%; overflow-y: auto; box-sizing: border-box; }
.dfPhotoGallery__loading { padding: 24px; color: #6b7280; }
.dfPhotoGallery__empty { padding: 48px 24px; text-align: center; color: #9098aa; }
.dfPhotoGallery__empty i { font-size: 32px; display: block; margin-bottom: 10px; }
.dfPhotoGallery__empty p { margin: 0; }

.dfPhotoGroup { margin-bottom: 22px; }
.dfPhotoGroup__head {
	font-size: 14px; font-weight: 600; color: #3041b0;
	padding: 0 0 8px; margin-bottom: 10px; border-bottom: 1px solid #e5e7eb;
	display: flex; align-items: center; gap: 8px;
}
.dfPhotoGroup__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
	background: #eef0fb; color: #3041b0; font-size: 12px; font-weight: 600;
}
.dfPhotoGroup__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.dfPhotoTile {
	border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer;
	transition: box-shadow 0.15s, transform 0.05s;
}
.dfPhotoTile:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.dfPhotoTile:active { transform: scale(0.99); }
.dfPhotoTile__img { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #f3f4f6; }
.dfPhotoTile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dfPhotoTile__type {
	position: absolute; top: 8px; left: 8px; background: rgba(17,24,39,0.72); color: #fff;
	font-size: 11px; padding: 2px 8px; border-radius: 10px;
}
.dfPhotoTile__meta { padding: 8px 10px; }
.dfPhotoTile__caption { font-size: 13px; color: #1a1a2e; line-height: 1.35; margin-bottom: 4px; }
.dfPhotoTile__sub { font-size: 11px; color: #8a90a2; }

.dfPhotoLightbox {
	position: fixed; inset: 0; z-index: 30000; background: rgba(0,0,0,0.9);
	display: flex; flex-direction: column;
}
.dfPhotoLightbox__bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px; color: #fff; font-size: 14px;
}
.dfPhotoLightbox__close { background: transparent; border: none; color: #fff; font-size: 22px; cursor: pointer; }
.dfPhotoLightbox__img { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 20px 24px; overflow: auto; }
.dfPhotoLightbox__img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }

/* ---------------------------------------------------------------------------
   Lattice Grid type scale

   Lattice derives font size from `density`, on a different curve to the row
   height: the row is 28px * scale, but the font is 13px + (scale - 1) * 2px.
   So `comfortable` gives 42px rows with 14px text, and `spacious` gives 15px.

   We want the density presets to control spacing only and the type to stay put
   at 13px, which is what the grids used before the migration.

   The doubled class is deliberate. style.css is loaded BEFORE
   lattice-grid.min.css in index.php, and Lattice sets these on `.lattice`
   (specificity 0,1,0) — an equal-specificity rule here would lose the cascade
   on source order. `.lattice.lattice` is 0,2,0, so it wins without touching
   the vendor stylesheet or reordering the page.
   --------------------------------------------------------------------------- */
.lattice.lattice {
	--lattice-font-size: 13px;
	--lattice-font-size-sm: 11px;
	--lattice-header-font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Zebra striping (stripedRows, set as a house default by
   df_lattice_create_grid). Lattice paints the stripe with
   --lattice-surface-alt, which at #fbfcfc is too faint to read across a wide
   grid. That token is NOT overridden here: it is also the background for group
   header rows, the toolbar, tool-panel chips and master-detail panels, so
   darkening it would darken all of that chrome too. Instead the two stripe
   rules are restated against a stripe-only token.

   Lattice's own selectors are 0,6,0 (row + cell) and 0,5,0 (row), and style.css
   loads first, so the class is tripled to clear them on specificity rather than
   source order. Same reasoning as the block above.
   --------------------------------------------------------------------------- */
.lattice.lattice.lattice {
	--df-lattice-stripe: #eef1f4;
}

.lattice.lattice.lattice[data-striped-rows] .lat-row--alternate:not(.lat-row--selected):not(.lat-row--hovered) {
	background: var(--df-lattice-stripe);
}

.lattice.lattice.lattice[data-striped-rows] .lat-row--alternate:not(.lat-row--selected):not(.lat-row--hovered) .lat-cell {
	background: var(--df-lattice-stripe);
}

/* The stripe above out-ranks Lattice's diff marks, so on every other row a changed
   cell or an added line lost its fill. Restated here at a specificity that wins. */
.lattice.lattice.lattice[data-striped-rows] .lat-row.lat-row--added,
.lattice.lattice.lattice[data-striped-rows] .lat-row.lat-row--added .lat-cell {
	background: var(--lattice-variant-success-fill);
}

.lattice.lattice.lattice[data-striped-rows] .lat-row .lat-cell.lat-cell--changed {
	background: var(--lattice-variant-info-fill);
}

/* ---------------------------------------------------------------------------
   Small in-grid action button (the "+" that adds a resource to a plan, and any
   other single-icon row action). A class rather than inline styles so it can
   carry hover and focus states, which an inline style cannot express.
   --------------------------------------------------------------------------- */
.dfGridAddBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: auto;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: #3041b0;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.12s ease-in-out;
}

.dfGridAddBtn:hover {
	background: #263490;
}

.dfGridAddBtn:focus-visible {
	outline: 2px solid #3041b0;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Trace row type (defined_object_complex_editor_row_type_trace.js).

   A vertical chain of connected records, one row per layer. The three columns
   are fixed so every record name shares a left edge and every value a right
   edge: the chain is meant to be read down, not across.

   The hue ramps across the three bands rather than colouring by entity, so a
   trace of any length shows where it crosses from the logical layers into the
   physical ones without the reader parsing the labels.
   --------------------------------------------------------------------------- */

.dfTrace {
	padding: 18px 20px 20px;
}

.dfTraceNote {
	font-size: 12px;
	color: var(--uiTextMuted, #6b7688);
	text-align: right;
	margin-bottom: 12px;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.dfTraceEmpty {
	font-size: 13px;
	color: var(--uiTextMuted, #6b7688);
	margin: 0;
	padding: 6px 2px;
}

.dfTraceChain {
	display: flex;
	flex-direction: column;
}

.dfTraceLink {
	text-align: center;
	font-size: 11px;
	line-height: 1;
	padding: 5px 0;
	color: #b6bdc9;
}

.dfTraceRow {
	display: grid;
	grid-template-columns: 104px 1fr auto;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	padding: 13px 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: none;
	font: inherit;
	cursor: pointer;
	transition: box-shadow 0.12s ease-in-out, transform 0.12s ease-in-out;
}

.dfTraceRow:hover {
	box-shadow: 0 1px 4px rgba(26, 34, 51, 0.13);
}

.dfTraceRow:focus-visible {
	outline: 2px solid var(--tocloco-blue, #3a489e);
	outline-offset: 2px;
}

.dfTraceLabel {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.dfTraceName {
	font-size: 15px;
	font-weight: 600;
	color: #1d2533;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dfTraceValue {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 12px;
	color: #6b7688;
	white-space: nowrap;
	text-align: right;
}

.dfTraceMore {
	font-style: normal;
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 8px;
	background: #eceef1;
	color: #56617a;
	font-size: 11px;
}

/* The record currently open gets a ring, so the reader can see where they are
   standing in the chain. Drawn as an inset shadow rather than a thicker border:
   a border change shifts that row's content by half a pixel and breaks the
   shared left edge the three columns exist to create. */
.dfTraceSelf {
	box-shadow: inset 0 0 0 1px currentColor;
}

.dfTraceBand-a { background: #eefaf3; border-color: #bfe6d2; }
.dfTraceBand-a .dfTraceLabel { color: #1e7a52; }

.dfTraceBand-b { background: #eef3fd; border-color: #c6d6f3; }
.dfTraceBand-b .dfTraceLabel { color: #2f52b0; }

.dfTraceBand-c { background: #f2eefc; border-color: #d5c9f0; }
.dfTraceBand-c .dfTraceLabel { color: #5b3fb0; }

@media (max-width: 640px) {
	.dfTraceRow { grid-template-columns: 1fr; gap: 4px; padding: 11px 14px; }
	.dfTraceValue { text-align: left; }
	.dfTraceName { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.dfTraceRow { transition: none; }
}

/* ---------------------------------------------------------------------------
   Lattice multi-line headers

   AG's MultilineHeader component rendered a \n in headerName as a <br> and drew
   its own sort icon. Lattice sorts from the header natively, so the only thing
   still wanted is the line break, and Lattice's own header renderer already
   lays the label out as a flex column -- it just sets white-space:nowrap with
   an ellipsis, which collapses the newline.

   df_lattice_columns_from_ag maps headerComponent, wrapHeaderText and
   autoHeaderHeight onto this class, so the finance month headers ("2026 Jan"
   over "Forecast") keep their two lines without a custom renderer.

   Tripled class for the same cascade reason as the blocks above: style.css
   loads before lattice-grid.min.css, so an equal-specificity rule would lose
   on source order.
   --------------------------------------------------------------------------- */
.lattice.lattice.lattice .dfHeaderMultiline .lat-header-label,
.lattice.lattice.lattice .lat-header-label.dfHeaderMultiline {
	white-space: pre-line;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   "This row has comments" marker (finance trackers).

   Set as rowClass: 'has-comments' by entity_pft_ftcombo and
   entity_pft_remaining_report, and read back by their hover tooltip. The AG version
   of this rule hung off .ag-grid-pinned-left-cells, so it stopped painting the moment
   those grids became Lattice; this puts it on the row's first cell instead.
   --------------------------------------------------------------------------- */
.lattice .lat-row.has-comments .lat-cell:first-child {
	position: relative;
}

.lattice .lat-row.has-comments .lat-cell:first-child::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 13px;
	height: 13px;
	background: #f59e0b;
	clip-path: polygon(0 100%, 0 0, 100% 100%);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Lattice selection checkbox size

   Lattice sizes the checkbox from the density scale:
       .lat-checkbox-input { width: calc(var(--lattice-space) * 3.5) }
   and --lattice-space is 4px * scale, so the box is 14px * scale. The density
   presets scale 0.85 / 1 / 1.5 / 2, which puts a `spacious` grid at a 28px
   checkbox -- twice a normal one, and the reason the finance tracker's looked
   massive.

   Row height should follow density; the control inside it should not. This pins
   the box near the platform default and lets the row keep its spacing, which is
   the same split as the type-scale block above.

   Doubled class for the cascade: style.css loads before lattice-grid.min.css,
   so an equal-specificity rule would lose on source order.
   --------------------------------------------------------------------------- */
.lattice.lattice .lat-checkbox-input {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* dfComponents field types inside the record editor (rendered by the form row type) */
.dfcFieldLabel { font-size: 12px; color: #6b7280; margin: 0 0 4px; line-height: 1.2; }
.dfcFieldHost { display: flex; align-items: center; min-height: 28px; }
.dfRichHost > .dfc-richtext { height: 100%; }
.dfRichHost .dfc-richtext-editor { min-height: 0; }
.dfDocHost > .dfc-document { height: 100%; }
.dfDocHost .dfc-document-canvas { min-height: 0; }
.progGanttZoom.is-active { background: var(--uiBlue, #2f3ab2); color: #fff; border-color: transparent; }
/* Programme gantt is a viewer of stored dates: every link is 'critical' to the engine, so draw arrows neutrally. */
[id^=progganttChart] .lat-gantt-split__link, [id^=progganttChart] .lat-gantt-split__link--critical { stroke: #8a94a0; }
[id^=progganttChart] .lat-gantt-split__arrowhead, [id^=progganttChart] .lat-gantt-split__arrowhead--critical { fill: #8a94a0; }
[id^=progganttChart] .lat-gantt-split__row, [id^=progganttChart] .lat-gantt-split__barrow { cursor: pointer; }
/* Lattice draws its own card shell (8px 10px padding) around whatever a cardRenderer returns; every DemandFlow
   card template pads itself, so custom-rendered cards drop the shell padding on every board, not only the agile one. */
.lat-kanban__card[data-custom="true"] { padding: 0; }
/* Board view archive window (scripts/domain_agile.js, agileUpdateArchivedHeaders): the hidden-card
   count written onto a final column's header, so the reader knows cards are hidden, not lost. */
.agileArchivedCount { color: var(--df-text-muted); font-weight: 400; }
/* Waterfall GANTT (entity_pj_waterfall.js): other projects' work rides in a hidden read-only group so
   the resource band counts it while the chart shows only this project. Staff picker and dependency editor. */
/* "Show in GANTT" from the conflicts popout: the task's row flashes amber for a moment. */
.lat-gantt-split__row.dfWfFlash { background: #fde68a !important; transition: background .3s; }
.lat-gantt-split__barrow.dfWfFlash .lat-gantt-split__rowbg { fill: #fde68a !important; }
/* Lattice dashboard designer / viewer (_utils_lattice_designer.js): page buttons above the canvas in view mode. */
.dfDesignerHost { display: flex; flex-direction: column; height: 100%; width: 100%; }
.dfDesignerCanvas { flex: 1 1 auto; min-height: 0; position: relative; }
.dfDesignerPages { display: flex; gap: 6px; padding: 8px 12px 4px; flex-wrap: wrap; }
.dfDesignerPageBtn { border: 1px solid #d0d5dd; background: #fff; color: var(--text); border-radius: 14px; padding: 3px 12px; font-size: 13px; cursor: pointer; }
.dfDesignerPageBtn:hover { border-color: var(--tocloco-blue); }
.dfDesignerPageBtn.is-active { background: var(--tocloco-blue); border-color: var(--tocloco-blue); color: #fff; }

/* Task name editor over a gantt table cell (dfGanttMount editNameOver). */
.dfGanttNameEdit { position: fixed; z-index: 100000; box-sizing: border-box; padding: 0 8px; border: 2px solid #2563eb; border-radius: 2px; font: inherit; font-size: 13px; background: #fff; color: #0f172a; outline: none; }
/* Over-allocated-weeks pill in the waterfall's resource band column. */
.dfBandPill { background: var(--uiRed, #ef4444); color: #fff; padding: 1px 8px; border-radius: 10px; font-weight: 600; font-size: 11px; }
/* Resource band load colours: Lattice workload.thresholds classes (waterfall) or dfGanttMount
   workloadColours: under 80% blue, 80-99% amber, 100%+ red. */
.dfLoad--ok { background: rgba(59,130,246,.16) !important; color: #1e3a8a; }
.dfLoad--warn { background: rgba(245,158,11,.28) !important; color: #78350f; }
.dfLoad--over { background: rgba(239,68,68,.28) !important; color: #7f1d1d; font-weight: 600; }
/* Waterfall Slip column: days behind (red) or ahead of (green) the baseline. */
.dfSlip--late { color: #b91c1c; font-weight: 600; }
.dfSlip--early { color: #15803d; }
.dfWfPicker { position: fixed; z-index: 100002; width: 250px; max-height: 320px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.15); font-size: 13px; }
.dfWfPicker input { height: 28px; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 4px; font: inherit; }
.dfWfPickerList { overflow-y: auto; }
.dfWfPickerItem { padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.dfWfPickerItem:hover { background: #eef2ff; }
.dfWfPickerItem.is-current { font-weight: 600; color: var(--uiBlue, #2f3ab2); }
.dfWfPickerItem.is-none { color: #64748b; font-style: italic; }
.dfWfDepTable { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border: 1px solid #e5e7eb; }
.dfWfDepTable th { text-align: left; padding: 8px; color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; background: #f9fafb; }
.dfWfDepTable td { padding: 6px 8px; border-top: 1px solid #f3f4f6; }
.dfWfDepTable select, .dfWfDepTable input { height: 28px; font: inherit; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0 6px; }
.dfWfDepTable .wfDepFrom { width: 100%; }
.dfWfDepTable .wfDepLag { width: 70px; }
/* Workloads: the resource band must not squeeze the plan out; cap it and let it scroll. */
[id^=workload] .lat-gantt-split__wl { flex: 0 0 240px; max-height: 240px; overflow-y: auto; }
[id^=workload] .lat-gantt-split__body { flex: 1 1 auto; min-height: 160px; }

/* Share / comment text popout on the shared-posts screen */
.engagementText {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px 20px;
	box-sizing: border-box;
	gap: 6px;
}

.engagementText__label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b7280;
	margin-top: 6px;
}

.engagementText__post {
	flex: 0 0 auto;
	max-height: 38%;
	overflow-y: auto;
	padding: 2px;
}

.engagementText__post .scheduledPost {
	cursor: default;
}

.engagementText__editor {
	flex: 1 1 auto;
	min-height: 220px;
	display: flex;
	flex-direction: column;
}

.engagementText__editor .term-editor {
	flex: 1 1 auto;
	min-height: 0;
	border-radius: 8px !important;
	border-color: #c9cdd2 !important;
	font-size: 14px;
}

.engagementText__foot {
	font-size: 12px;
	color: #6b7280;
	text-align: right;
}

.engagementText__foot.over {
	color: #dc2626;
	font-weight: 600;
}

/* ---- Analytics provider connect dialog (integration_analytics_sources.js) ---- */
.analyticsChooser { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.analyticsChooserItem {
	display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
	font: inherit; font-size: 15px; color: #1a1a2e; background: #fff;
	border: 1px solid #e4e6ec; border-radius: 10px; padding: 16px 18px; cursor: pointer;
}
.analyticsChooserItem:hover { border-color: #c3c7d4; background: #fafbfc; }
.analyticsChooserIcon { font-size: 24px; width: 30px; text-align: center; }
.analyticsChooserText { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.analyticsChooserText span { font-size: 13px; color: #6b7280; }
.analyticsChooserItem > i { color: #9ca3af; }
.analyticsWaiting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 50px 30px; text-align: center; }
.analyticsWaiting i { font-size: 28px; color: #9ca3af; }
.analyticsWaiting p { margin: 0; font-size: 15px; font-weight: 600; color: #1a1a2e; }
.analyticsWaiting span { font-size: 13px; color: #6b7280; max-width: 42ch; }
.analyticsForm { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.analyticsForm label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #374151; }
.analyticsForm input {
	font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid #d8dae2;
	border-radius: 8px; outline: none; font-weight: 400;
}
.analyticsForm input:focus { border-color: #3041b0; }
.analyticsFormHelp { margin: 0; font-size: 13px; line-height: 1.5; color: #6b7280; }
.analyticsFormSave {
	font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: #3041b0;
	border: 0; border-radius: 8px; padding: 11px 16px; cursor: pointer;
}
.analyticsFormSave:disabled { background: #9ca3af; cursor: default; }
.analyticsFormError { font-size: 13px; color: #c62828; min-height: 16px; }
.analyticsPicker { display: flex; flex-direction: column; gap: 12px; padding: 20px; height: 100%; box-sizing: border-box; }
.analyticsPickerList { flex: 1; overflow-y: auto; border: 1px solid #e4e6ec; border-radius: 8px; padding: 6px; }
.analyticsPickerGroup {
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #6b7280; padding: 10px 8px 4px;
}
.analyticsPickerItem { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; }
.analyticsPickerItem:hover { background: #f6f7fa; }
.analyticsPickerName { font-size: 14px; color: #1a1a2e; flex: 1; }
.analyticsPickerId { font-size: 11px; color: #9ca3af; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.analyticsPickerDomain { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #374151; }
.analyticsPickerDomain input {
	font: inherit; font-size: 14px; font-weight: 400; padding: 10px 12px;
	border: 1px solid #d8dae2; border-radius: 8px; outline: none;
}
.analyticsPickerDomain span { font-size: 12px; font-weight: 400; color: #6b7280; }

/* ---- Which account carries an engagement (shared_posts.js) ---- */
.engagementText__as {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: 13px; color: #4b5563; background: #f6f7fa;
	border: 1px solid #e4e6ec; border-radius: 8px; padding: 9px 12px; margin-bottom: 10px;
}
.engagementText__as b { color: #111827; }
.engagementText__asType {
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
	color: #6b7280; background: #eef0f5; border-radius: 4px; padding: 2px 7px;
}
.engagementText__as--none { color: #b45309; background: #fff8ed; border-color: #fde7c8; }
.engagementText__asSelect {
	font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid #d8dae2;
	border-radius: 6px; background: #fff; color: #111827; max-width: 100%;
}
.engAsPicker { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.engAsPicker__row {
	display: flex; align-items: center; gap: 10px; padding: 9px 10px;
	border: 1px solid #e4e6ec; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.engAsPicker__row:hover { background: #f6f7fa; }
.engAsPicker__name { flex: 1; color: #111827; }
.engAsPicker__type {
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
	color: #6b7280; background: #eef0f5; border-radius: 4px; padding: 2px 7px;
}

/* ---- Deal resourcing panel (row type dealresourcing) ---- */
.dealResSummary {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 10px 14px; font-size: 13px; color: #4b5563;
	border-top: 1px solid var(--borderColor, #e5e7eb);
}
.dealResCount { font-weight: 600; color: #111827; }
.dealResTotal {
	font-variant-numeric: tabular-nums; font-weight: 600; color: #111827;
	background: #f6f7fa; border-radius: 6px; padding: 3px 10px;
}
.dealResPer { font-weight: 400; color: #6b7280; }
.dealResHint { color: #b45309; margin-left: auto; }
.dealResPick { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px; box-sizing: border-box; }
.dealResPickHint { font-size: 13px; color: #6b7280; }
.dealResPickGrid { flex: 1; min-height: 320px; }
.dealResPickCell { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.dealResPickRole { font-weight: 600; color: #111827; }
.dealResPickDesc {
	font-size: 12px; color: #6b7280;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dealResSource { color: #15803d; margin-left: auto; font-size: 12px; }

/* ── Consistent UI: starter token layer and shared page chrome ─────────────
   First slice of CUI requirement 1 (docs/ui_standard.md §1). Semantic tokens
   mapped onto what style.css already defines, so nothing changes visually
   today and screens can stop carrying literals. Extend here, never per file.
   Families: --df-accent, --df-grey-50..900, RAG (--df-success/warning/danger and -soft),
   --df-critical, --df-surface, --df-border, --df-text, --df-radius, --df-font-size,
   --df-space, --df-shadow. --dfc-* and --lattice-* are mapped onto these here only. */
:root {
	--df-accent: var(--tocloco-blue);
	--df-accent-soft: var(--uiBlue);
	--df-surface: #ffffff;
	--df-surface-sunken: #f8f9fa;
	--df-grey-50: #f9fafb;
	--df-grey-100: #f3f4f6;
	--df-grey-200: #e5e7eb;
	--df-grey-300: #d1d5db;
	--df-grey-400: #9ca3af;
	--df-grey-500: #6b7280;
	--df-grey-600: #4b5563;
	--df-grey-700: #374151;
	--df-grey-800: #1f2937;
	--df-grey-900: #111827;
	--df-border: var(--df-grey-200);
	--df-text: var(--df-grey-800);
	--df-text-muted: var(--df-grey-500);
	--df-critical: rgba(153, 27, 27, 1);
	--df-critical-soft: rgba(127, 29, 29, 0.12);
	--df-success: #16a34a;
	--df-success-soft: var(--uiGreen);
	--df-warning: #d97706;
	--df-warning-soft: var(--uiAmber);
	--df-danger: #dc2626;
	--df-danger-soft: var(--uiRed);
	--df-radius-sm: 4px;
	--df-radius: 8px;
	--df-radius-lg: 12px;
	--df-space-1: 4px;
	--df-space-2: 8px;
	--df-space-3: 12px;
	--df-space-4: 16px;
	--df-font-size-xs: 11px;
	--df-font-size-sm: 12px;
	--df-font-size: 13px;
	--df-font-size-md: 14px;
	--df-font-size-lg: 16px;
	--df-font-size-xl: 20px;
	--df-font-size-2xl: 24px;
	--df-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	/* Bridge the component libraries onto the same values. */
	--dfc-accent: var(--df-accent);
	--dfc-surface: var(--df-surface);
	--dfc-fg: var(--df-text);
	--dfc-fg-muted: var(--df-text-muted);
	--dfc-border: var(--df-border);
	--dfc-success: var(--df-success);
	--dfc-warning: var(--df-warning);
	--dfc-danger: var(--df-danger);
	--dfc-radius: var(--df-radius);
	--lattice-accent: var(--df-accent);
	--lattice-surface: var(--df-surface);
	--lattice-foreground: var(--df-text);
	--lattice-border-color: var(--df-border);
	--lattice-focus-color: var(--df-accent);

	/* Device vendor colours (workbooks/net/devicestyle.js vendorStyle keys): the only place
	   these are defined. scripts/network_device_card.js picks one pair per card. */
	--df-vendor-cisco: #049fd9;
	--df-vendor-cisco-soft: rgba(4, 159, 217, 0.12);
	--df-vendor-juniper: #0a8a3c;
	--df-vendor-juniper-soft: rgba(10, 138, 60, 0.12);
	--df-vendor-fortinet: #ee3124;
	--df-vendor-fortinet-soft: rgba(238, 49, 36, 0.12);
	--df-vendor-nokia: #124191;
	--df-vendor-nokia-soft: rgba(18, 65, 145, 0.12);
	--df-vendor-arista: #1c2b4a;
	--df-vendor-arista-soft: rgba(28, 43, 74, 0.12);
	--df-vendor-paloalto: #fa582d;
	--df-vendor-paloalto-soft: rgba(250, 88, 45, 0.12);
	--df-vendor-ciena: #c8102e;
	--df-vendor-ciena-soft: rgba(200, 16, 46, 0.12);
	--df-vendor-pure: #ff6900;
	--df-vendor-pure-soft: rgba(255, 105, 0, 0.12);
	--df-vendor-netapp: #0067c5;
	--df-vendor-netapp-soft: rgba(0, 103, 197, 0.12);
	--df-vendor-dell: #0076ce;
	--df-vendor-dell-soft: rgba(0, 118, 206, 0.12);
	--df-vendor-hpe: #01a982;
	--df-vendor-hpe-soft: rgba(1, 169, 130, 0.12);
	--df-vendor-huawei: #cf0a2c;
	--df-vendor-huawei-soft: rgba(207, 10, 44, 0.12);
	--df-vendor-ericsson: #0082f0;
	--df-vendor-ericsson-soft: rgba(0, 130, 240, 0.12);
	--df-vendor-generic: var(--df-text-muted);
	--df-vendor-generic-soft: var(--df-surface-sunken);

	/* RAN map sector wedges (scripts/ran_map.js rmap_techTone), one tone per CELL.technology. */
	--df-ran-gsm: var(--df-grey-500);
	--df-ran-umts: var(--df-success);
	--df-ran-lte: var(--df-accent);
	--df-ran-nr: #7c3aed;
	--df-ran-multirat: var(--df-danger);
	--df-ran-none: var(--df-text-muted);

	/* Isometric hardware bodies (scripts/network_iso_engine.js nio_bodyColour): a mux, an
	   optical shelf, a router and a switch each read apart in the optical view. */
	--df-iso-mux: #7d8fa8;
	--df-iso-optical: #454c58;
	--df-iso-router: #2f5d8c;
	--df-iso-switch: #3f6b4f;
	/* Cloud resource type colours (CLOUDRESOURCE.resourceType; workbooks/net/cloudestate.js,
	   scripts/network_iso_cloud.js): the only place these are defined. One token per tile
	   kind the isometric cloud estate draws (scripts/network_iso_engine.js's addChassis,
	   addCylinder, addWall, addArrowTile, addGateway, addBucket). */
	--df-cloud-instance: #2563eb;
	--df-cloud-disk: #64748b;
	--df-cloud-cluster: #7c3aed;
	--df-cloud-nodePool: #9333ea;
	--df-cloud-database: #0891b2;
	--df-cloud-bucket: #16a34a;
	--df-cloud-loadBalancer: #ea580c;
	--df-cloud-natGateway: #d97706;
	--df-cloud-firewallRule: #dc2626;
	--df-cloud-route: #0ea5e9;
	--df-cloud-other: #6b7280;

	/* Outage impact map role colours (scripts/network_impact_map.js NETMAP_ROLE_TOKEN): one token
	   per affected role so the legend tells duct, cable, closure, chamber and premise apart; the
	   start itself always draws in --df-danger, never one of these. */
	--df-impact-duct: #2563eb;
	--df-impact-cable: #7c3aed;
	--df-impact-closure: #ea580c;
	--df-impact-chamber: #0891b2;
	--df-impact-premise: #db2777;

	/* Sense map canvas colours (PRODREQ-0000418, scripts/sense_map.js): one token per
	   sensing product family (workbooks/sense/catalogue.js FAMILIES[x].colourToken) so a
	   zone's family reads apart on the map and in the legend, plus a pale fill for a
	   source's declared coverage footprint and a line colour for candidate and chosen
	   pairings. All six family tones and the pairing line are mid-tones at or above 3:1
	   contrast against the map's light basemap. */
	--df-sense-drone: #1d4ed8;
	--df-sense-perimeter: #ea580c;
	--df-sense-flow: #0d9488;
	--df-sense-industrial: #a16207;
	--df-sense-indoor: #7c3aed;
	--df-sense-rescue: #dc2626;
	--df-sense-coverage: rgba(100, 116, 139, 0.16);
	--df-sense-pairing: #1e293b;

	/* Fibre lifecycle map/trace colours (PRODREQ-0000118, workbooks/fibre/lifecyclerules.js
	   LIFECYCLE_CUES): solid lines readable on the light basemap, one per non-Live state so the
	   fibre explorer and trace view tell a design job's plant apart from what is in service. Live
	   has no token here: it keeps the layer's own colour (LIFECYCLE_CUES[6].colour is null). */
	--df-lifecycle-proposed: #64748b;
	--df-lifecycle-planned: #2563eb;
	--df-lifecycle-reserved: #7c3aed;
	--df-lifecycle-approved: #0d9488;
	--df-lifecycle-inbuild: #f59e0b;
	--df-lifecycle-asbuilt: #16a34a;
	--df-lifecycle-retiring: #ea580c;
	--df-lifecycle-retired: #78716c;

	/* Rack sheet (N6, scripts/network_rack_sheet.js, workbooks/net/faceplate.js): the black
	   rack frame, the light sheet background, the faceplate body and its fittings, and the
	   dark information panel. Not vendor colours (those are the --df-vendor-* pair above). */
	--df-rackframe: #0b0f14;
	--df-sheet-bg: var(--df-surface-sunken);
	--df-face-bg: #2a2d31;
	--df-face-bg-rear: #23262a;
	--df-face-line: #44484d;
	--df-face-fitting: #55595e;
	--df-face-text: #e5e7eb;
	--df-panel-dark: #1f2430;
	--df-panel-dark-text: #f3f4f6;
	--df-panel-dark-muted: #9aa3b2;
	--df-panel-dark-border: #343b4a;
}

:root[data-theme="dark"] {
	--df-cloud-instance: #60a5fa;
	--df-cloud-disk: #94a3b8;
	--df-cloud-cluster: #a78bfa;
	--df-cloud-nodePool: #c084fc;
	--df-cloud-database: #22d3ee;
	--df-cloud-bucket: #4ade80;
	--df-cloud-loadBalancer: #fb923c;
	--df-cloud-natGateway: #fbbf24;
	--df-cloud-firewallRule: #f87171;
	--df-cloud-route: #38bdf8;
	--df-cloud-other: #9ca3af;
}

/* Page-level dashboard host: fills the appframe below the toolbar. */
.dfPageDash { height: calc(100vh - 150px); padding: var(--df-space-4); background: transparent; }
/* A grid mounted inside a dashboard tile fills the tile. */
.dfTileGrid { height: 100%; }

/* KPI tile. Interim shared markup until dfc.KpiTile ships; see pmKpiTile(). */
.dfKpi {
	display: flex; align-items: center; justify-content: space-between; height: 100%;
	padding: var(--df-space-4); background: var(--df-surface);
	border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow);
	color: var(--df-text);
}
.dfKpi-label { font-size: var(--df-font-size); color: var(--df-text-muted); }
.dfKpi-value { font-size: var(--df-font-size-2xl); font-weight: 700; margin-top: var(--df-space-1); }
.dfKpi-sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: 2px; }
.dfKpi-icon {
	width: 42px; height: 42px; border-radius: var(--df-radius); display: flex; align-items: center; justify-content: center;
	font-size: var(--df-font-size-xl); background: var(--df-accent-soft); color: var(--df-accent);
}
.dfKpi--success .dfKpi-value, .dfKpi--success .dfKpi-icon { color: var(--df-success); }
.dfKpi--success .dfKpi-icon { background: var(--df-success-soft); }
.dfKpi--warning .dfKpi-value, .dfKpi--warning .dfKpi-icon { color: var(--df-warning); }
.dfKpi--warning .dfKpi-icon { background: var(--df-warning-soft); }
.dfKpi--danger .dfKpi-value, .dfKpi--danger .dfKpi-icon { color: var(--df-danger); }
.dfKpi--danger .dfKpi-icon { background: var(--df-danger-soft); }

/* Service completeness health tiles (scripts/network_completeness.js): clickable dfKpi tiles above the list. */
.netComplete-tiles { display: flex; gap: var(--df-space-3); flex-wrap: wrap; padding: var(--df-space-3); }
.netComplete-tile { flex: 1; min-width: 180px; height: 76px; font: inherit; text-align: left; cursor: pointer; }
.netComplete-tile .dfKpi-body { display: flex; flex-direction: column; }
.netComplete-tile:hover { border-color: var(--df-accent); }
.netComplete-tile.is-selected { border-color: var(--df-accent); box-shadow: 0 0 0 2px var(--df-accent-soft); }
.netComplete-filter { padding: 0 var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.netComplete-filter:empty { display: none; }
.netComplete-filter { margin-bottom: var(--df-space-2); }
.netComplete-clear { background: none; border: 0; padding: 0; margin-left: var(--df-space-2); color: var(--df-accent); cursor: pointer; font: inherit; }

/* NWWHATIF "What-if" panel (scripts/network_whatif.js): the failed-elements grid's add
   picker, a settings/run form, and the results summary strip (dfKpi tiles, see above) and
   tabbed grids below it. */
.netWhatIfHint { padding: var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size); }
.netWhatIfResults { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: var(--df-space-2) var(--df-space-3); }
.netWhatIfSummary { display: flex; gap: var(--df-space-3); flex-wrap: wrap; margin-bottom: var(--df-space-2); }
.netWhatIfSummary .dfKpi { flex: 1; min-width: 150px; height: 64px; }
.netWhatIfActions { display: flex; justify-content: flex-end; margin-bottom: var(--df-space-2); }
.netWhatIfTabBody { flex: 1; min-height: 0; position: relative; }
.netWhatIfTabGrid { position: absolute; inset: 0; }
.netWhatIfPicker { display: flex; flex-direction: column; gap: var(--df-space-2); height: 100%; padding: var(--df-space-3); box-sizing: border-box; }
.netWhatIfTypeHost { flex: 0 0 auto; }
.netWhatIfPickerGrid { flex: 1; min-height: 320px; }

/* Product initiative chips and progress bar (scripts/entity_product_initiative_data.js). */
.dfPmChip { display: inline-block; padding: 1px var(--df-space-2); border-radius: 999px; font-size: var(--df-font-size-xs); font-weight: 600; background: var(--df-surface-sunken); color: var(--df-text-muted); }
.dfPmChip--accent { background: var(--df-accent-soft); color: var(--df-accent); }
.dfPmChip--success { background: var(--df-success-soft); color: var(--df-success); }
.dfPmChip--warning { background: var(--df-warning-soft); color: var(--df-warning); }
.dfPmChip--danger { background: var(--df-danger-soft); color: var(--df-danger); }
.dfPmBar { height: 6px; border-radius: 3px; background: var(--df-border); overflow: hidden; }
.dfPmBar > span { display: block; height: 100%; background: var(--df-success); }

/* Change impact report panel (scripts/network_change_impact.js, card #5506): the status
   line, summary strip and grid at the top of NWCHANGE's Impact & Verification panel. */
.dfNci { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: var(--df-space-3) var(--df-space-4); gap: var(--df-space-3); }
.dfNci-note { color: var(--df-text-muted); font-size: var(--df-font-size-sm); margin: 0; }
.dfNci-note--error { color: var(--df-danger); }
.dfNci-status { margin: 0; font-size: var(--df-font-size-sm); color: var(--df-text); }
.dfNci-status--warn { color: var(--df-warning); font-weight: 600; }
.dfNci-strip { display: flex; flex-wrap: wrap; gap: var(--df-space-3); }
.dfNci-gridWrap { flex: 1 1 auto; min-height: 0; height: 100%; }

/* Risk badge and the conflicts/booking short list (card #7030): sit above the status line
   so the risk level and anything that needs attention are seen before the grid. */
.dfNci-risk { display: flex; align-items: baseline; gap: var(--df-space-3); padding: var(--df-space-2) var(--df-space-3); border-radius: var(--df-radius); background: var(--df-surface-sunken); }
.dfNci-riskBadge { flex: 0 0 auto; font-size: var(--df-font-size-sm); font-weight: 700; padding: 2px var(--df-space-2); border-radius: var(--df-radius-sm); white-space: nowrap; background: var(--df-surface); color: var(--df-text-muted); }
.dfNci-riskReason { font-size: var(--df-font-size-sm); color: var(--df-text); }
.dfNci-risk--critical .dfNci-riskBadge { background: var(--uiCritical); color: var(--uiCriticalBorder); }
.dfNci-risk--danger .dfNci-riskBadge { background: var(--df-danger-soft); color: var(--df-danger); }
.dfNci-risk--warning .dfNci-riskBadge { background: var(--df-warning-soft); color: var(--df-warning); }
.dfNci-risk--success .dfNci-riskBadge { background: var(--df-success-soft); color: var(--df-success); }
.dfNci-conflicts { display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfNci-subhead { margin: 0; font-size: var(--df-font-size-sm); font-weight: 700; color: var(--df-text); }
.dfNci-list { margin: 0; padding: 0 0 0 var(--df-space-4); display: flex; flex-direction: column; gap: 2px; }
.dfNci-list-item { font-size: var(--df-font-size-sm); color: var(--df-text); }
.dfNci-list-item--danger { color: var(--df-danger); }
.dfNci-list-item--warning { color: var(--df-warning); }
.dfNci-list-item--success { color: var(--df-success); }
/* Alert impact console detail side cell (scripts/network_alert_impact.js, card #5503): the
   small per-row breakdown that no Lattice component covers. */
.dfNai-detail { padding: var(--df-space-3) var(--df-space-4); font-size: var(--df-font-size-sm); color: var(--df-text); box-sizing: border-box; }
.dfNai-detailEmpty { color: var(--df-text-muted); padding: var(--df-space-4) 0; text-align: center; }
.dfNai-detailHead { font-size: var(--df-font-size-md); font-weight: 600; margin-bottom: var(--df-space-2); }
/* Sentence case ("Impact", "Alerts (2)"), never upper case (card #7266). */
.dfNai-detailSection { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin: var(--df-space-3) 0 var(--df-space-1); }
.dfNai-detailRow { padding: var(--df-space-2) 0; border-top: 1px solid var(--df-border); }
.dfNai-detailRow:first-of-type { border-top: none; }
.dfNai-detailRowHead { font-weight: 600; }
.dfNai-detailRowMeta { display: flex; align-items: center; gap: var(--df-space-1); margin-top: 2px; }
.dfNai-detailMeta { color: var(--df-text-muted); font-size: var(--df-font-size-xs); margin-top: 2px; }
.dfNai-detailAge { color: var(--df-text-muted); font-size: var(--df-font-size-xs); margin-left: auto; }
/* Aligned with the text above it, not indented: .dfToolbar's own left padding plus its item's
   left padding (10px each, the house toolbar's spacing for several buttons) pushed this single
   action in from the text above it, so the mounted toolbar is pulled back by that same 20px
   here rather than widening the hit area by stripping the toolbar's own padding (card #7266). */
.dfNai-detailTopoBtn { margin: var(--df-space-2) 0 var(--df-space-2) -20px; max-width: 220px; }
/* The option colour as a left border on a light background, never a filled background: a dark
   option colour (e.g. Critical) stayed legible either way, but a light one left pale text on a
   pale fill unreadable (card #7266). */
.dfNai-chip {
	display: inline-block; padding: 1px var(--df-space-2); border-radius: var(--df-radius-sm);
	font-size: var(--df-font-size-xs); font-weight: 500; color: var(--df-text);
	background: var(--df-surface-sunken); border-left: 3px solid var(--df-border);
}
/* The Severity grid column's "dot plus text" cell (netAlertImpact_optionDotHtml). */
.dfNai-sevDot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--df-space-2); vertical-align: middle; }
/* Alert impact console, card #7029: the By service tiles (market visual: severity tiles), on
   the Lattice dashboard layout (df_lattice_dashboard), auto-placed as a list of cards. */
.dfNai-emptyState, .dfNai-loadingState, .dfNai-failState {
	height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
	text-align: center; padding: var(--df-space-4); font-size: var(--df-font-size); color: var(--df-text-muted);
}
.dfNai-failState { color: var(--df-danger); }
.dfNai-suppressBar { flex: 0 0 auto; padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfNai-suppressBar:empty { display: none; }
.dfNai-suppressToggle {
	background: none; border: none; padding: 0; margin-left: var(--df-space-2); font: inherit;
	color: var(--df-accent); cursor: pointer; text-decoration: underline;
}
.dfNai-serviceTile {
	height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--df-space-1);
	background: var(--df-surface); border: 1px solid var(--df-border); border-left: 4px solid var(--df-border);
	border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-3); cursor: pointer;
}
.dfNai-serviceTile:hover { border-color: var(--df-accent); }
.dfNai-tileHead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-2); }
.dfNai-tileTitle { font-size: var(--df-font-size); font-weight: 600; color: var(--df-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfNai-tileMeta { font-size: var(--df-font-size-xs); color: var(--df-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfNai-tileFoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
/* The entity-type prefix beside an element's name (netAlertImpact_labelHtml): muted so the
   name itself reads first, never a raw entity code and id on their own. */
.dfNai-labelMuted { color: var(--df-text-muted); font-weight: 400; }
/* The summary strip under the toolbar (card #7266): the same icon/value/label pattern as Blast
   radius's netBlast-summary (network_blast_radius.js), with this console's own class names. */
.dfNai-summaryWrap { display: flex; align-items: center; height: 100%; border-bottom: 1px solid var(--df-border); box-sizing: border-box; }
.dfNai-summary { display: flex; flex-wrap: wrap; gap: var(--df-space-4); align-items: center; padding: 0 var(--df-space-4); box-sizing: border-box; }
.dfNai-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 90px; }
.dfNai-stat i { color: var(--df-accent); font-size: var(--df-font-size-md); }
.dfNai-statValue { font-size: var(--df-font-size-xl); font-weight: 600; color: var(--df-text); }
.dfNai-statLabel { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
/* The Incidents tab's own left-grid/main-topology split (card #7266): a grid beside the
   selected incident drawn on the topology, replacing the fixed 380px detail cell used by the
   other tabs (hidden while this tab is active). The column's own min-width is the sum of its
   grid's column minimums (Severity 130 + Probable root cause's own 220 + three 70px numeric
   columns + Age 150 + Status 130, plus a little room for the grid's border and scrollbar): on
   anything narrower than ~1900px wide that floor, not the 45% share, is what actually governs,
   which is what keeps every column visible rather than truncated or pushed off the edge. */
.dfNai-incidentSplit { display: flex; flex: 1; min-height: 0; }
.dfNai-incidentGridCol { flex: 0 0 45%; max-width: 45%; min-width: 860px; box-sizing: border-box; border-right: 1px solid var(--df-border); overflow: auto; }
.dfNai-incidentMainCol { flex: 1; min-width: 0; overflow: auto; box-sizing: border-box; }
/* The incident's dependency path, drawn on its own topo_mount instance
   (netAlertImpact_renderIncidentTopo): .dfTopo-canvasWrap/.dfTopo-mount (topo_mount's own
   classes) land on #netAlertImpact_incidentTopoHost itself, so this only sizes the wrap, since
   the full page gets its height from a CSS grid row this console does not have. */
.dfNai-incidentTopoWrap { margin: var(--df-space-2) 0 var(--df-space-3); }
.dfNai-incidentTopoCanvasWrap { height: 360px; }
.dfNai-topoEmpty { color: var(--df-text-muted); text-align: center; padding: var(--df-space-4) 0; }
.dfNai-topoNote { color: var(--df-text-muted); font-size: var(--df-font-size-sm); margin: 0 0 var(--df-space-2); }
/* Power chain panel (scripts/dc_power_chain.js): the header and dashboard
   host it stacks inside the fixed-height panel row, and the summary strip
   and fail-feed / single-feed results, which no dfc component covers. */
.dcPower-root { display: flex; flex-direction: column; height: 100%; }
.dcPower-toolbarHost { flex: 0 0 auto; }
.dcPower-dashHost { flex: 1 1 auto; min-height: 0; }
.dcPower-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--df-space-3); height: 100%; }
.dcPower-sideEmpty { padding: var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size); }
.dcPower-sideTitle { padding: var(--df-space-2) var(--df-space-3) 0; font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text); }
.dcPower-resultList { display: flex; flex-direction: column; gap: var(--df-space-1); padding: var(--df-space-2) var(--df-space-3); }
.dcPower-resultItem { display: flex; align-items: center; gap: var(--df-space-2); font-size: var(--df-font-size-sm); color: var(--df-text); }

/* Product home (scripts/entity_product_home.js). */
.dfPmHome { height: calc(100vh - 150px); overflow-y: auto; padding: var(--df-space-4); box-sizing: border-box; }
.dfPmHome-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--df-space-4); margin-bottom: var(--df-space-4); }
.dfPmHome-main { display: flex; gap: var(--df-space-4); align-items: flex-start; }
.dfPmHome-main > :first-child { flex: 2; min-width: 0; }
.dfPmHome-main > :last-child { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: var(--df-space-4); }
@media (max-width: 1100px) {
	.dfPmHome-main { flex-direction: column; }
	.dfPmHome-main > :last-child { min-width: 0; width: 100%; }
	.dfPmHome-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dfPmHome-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--df-space-4); }
.dfPmCard, .dfPmPanel { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-4); }
.dfPmCard { cursor: pointer; display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfPmCard:hover { border-color: var(--df-accent); }
.dfPmCard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--df-space-2); }
.dfPmCard-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dfPmMuted { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfPmChips { display: flex; flex-wrap: wrap; gap: var(--df-space-1); }
.dfPmPanel h3 { margin: 0 0 var(--df-space-3); font-size: var(--df-font-size-lg); }
.dfPmRow { padding: var(--df-space-2) 0; border-top: 1px solid var(--df-border); cursor: pointer; }
.dfPmRow:first-of-type { border-top: 0; }
.dfPmRow:hover { color: var(--df-accent); }
/* Product initiative page: one initiative as a readable document
   (scripts/entity_product_initiative.js). */
.dfPmDoc { height: calc(100vh - 150px); overflow-y: auto; padding: var(--df-space-5, var(--df-space-4)) var(--df-space-4); box-sizing: border-box; }
.dfPmDoc-layout { display: flex; align-items: flex-start; gap: var(--df-space-4); max-width: 1240px; margin: 0 auto; }
.dfPmDoc-body { flex: 1; min-width: 0; max-width: 860px; line-height: 1.6; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-5, 24px) calc(var(--df-space-5, 24px) * 1.5); box-sizing: border-box; }
.dfPmDoc > .dfPmDoc-body { margin: 0 auto; }
.dfPmDoc-actions { width: 340px; flex-shrink: 0; position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfPmDoc-actionsTitle { font-size: var(--df-font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--df-text-muted); padding: 0 var(--df-space-1); }
.dfPmDoc-action { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-3) var(--df-space-4); line-height: 1.5; }
.dfPmDoc-action h3 { display: flex; align-items: center; min-height: 28px; margin: 0 0 var(--df-space-2); font-size: var(--df-font-size-lg); text-transform: none; padding: 0; }
.dfPmDoc-action ul { margin: 0; padding-left: var(--df-space-4); }
.dfPmDoc-actionLink { margin-top: var(--df-space-2); font-size: var(--df-font-size-sm); }
@media (max-width: 1180px) { .dfPmDoc-layout { flex-direction: column; } .dfPmDoc-actions { width: 100%; position: static; } .dfPmDoc-body { max-width: none; } }
.dfPmDoc-body h1 { font-size: var(--df-font-size-2xl); margin: var(--df-space-1) 0 var(--df-space-2); }
.dfPmDoc-body h2 { display: flex; align-items: center; min-height: 36px; line-height: 1.2; font-size: var(--df-font-size-xl, var(--df-font-size-lg)); margin: var(--df-space-5, var(--df-space-4)) 0 var(--df-space-3); padding: var(--df-space-2) 0; border-bottom: 1px solid var(--df-border); text-transform: none; letter-spacing: normal; }
.dfPmDoc-lead { font-size: var(--df-font-size-lg); color: var(--df-text); margin: var(--df-space-3) 0; }
.dfPmDoc-glance { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--df-space-3); margin: var(--df-space-4) 0; }
.dfPmDoc-tile { background: var(--df-surface); border:1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); }
.dfPmDoc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-2); margin: var(--df-space-2) 0; }
.dfPmDoc-tileLabel { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfPmDoc-tileValue { font-size: var(--df-font-size-xl); font-weight: 700; margin-top: var(--df-space-1); }
.dfPmDoc-tileSub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: var(--df-space-1); }
.dfPmReq { background: var(--df-surface); border:1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-4); margin: var(--df-space-3) 0; }
.dfPmReq h3 { margin: 0; font-size: var(--df-font-size-lg); }
.dfPmReq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--df-space-2); }
.dfPmReq-delivery { display: flex; align-items: center; gap: var(--df-space-2); margin-top: var(--df-space-2); }
.dfPmReq-delivery .dfPmBar { flex: 1; }
.dfPmReq-ref { font-family: var(--df-font-mono, monospace); font-size: var(--df-font-size-sm); color: var(--df-text-muted); text-decoration: none; cursor: pointer; }
.dfPmReq-ref:hover { color: var(--df-accent); }
.dfPmReq-label { font-weight: 600; font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-top: var(--df-space-2); }
.dfPmReq ol { margin: var(--df-space-1) 0 0; padding-left: var(--df-space-5, 20px); }
.dfPmDecision { padding: var(--df-space-3) 0; border-bottom: 1px solid var(--df-border); cursor: pointer; }
.dfPmDecision:last-child { border-bottom: 0; }
.dfPmDecision-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-2); }
.dfPmLink { color: var(--df-accent); cursor:pointer; }
@media (max-width: 1100px) { .dfPmDoc-glance { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .dfPmDoc-glance { grid-template-columns: 1fr; } }

/* Product item side panel (scripts/entity_product_panel.js). */
.dfPmPanel { overflow: auto; height: 100%; box-sizing: border-box; }
.dfPmPanel-head { margin-bottom: var(--df-space-4); }
.dfPmPanel-name { font-size: var(--df-font-size-xl); font-weight: 700; margin: var(--df-space-1) 0 var(--df-space-2); }
.dfPmPanel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-2); }
.dfPmPanel-tabs { display: flex; gap: var(--df-space-3); border-bottom: 1px solid var(--df-border); margin-bottom: var(--df-space-4); }
.dfPmPanel-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--df-space-2) var(--df-space-1); font-size: var(--df-font-size); font-weight: 600; color: var(--df-text-muted); cursor: pointer; }
.dfPmPanel-tab:hover { color: var(--df-text); }
.dfPmPanel-tab.is-active { color: var(--df-text); border-bottom-color: var(--df-accent); }
.dfPmPanel-content { padding-bottom: var(--df-space-4); }
.dfPmPanel-block { margin-bottom: var(--df-space-3); }
.dfPmPanel-label { font-weight: 600; font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-top: var(--df-space-3); }
.dfPmPanel-def { margin: var(--df-space-4) 0 0; }
.dfPmPanel-defRow { display: flex; gap: var(--df-space-4); padding: var(--df-space-2) 0; border-bottom: 1px solid var(--df-border); }
.dfPmPanel-defRow dt { flex: 0 0 120px; color: var(--df-text-muted); font-weight: 600; }
.dfPmPanel-defRow dd { margin: 0; }
.dfPmPanel-score { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-3) var(--df-space-4); margin-bottom: var(--df-space-4); }
.dfPmPanel-heading { font-weight: 600; margin: var(--df-space-4) 0 var(--df-space-3); }
.dfPmPanel-quote { font-style: italic; margin-bottom: var(--df-space-2); }
.dfPmPanel-evidenceRow { padding: var(--df-space-3) 0; border-top: 1px solid var(--df-border); }
.dfPmPanel-evidenceRow:first-of-type { border-top: 0; }
.dfPmPanel-evidenceMeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-2); }
.dfPmPanel-activityRow { padding: var(--df-space-2) 0; border-top: 1px solid var(--df-border); }
.dfPmPanel-activityRow:first-of-type { border-top: 0; }
.dfPmPanel-main { overflow: auto; height: 100%; box-sizing: border-box; padding: var(--df-space-4); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); }
.dfPmPanel-rail { display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfPmPanel-railItem { padding-bottom: var(--df-space-3); border-bottom: 1px solid var(--df-border); }
.dfPmPanel-railItem:last-child { border-bottom: 0; }
.dfPmPanel-railScore { font-size: var(--df-font-size-xl); font-weight: 700; }
.dfPmPanel-dep { display: flex; align-items: center; gap: var(--df-space-2); padding: var(--df-space-1) 0; }
.dfPmPanel-docs { height: 280px; margin-bottom: var(--df-space-3); }
.dfPmPanel-picker { height: 100%; min-height: 320px; }
.dfPmPanel-switch { display: inline-flex; border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; margin-bottom: var(--df-space-3); }
.dfPmPanel-switchBtn { appearance: none; background: var(--df-surface); border: 0; padding: var(--df-space-1) var(--df-space-3); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); cursor: pointer; }
.dfPmPanel-switchBtn.is-active { background: var(--df-accent); color: var(--df-surface); }
.dfPmPanel-evidenceMeta .dfPmLink { margin-left: var(--df-space-2); }
.dfPmPanel-specSel { display: flex; align-items: center; gap: var(--df-space-3); margin: var(--df-space-3) 0; padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-accent); border-radius: var(--df-radius); }
.dfPmPanel-specSel[hidden] { display: none; }
.dfPmPanel-specBody { padding: var(--df-space-4); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); line-height: 1.6; user-select: text; }
.dfPmPanel-specGrid { height: 240px; margin-bottom: var(--df-space-3); }
.dfPmPanel-specEditor { height: 100%; overflow: auto; padding: var(--df-space-3); box-sizing: border-box; }
.dfPmPanel-compare { padding: var(--df-space-4); }
.dfPmDiff { border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); font-family: inherit; }
.dfPmDiff-line { display: flex; gap: var(--df-space-3); padding: var(--df-space-1) var(--df-space-3); border-bottom: 1px solid var(--df-border); white-space: pre-wrap; }
.dfPmDiff-line:last-child { border-bottom: 0; }
.dfPmDiff-mark { flex: 0 0 var(--df-space-3); font-weight: 700; }
.dfPmDiff-line--add { outline: 1px solid var(--df-success); outline-offset: -1px; color: var(--df-text); }
.dfPmDiff-line--add .dfPmDiff-mark { color: var(--df-success); }
.dfPmDiff-line--del { text-decoration: line-through; text-decoration-color: var(--df-danger); color: var(--df-text-muted); }
.dfPmDiff-line--del .dfPmDiff-mark { color: var(--df-danger); text-decoration: none; }
/* Product prioritise page (scripts/entity_product_prioritise.js). */
.dfPmPrio { height: calc(100vh - 150px); overflow-y: auto; padding: var(--df-space-4); box-sizing: border-box; }
.dfPmPrio-card { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-4); margin-bottom: var(--df-space-4); }
.dfPmPrio-chart { position: relative; }
.dfPmPrio-chartBody { height: 420px; }
.dfPmPrio-quad { position: absolute; z-index: 1; pointer-events: none; color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfPmPrio-quad--tl { top: var(--df-space-4); left: var(--df-space-4); }
.dfPmPrio-quad--tr { top: var(--df-space-4); right: var(--df-space-4); }
.dfPmPrio-quad--bl { bottom: var(--df-space-4); left: var(--df-space-4); }
.dfPmPrio-quad--br { bottom: var(--df-space-4); right: var(--df-space-4); }
.dfPmPrio-explain { color: var(--df-text-muted); font-size: var(--df-font-size-sm); margin-bottom: var(--df-space-3); }
.dfPmPrio-explain .dfPmLink { margin-left: var(--df-space-2); }
.dfPmPrio-grid { height: 480px; }

/* Recruitment analytics page shell (scripts/domain_recruit_analytics.js). */
/* Single root for the shell's html: Lattice's fromHtml only hands the element straight to the
   cell (no forced height:100%/overflow:auto wrapper of its own) when the html has one root, so
   the status line and #recAnBody share this one flex column instead of both claiming height:100%. */
.dfRecAn-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dfRecAn { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--df-space-4); box-sizing: border-box; }
.dfRecAn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--df-space-4); }
.dfRecAn-card { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-4); }
.dfRecAn-cardHead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--df-space-2); }
.dfRecAn-delta--up { color: var(--df-success); }
.dfRecAn-delta--down { color: var(--df-danger); }
.dfRecAn-chart { height: 180px; }
.dfRecAn-section { margin-top: var(--df-space-4); }
.dfRecAn-sectionTitle { margin: 0 0 var(--df-space-2); font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-text); }
.dfRecAn-muted { color: var(--df-text-muted); }
.dfRecAn-sectionHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--df-space-2); }
.dfRecAn-sectionTitle { margin: 0; font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-text); }
.dfRecLeague-chart { height: 220px; width: 100%; margin-bottom: var(--df-space-3); }
.dfRecLeague-grid { height: 420px; width: 100%; }
.dfRecLeague-fee { position: relative; display: block; width: 100%; text-align: right; }
.dfRecLeague-feeBar { position: absolute; left: 0; top: 50%; height: 60%; transform: translateY(-50%); background: var(--df-accent-soft); border-radius: var(--df-radius-sm, 2px); }
.dfRecLeague-feeText { position: relative; }
.dfRecAn-status { flex: 0 0 auto; padding: var(--df-space-2) var(--df-space-4); color: var(--df-text-muted); font-size: var(--df-font-size-sm, inherit); }
.dfRecAn-status:empty { display: none; }
.dfRecAn-status--stale { color: var(--df-warning); background: var(--df-warning-soft); }

/* Recruitment analytics: Forecast page (scripts/domain_recruit_forecast.js). */
.recFc-link { color: var(--df-accent); cursor: pointer; font-weight: 500; }
.recFc-periodBtn.is-active { background: var(--df-accent); color: var(--df-surface); border-color: var(--df-accent); }
.recFc-notes { margin-bottom: var(--df-space-3); }
.recFc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--df-space-4); margin-bottom: var(--df-space-4); }
.recFc-chart { height: 320px; width: 100%; margin-bottom: var(--df-space-4); }
.recFc-grid { height: 440px; width: 100%; }

/* Recruitment analytics: Service levels page */
.dfRecSl-sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: 2px; }
.dfRecSl-danger { color: var(--df-danger); font-weight: 600; }
.dfRecSl-warning { color: var(--df-warning); font-weight: 600; }
#recSlOverdueGrid .lat-row, #recSlStuckGrid .lat-row { cursor: pointer; }

/* Recruitment analytics: Schedule report form */
.dfRecRs-nextRun { font-weight: 600; color: var(--df-text); margin: var(--df-space-3) 0 var(--df-space-2); }
/* The SLA met gauge tile: block layout so its ring can take the tile's full width (the
   default .dfKpi flex row shrinks a lone body to its content width, too narrow for the ring). */
.dfKpi--gauge { display: block; }
/* The ring gauge itself: a muted track, a value arc, and the percentage centred in the
   hole with room on every side, so the figure never collides with the arc. */
.dfRecSl-ring { display: block; width: 104px; height: 104px; margin: var(--df-space-2) auto 0; }
.dfRecSl-ringTrack { fill: none; stroke: var(--df-border); stroke-width: 10; }
.dfRecSl-ringValue {
	fill: none; stroke: var(--df-accent); stroke-width: 10; stroke-linecap: round;
	transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.3s ease;
}
.dfRecSl-ringText { font-size: 20px; font-weight: 700; fill: var(--df-text); }

/* Kanban card used by definition cardTemplates (PRODREQ). */
.dfKanbanCard { padding: var(--df-space-3); background: var(--df-surface); border-left: 4px solid var(--df-accent); border-radius: var(--df-radius-sm); height: 100%; box-sizing: border-box; }
.dfKanbanCard-title { font-weight: 600; font-size: var(--df-font-size); color: var(--df-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfKanbanCard-meta { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: var(--df-space-1); }

/* AUTO > Schedule panel (scripts/automation_schedule_panel.js) */
.dfAutoSched { display: flex; flex-direction: column; gap: var(--df-space-2); padding: var(--df-space-4); box-sizing: border-box; font-size: var(--df-font-size); color: var(--df-text); }
.dfAutoSched-summary { margin: 0; }
.dfAutoSched-hint { margin: 0; color: var(--df-text-muted); }
.dfAutoSched-warning { margin: 0; color: var(--df-warning); }
.dfAutoSched-grid { height: 260px; min-height: 0; }

/* PLANSCENARIO > Review panel (scripts/network_plan_scenario.js) */
.dfPlanScn-hint, .dfPlanScn-warning { margin: 0; padding: var(--df-space-4); font-size: var(--df-font-size); }
.dfPlanScn-hint { color: var(--df-text-muted); }
.dfPlanScn-warning { color: var(--df-warning); }
.dfPlanScn-topoView { display: flex; flex-direction: column; gap: var(--df-space-2); height: 100%; box-sizing: border-box; padding: var(--df-space-2); }
.dfPlanScn-topoRow { display: flex; gap: var(--df-space-3); flex: 1 1 auto; min-height: 320px; }
.dfPlanScn-topoBox { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.dfPlanScn-topoTitle { padding: var(--df-space-2) var(--df-space-3); font-weight: 600; border-bottom: 1px solid var(--df-border); }
.dfPlanScn-topoHost { position: relative; flex: 1 1 auto; min-height: 0; }
.dfPlanScn-sharedWrap { flex: 0 0 180px; }
.dfPlanScn-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--df-space-3); height: 100%; padding: 0 var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text-muted); box-sizing: border-box; }
.dfPlanScn-pill { display: inline-flex; align-items: center; padding: var(--df-space-1) var(--df-space-2); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); font-weight: 600; background: var(--df-surface-sunken); color: var(--df-text-muted); }
.dfPlanScn-pill--warning { background: var(--df-warning-soft); color: var(--df-warning); }
.dfPlanScn-pill--success { background: var(--df-success-soft); color: var(--df-success); }
.dfPlanScn-pill--danger { background: var(--df-danger-soft); color: var(--df-danger); }
.dfPlanScn-stat b { color: var(--df-text); }
.dfPlanScn-stat--warning, .dfPlanScn-stat--warning b { color: var(--df-warning); }
.dfPlanScn-stat--danger, .dfPlanScn-stat--danger b { color: var(--df-danger); }
.dfPlanScn-cellPill { display: inline-flex; align-items: center; padding: 1px var(--df-space-2); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); font-weight: 600; background: var(--df-surface-sunken); color: var(--df-text-muted); }
.dfPlanScn-cellPill--warning { background: var(--df-warning-soft); color: var(--df-warning); }
.dfPlanScn-cellPill--success { background: var(--df-success-soft); color: var(--df-success); }
.dfPlanScn-cellPill--danger { background: var(--df-danger-soft); color: var(--df-danger); }
.dfPlanScn-detail { padding: var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text); box-sizing: border-box; }
.dfPlanScn-detailTitle { font-weight: 600; margin-bottom: var(--df-space-1); }
.dfPlanScn-detailMeta { color: var(--df-text-muted); font-size: var(--df-font-size-sm); margin-bottom: var(--df-space-2); }
.dfPlanScn-detailRow { display: flex; flex-direction: column; gap: 2px; padding: var(--df-space-2) 0; border-bottom: 1px solid var(--df-border); }
.dfPlanScn-detailField { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfPlanScn-detailVal { font-size: var(--df-font-size); }
.dfPlanScn-detailArrow { color: var(--df-text-muted); margin: 0 var(--df-space-1); }

/* ── Logical plan workspace (scripts/network_scenario_logical.js) ───────── */
.netScnL-hint, .netScnL-warning { margin: 0; padding: var(--df-space-4); font-size: var(--df-font-size); }
.netScnL-hint { color: var(--df-text-muted); }
.netScnL-warning { color: var(--df-warning); }
.netScnL-map { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: var(--df-space-2); gap: var(--df-space-2); }
.netScnL-mapNote { flex: 0 0 auto; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netScnL-mapCanvas { position: relative; flex: 1 1 auto; min-height: 0; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.netScnL-gridHost { height: 100%; }
.netScnL-pill { display: inline-flex; align-items: center; padding: 1px var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); }
.netScnL-pill--danger { border-color: var(--df-danger); color: var(--df-danger); }
.netScnL-pill--success { border-color: var(--df-success); color: var(--df-success); }

/* ── Site planner (scripts/site_planner.js, row type siteplanner) ───────── */
.dfPlanner { display: grid; grid-template-columns: 240px 1fr 260px; grid-template-rows: 1fr 28px; height: calc(100vh - 150px); gap: var(--df-space-2); color: var(--df-text); font-size: var(--df-font-size); }
.dfPlanner[data-mode="equip"] { grid-template-columns: 320px 1fr 420px; }
.dfPlanner[data-mode="fit"] { grid-template-columns: 240px 1fr 340px; }
.dfPlanner-rail, .dfPlanner-panel { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: auto; padding: var(--df-space-3); }
.dfPlanner-canvasWrap { position: relative; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
.dfPlanner-canvas, .dfPlanner-canvas3d { position: absolute; inset: 0; cursor: grab; }
.dfPlanner-canvas:active { cursor: grabbing; }
.dfPlanner-svg { display: block; user-select: none; }
.dfPlanner-room { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1.5; }
.dfPlanner-grid { stroke: var(--df-border); stroke-width: 0.5; }
.dfPlanner-tile { fill: var(--df-surface); stroke: var(--df-border); stroke-width: 0.5; }
.dfPlanner-tile--hot { fill: var(--df-danger-soft); }
.dfPlanner-tile--cold { fill: var(--df-accent-soft); }
.dfPlanner-tile--proposed { fill: none; stroke: var(--df-accent); stroke-width: 1.5; stroke-dasharray: 5 3; }
.dfPlanner-tile--outside { fill: var(--df-surface-sunken); stroke: var(--df-text-muted); stroke-dasharray: 2 2; opacity: 0.45; }
.dfPlanner-rack rect { stroke: var(--df-text); stroke-width: 1; cursor: pointer; }
.dfPlanner-rack text { font-size: 10px; fill: var(--df-text); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.dfPlanner-rack--neutral rect { fill: var(--df-border); }
.dfPlanner-rack--live rect { fill: var(--df-border); }
.dfPlanner-rack--planned rect { fill: var(--df-accent-soft); stroke-dasharray: 4 2; }
.dfPlanner-rack--reserved rect { fill: var(--df-warning-soft); stroke-dasharray: 2 2; }
.dfPlanner-rack--retiring rect { fill: var(--df-border); opacity: 0.6; }
.dfPlanner-strike { stroke: var(--df-text-muted); stroke-width: 1.5; pointer-events: none; }
.dfPlanner-rack--success rect { fill: var(--df-success-soft); }
.dfPlanner-rack--warning rect { fill: var(--df-warning-soft); }
.dfPlanner-rack--danger rect { fill: var(--df-danger-soft); }
.dfPlanner-rack--row0 rect { fill: var(--df-accent-soft); }
.dfPlanner-rack--row1 rect { fill: var(--df-success-soft); }
.dfPlanner-rack--row2 rect { fill: var(--df-warning-soft); }
.dfPlanner-rack--row3 rect { fill: var(--uiPurple); }
.dfPlanner-rack--row4 rect { fill: var(--df-danger-soft); }
.dfPlanner-rack--row5 rect { fill: var(--uiGrey); }
.dfPlanner-rack.is-selected rect { stroke: var(--df-accent); stroke-width: 2; }
.dfPlanner-rack.is-dirty rect { stroke: var(--df-warning); }
.dfPlanner-rack .dfPlanner-front { fill: var(--df-accent); stroke: none; }
.dfPlanner-rack .dfPlanner-rackData { font-size: 7px; fill: var(--df-text-muted); }
.dfPlanner-rack .dfPlanner-rackData--low { fill: var(--df-warning); }
.dfPlanner-rack .dfPlanner-rackData--full { fill: var(--df-danger); }
.dfPlanner-rackCard { position: absolute; z-index: 5; max-width: 220px; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-xs); line-height: 1.5; color: var(--df-text); pointer-events: none; }
.dfPlanner-rackCard-name { font-weight: 600; }
.dfPlanner-rackCard-meta { color: var(--df-text-muted); margin-top: var(--df-space-1); }
.dfPlanner-clear { fill: none; stroke: var(--df-text-muted); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.dfPlanner-ghost { fill: none; stroke-width: 2; pointer-events: none; }
.dfPlanner-ghost.is-ok { stroke: var(--df-success); }
.dfPlanner-ghost.is-bad { stroke: var(--df-danger); }
.dfPlanner-ghostClear { fill: none; stroke: var(--df-text-muted); stroke-dasharray: 3 3; pointer-events: none; }
.dfPlanner-ghostText { font-size: 11px; fill: var(--df-danger); }
.dfPlanner-calPt { fill: var(--df-accent); stroke: var(--df-surface); stroke-width: 2; }
.dfPlanner-calText { font-size: 11px; fill: var(--df-accent); font-weight: 600; }
/* Room mode: features (obstructions) and zones (labelled outlines). */
.dfPlanner-roomFeature rect { fill: var(--df-surface); stroke: var(--df-text); stroke-width: 1.25; cursor: pointer; }
.dfPlanner-roomFeature text { font-size: 10px; fill: var(--df-text); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.dfPlanner-roomFeature--door rect { stroke: var(--df-accent); }
.dfPlanner-roomFeature--column rect { stroke: var(--df-text); }
.dfPlanner-roomFeature--coolingUnit rect { stroke: var(--df-success); }
.dfPlanner-roomFeature--powerCabinet rect { stroke: var(--df-warning); }
.dfPlanner-roomFeature--riser rect { stroke: var(--df-text-muted); }
.dfPlanner-roomFeature--ramp rect { stroke: var(--df-accent); }
.dfPlanner-roomFeature--exitRoute rect { stroke: var(--df-danger); }
.dfPlanner-roomFeature--noGo rect { fill: var(--df-danger-soft); stroke: var(--df-danger); }
.dfPlanner-roomFeature--other rect { stroke: var(--df-text-muted); }
.dfPlanner-roomFeature--cableEntry rect { fill: var(--df-accent-soft); stroke: var(--df-accent); }
.dfPlanner-roomEntryIcon line, .dfPlanner-roomEntryIcon rect { fill: none; stroke: var(--df-accent); stroke-width: 1.2; pointer-events: none; }
.dfPlanner-entryLinks { margin-top: var(--df-space-3); }
.dfPlanner-linkForm select, .dfPlanner-linkForm input { width: 100%; }
.dfPlanner-roomZone rect { fill: none; stroke: var(--df-accent); stroke-width: 1.5; stroke-dasharray: 6 4; cursor: pointer; }
.dfPlanner-roomZone text { font-size: 11px; fill: var(--df-text-muted); pointer-events: none; }
.dfPlanner-roomZoneCount { font-size: 9px; fill: var(--df-text-muted); opacity: 0.75; }
.dfPlanner-roomZone--suite rect { stroke: var(--df-success); }
.dfPlanner-roomZone--cage rect { stroke: var(--df-warning); }
.dfPlanner-roomZone--hotAisle rect { stroke: var(--df-danger); }
.dfPlanner-roomZone--coldAisle rect { stroke: var(--df-accent); }
.dfPlanner-roomKeepClear { fill: var(--df-danger-soft); stroke: var(--df-danger); stroke-width: 0.75; stroke-dasharray: 3 3; opacity: 0.5; pointer-events: none; }
.dfPlanner-roomArc { fill: none; stroke: var(--df-accent); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
.dfPlanner-roomGhost { fill: none; stroke: var(--df-accent); stroke-width: 2; stroke-dasharray: 5 3; pointer-events: none; }
.dfPlanner-roomFeature.is-dirty rect, .dfPlanner-roomZone.is-dirty rect { stroke: var(--df-warning); }
.dfPlanner-roomFeature.is-selected rect, .dfPlanner-roomZone.is-selected rect { stroke: var(--df-accent); stroke-width: 2.5; }
.dfPlanner-roomHandle { fill: var(--df-surface); stroke: var(--df-accent); stroke-width: 1; cursor: pointer; }
/* Site planner: hot/cold/mixed aisles (derived from rack facing, tiles and zones). */
.dfPlanner-aisle { cursor: pointer; }
.dfPlanner-aisle .dfPlanner-aisleFill { fill: var(--df-accent-soft); }
.dfPlanner-aisle--hot .dfPlanner-aisleFill { fill: var(--df-danger-soft); }
.dfPlanner-aisle--mixed .dfPlanner-aisleFill { fill: url(#dfAisleHatch); }
.dfPlanner-aisle .dfPlanner-aisleOutline { fill: none; stroke: var(--df-text-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.dfPlanner-aisle--cold .dfPlanner-aisleOutline { stroke: var(--df-accent); }
.dfPlanner-aisle--hot .dfPlanner-aisleOutline { stroke: var(--df-danger); }
.dfPlanner-aisle.is-selected .dfPlanner-aisleOutline { stroke: var(--df-accent); stroke-width: 2; }
.dfPlanner-aisleLabel { font-size: 10px; fill: var(--df-text); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.dfPlanner-aisleTag { font-size: 8px; fill: var(--df-text-muted); text-anchor: middle; pointer-events: none; }
.dfPlanner-hatchBg { fill: var(--df-surface); }
.dfPlanner-hatchLine { stroke: var(--df-text-muted); stroke-width: 1.5; }
/* Racks that face an aisle the wrong way. */
.dfPlanner-rack--warn rect { stroke: var(--df-warning); stroke-width: 2.5; }
.dfPlanner-rack--dup rect { stroke-dasharray: 5 3; }
.dfPlanner-warnItem small { color: var(--df-text-muted); word-break: break-word; }
/* Layout warnings in the right panel. */
.dfPlanner-warnList { list-style: none; margin: 0 0 var(--df-space-3); padding: 0; }
.dfPlanner-warnItem { display: flex; gap: var(--df-space-2); align-items: flex-start; padding: var(--df-space-1) 0; font-size: var(--df-font-size-xs); color: var(--df-text-muted); border-bottom: 1px solid var(--df-border); }
.dfPlanner-warnItem i { color: var(--df-warning); }
.dfPlanner-warnItem b { color: var(--df-text); }
.dfPlanner-warnItem--rack { cursor: pointer; }
.dfPlanner-warnItem--rack:hover { color: var(--df-text); }
.dfPlanner-warnItem--rack:hover b { color: var(--df-accent); }
.dfPlanner-legend { position: absolute; left: var(--df-space-3); bottom: var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-xs); box-shadow: var(--df-shadow); pointer-events: none; }
.dfPlanner-legendTitle { font-weight: 600; margin-bottom: var(--df-space-1); }
.dfPlanner-legendItem { display: flex; align-items: center; gap: var(--df-space-2); line-height: 18px; }
.dfPlanner-legendScale { color: var(--df-text-muted); margin-top: var(--df-space-1); }
.dfPlanner-swatch { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--df-text); }
.dfPlanner-swatch.dfPlanner-rack--neutral, .dfPlanner-swatch.dfPlanner-rack--live { background: var(--df-border); }
.dfPlanner-swatch.dfPlanner-rack--planned, .dfPlanner-swatch.dfPlanner-rack--row0 { background: var(--df-accent-soft); }
.dfPlanner-swatch.dfPlanner-rack--reserved, .dfPlanner-swatch.dfPlanner-rack--warning, .dfPlanner-swatch.dfPlanner-rack--row2 { background: var(--df-warning-soft); }
.dfPlanner-swatch.dfPlanner-rack--success, .dfPlanner-swatch.dfPlanner-rack--row1 { background: var(--df-success-soft); }
.dfPlanner-swatch.dfPlanner-rack--danger, .dfPlanner-swatch.dfPlanner-rack--row4 { background: var(--df-danger-soft); }
.dfPlanner-swatch.dfPlanner-rack--row3 { background: var(--uiPurple); }
.dfPlanner-swatch.dfPlanner-rack--row5 { background: var(--uiGrey); }
.dfPlanner-swatch.dfPlanner-rack--retiring { background: var(--df-border); opacity: 0.6; }
.dfPlanner-swatchFront { display: inline-block; width: 14px; height: 3px; background: var(--df-accent); }
.dfPlanner-status { grid-column: 1 / -1; display: flex; gap: var(--df-space-4); align-items: center; padding: 0 var(--df-space-3); font-size: var(--df-font-size-xs); color: var(--df-text-muted); border-top: 1px solid var(--df-border); }
.dfPlanner-statusSpacer { flex: 1; }
.dfPlanner-dirty { color: var(--df-warning); font-weight: 600; }
.dfPlanner-treeTitle, .dfPlanner-panelTitle, .dfPlanner-propsTitle { font-weight: 600; margin: var(--df-space-2) 0 var(--df-space-1); display: flex; align-items: center; gap: var(--df-space-2); }
.dfPlanner-tree { list-style: none; margin: 0 0 var(--df-space-3); padding: 0; }
.dfPlanner-treeRow { display: flex; align-items: center; justify-content: space-between; font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; margin-top: var(--df-space-2); }
.dfPlanner-rowEdit { border: 0; background: none; padding: 0 var(--df-space-1); color: var(--df-text-muted); cursor: pointer; font-size: var(--df-font-size-xs); }
.dfPlanner-rowEdit:hover { color: var(--df-accent); }
.dfPlanner-suite { margin-top: var(--df-space-2); }
.dfPlanner-suiteHead { display: flex; align-items: baseline; gap: var(--df-space-2); font-weight: 600; }
.dfPlanner-suiteSum { font-weight: 400; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfPlanner-suiteBody { list-style: none; margin: 0; padding: 0 0 0 var(--df-space-2); }
.dfPlanner-rowPop { display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-4); }
.dfPlanner-rowPopLabel { display: flex; flex-direction: column; gap: var(--df-space-1); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfPlanner-rowPopLabel input { font: inherit; padding: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); color: var(--df-text); }
.dfPlanner-treeRack { padding: 2px var(--df-space-2); border-radius: var(--df-radius-sm); cursor: pointer; }
.dfPlanner-treeRack:hover { background: var(--df-surface-sunken); }
.dfPlanner-treeRack.is-selected { background: var(--df-accent-soft); color: var(--df-accent); }
.dfPlanner-props { border-top: 1px solid var(--df-border); padding-top: var(--df-space-2); }
.dfPlanner-prop { display: flex; justify-content: space-between; gap: var(--df-space-2); padding: 3px 0; border-bottom: 1px solid var(--df-border); }
.dfPlanner-propLabel { color: var(--df-text-muted); }
.dfPlanner-propValue { text-align: right; }
.dfPlanner-propValue input, .dfPlanner-propValue select { width: 110px; font: inherit; padding: 2px 4px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); }
.dfPlanner-propsActions { display: flex; flex-wrap: wrap; gap: var(--df-space-2); margin-top: var(--df-space-2); }
.dfPlanner-propsHint, .dfPlanner-panelHint { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: var(--df-space-2); }
.dfPlanner-badge { display: inline-block; font-size: var(--df-font-size-xs); background: var(--df-accent-soft); color: var(--df-accent); border-radius: 999px; padding: 0 6px; }
.dfPlanner-tray { list-style: none; margin: 0 0 var(--df-space-3); padding: 0; }
.dfPlanner-trayItem { display: grid; grid-template-columns: 18px 1fr; column-gap: var(--df-space-2); padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); margin-bottom: var(--df-space-1); cursor: grab; background: var(--df-surface); }
.dfPlanner-trayItem:hover { border-color: var(--df-accent); }
.dfPlanner-trayItem i { grid-row: span 2; align-self: center; color: var(--df-text-muted); }
.dfPlanner-trayItem small { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
select.dfPlanner-input { padding: 0 var(--df-space-1); background: var(--df-surface); color: var(--df-text); }
.dfPlanner-trayItem.is-selected { border-color: var(--df-accent); background: var(--df-accent-soft); }
.dfPlanner-trayCount { color: var(--df-text-muted); font-size: var(--df-font-size-xs); margin-bottom: var(--df-space-1); }
.dfPlanner-nonRack { display: block; color: var(--df-text-muted); font-size: var(--df-font-size-xs); margin-bottom: var(--df-space-2); }
.dfPlanner-compCard { border: 1px solid var(--df-accent); border-radius: var(--df-radius-sm); background: var(--df-surface); padding: var(--df-space-2); margin-bottom: var(--df-space-3); }
.dfPlanner-compCardName { font-weight: 600; margin-bottom: var(--df-space-1); }
.dfPlanner-compCardList { display: grid; grid-template-columns: auto 1fr; column-gap: var(--df-space-2); margin: 0 0 var(--df-space-2); font-size: var(--df-font-size-xs); }
.dfPlanner-compCardList dt { color: var(--df-text-muted); }
.dfPlanner-compCardList dd { margin: 0; }
.dfPlanner-compCardForm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--df-space-2); font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfPlanner-compCardBtns { display: flex; gap: var(--df-space-1); flex-wrap: wrap; }
.dfPlanner-compBtn { height: 28px; padding: 0 var(--df-space-3); border: 1px solid var(--df-accent); border-radius: var(--df-radius-sm); background: var(--df-accent); color: var(--df-surface); font: inherit; cursor: pointer; }
.dfPlanner-compBtn:disabled { opacity: 0.5; cursor: not-allowed; }
.dfPlanner-empty { color: var(--df-text-muted); font-size: var(--df-font-size-xs); padding: var(--df-space-2) 0; }
/* Network link carriage: the layer stack on NWLINK (scripts/network_carriage.js, row type nwlinkcarriage). */
.dfCarriage-row { margin-bottom: var(--df-space-3); }
.dfCarriage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text); }
.dfCarriage-main { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); min-width: 0; overflow: hidden; }
.dfCarriage-grid { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-auto-rows: auto; gap: var(--df-space-2); align-content: start; }
.dfCarriage-head { align-self: end; font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.04em; min-height: 0; }
.dfCarriage-head.is-centre { text-align: center; }
.dfCarriage-label, .dfCarriage-cell, .dfCarriage-wide { min-height: 48px; box-sizing: border-box; }
.dfCarriage-label { display: flex; flex-direction: column; justify-content: center; font-weight: 600; }
.dfCarriage-code { font-size: var(--df-font-size-xs); font-weight: 400; color: var(--df-text-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.dfCarriage-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--df-font-size-sm); }
.dfCarriage-cell { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: var(--df-space-1) var(--df-space-2); text-align: center; min-width: 0; overflow-wrap: anywhere; }
.dfCarriage-cell.is-end { border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); }
.dfCarriage-cell.is-span { color: var(--df-text-muted); font-size: var(--df-font-size-sm); flex-direction: row; flex-wrap: wrap; gap: var(--df-space-1); }
.dfCarriage-cell.is-link.is-end { border: 2px solid var(--df-accent); }
.dfCarriage-cell.is-link.is-span { border-top: 2px solid var(--df-accent); border-bottom: 2px solid var(--df-accent); background: var(--df-accent-soft); color: var(--df-accent); }
.dfCarriage-wide { grid-column: 2 / 5; display: flex; align-items: center; flex-wrap: wrap; gap: var(--df-space-2); padding: var(--df-space-1) var(--df-space-3); background: var(--df-surface-sunken); border-radius: var(--df-radius-sm); min-width: 0; }
.dfCarriage-note { margin-left: auto; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfCarriage-chip { display: inline-flex; align-items: center; padding: 2px var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); font: inherit; font-size: var(--df-font-size-sm); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfCarriage-chip:hover { border-color: var(--df-accent); color: var(--df-accent); }
.dfCarriage-chip:focus-visible, .dfCarriage-duct:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 1px; }
.dfCarriage-chip.is-shared { border-color: var(--df-warning); background: var(--df-warning-soft); }
.dfCarriage-chip--more, .dfCarriage-chip--plain { cursor: default; color: var(--df-text-muted); }
.dfCarriage-chip--more:hover, .dfCarriage-chip--plain:hover { border-color: var(--df-border); color: var(--df-text-muted); }
.dfCarriage-muted { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfCarriage-gap { color: var(--df-warning); font-size: var(--df-font-size-sm); font-style: italic; }
.dfCarriage-strip { display: flex; align-items: stretch; gap: 1px; flex: 1; min-width: 160px; height: 22px; }
.dfCarriage-duct { flex: 1 1 0; min-width: 2px; padding: 0; border: 0; border-radius: 2px; background: var(--df-border); cursor: pointer; }
.dfCarriage-duct:nth-child(even) { background: var(--df-text-muted); opacity: 0.35; }
.dfCarriage-duct.is-shared, .dfCarriage-duct.is-shared:nth-child(even) { background: var(--df-warning); opacity: 1; }
.dfCarriage-aside { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-2); min-width: 0; font-size: var(--df-font-size-sm); }
.dfCarriage-aside p { margin: 0; }
.dfCarriage-asideHead { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-2); font-weight: 600; font-size: var(--df-font-size-md); }
.dfCarriage-subhead { font-weight: 600; margin-bottom: var(--df-space-1); }
.dfCarriage-summary { font-size: var(--df-font-size-sm); }
.dfCarriage-pill { flex: none; padding: 1px var(--df-space-2); border-radius: var(--df-radius-lg); font-size: var(--df-font-size-xs); font-weight: 600; background: var(--uiGrey); color: var(--df-text); }
.dfCarriage-pill--complete { background: var(--df-success-soft); color: var(--df-success); }
.dfCarriage-pill--partial { background: var(--df-warning-soft); color: var(--df-text); }
.dfCarriage-gaps { border-left: 3px solid var(--df-warning); padding-left: var(--df-space-2); }
.dfCarriage-gaps ul, .dfCarriage-info { margin: 0; padding-left: var(--df-space-4); }
.dfCarriage-info { color: var(--df-text-muted); }
.dfCarriage-steps { margin: 0; padding-left: var(--df-space-4); display: flex; flex-direction: column; gap: 2px; color: var(--df-text-muted); }
.dfCarriage-diversity, .dfCarriage-foot { border-top: 1px solid var(--df-border); padding-top: var(--df-space-2); display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfCarriage-shared { display: flex; flex-direction: column; gap: 2px; padding: var(--df-space-2); background: var(--df-warning-soft); border-radius: var(--df-radius-sm); }
.dfCarriage-foot .dfc-btn { align-self: flex-start; }

/* Service stack panel (LOGICALCONNECTION > Service stack, scripts/network_service_stack.js). */
.netStack-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--df-space-3); padding: var(--df-space-3); }
.netStack-worst { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.netStack-truncated { margin: 0 var(--df-space-3) var(--df-space-2); color: var(--df-warning); font-size: var(--df-font-size-sm); }
.netStack-gridHost { height: 260px; padding: 0 var(--df-space-3); box-sizing: border-box; }
.netStack-section { padding: var(--df-space-3); border-top: 1px solid var(--df-border); margin-top: var(--df-space-2); }
.netStack-layerScores { display: flex; flex-wrap: wrap; gap: var(--df-space-3); }
.netStack-layerScore { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.netStack-layerLabel { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.netStack-layerPct { font-size: var(--df-font-size-md); font-weight: 600; color: var(--df-text); }
.netStack-gapList { margin: var(--df-space-2) 0 0; padding-left: var(--df-space-4); display: flex; flex-direction: column; gap: var(--df-space-1); }
.netStack-gapItem { font-size: var(--df-font-size-sm); color: var(--df-text); }
.netStack-gapItem--high, .netStack-gapItem--critical { color: var(--df-danger); }
.netStack-gapItem--medium { color: var(--df-warning); }
.netStack-empty { color: var(--df-text-muted); font-size: var(--df-font-size-sm); padding: var(--df-space-3); margin: 0; }
.netStack-saveBtn { margin-top: var(--df-space-3); max-width: 260px; }
.netStack-alertLink { color: var(--df-accent); font-weight: 600; cursor: pointer; }
.netStack-views { padding: 0 var(--df-space-3); }
.netStack-diagramHost { padding: var(--df-space-2) var(--df-space-3); overflow-x: auto; }
.netStack-svg { display: block; max-width: 1200px; font-family: inherit; }
.netStack-band { fill: var(--df-surface-sunken); stroke: var(--df-border); stroke-width: 1; }
.netStack-bandLabel { fill: var(--df-text); font-size: var(--df-font-size-md); font-weight: 600; }
.netStack-bandCount { fill: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.netStack-bandCount--affected { fill: var(--df-danger); font-weight: 600; }
.netStack-link { fill: none; stroke: var(--df-text-muted); stroke-width: 1.5; opacity: 0.7; }
.netStack-box { outline: none; }
.netStack-boxRect { fill: var(--df-surface); stroke: var(--df-border); stroke-width: 1.5; }
.netStack-box--ok .netStack-boxRect { fill: var(--df-success-soft); stroke: var(--df-success); }
.netStack-box--degraded .netStack-boxRect { fill: var(--df-warning-soft); stroke: var(--df-warning); }
.netStack-box--down .netStack-boxRect { fill: var(--df-danger-soft); stroke: var(--df-danger); }
.netStack-box--unknown .netStack-boxRect { fill: var(--df-surface-sunken); stroke: var(--df-text-muted); stroke-dasharray: 4 3; }
.netStack-box--worst .netStack-boxRect { stroke: var(--df-text); stroke-width: 3; }
.netStack-box--open { cursor: pointer; }
.netStack-box--open:hover .netStack-boxRect, .netStack-box:focus .netStack-boxRect { stroke: var(--df-accent); stroke-width: 3; }
.netStack-boxName { fill: var(--df-text); font-size: var(--df-font-size); font-weight: 600; pointer-events: none; }
.netStack-boxSub { fill: var(--df-text-muted); font-size: var(--df-font-size-xs); pointer-events: none; }
.netStack-box--info .netStack-boxRect { fill: var(--df-surface); stroke: var(--df-border); }
.netStack-box--gap .netStack-boxName { fill: var(--df-text-muted); font-weight: 400; }
.netStack-box--gap .netStack-boxRect { stroke-dasharray: 4 3; }
.netStack-state { fill: none; stroke: var(--df-text); stroke-width: 1.5; pointer-events: none; }
.netStack-state--planned { stroke-dasharray: 3 2; }
.netStack-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-4); padding: var(--df-space-2) var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.netStack-legendTitle { color: var(--df-text); font-weight: 600; }
.netStack-legendItem { display: inline-flex; align-items: center; gap: var(--df-space-1); }
.netStack-split { display: flex; gap: var(--df-space-3); height: 100%; min-height: 560px; padding: var(--df-space-3); box-sizing: border-box; }
.netStack-splitList { flex: 0 0 380px; min-width: 0; height: 560px; }
.netStack-splitStack { flex: 1 1 auto; min-width: 0; overflow: auto; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.netStack-selected { padding: var(--df-space-3) var(--df-space-3) 0; font-weight: 600; color: var(--df-text); }
.netStack-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--df-text-muted); background: var(--df-surface); box-sizing: border-box; vertical-align: middle; }
.netStack-dot--ok { border-color: var(--df-success); background: var(--df-success-soft); }
.netStack-dot--degraded { border-color: var(--df-warning); background: var(--df-warning-soft); }
.netStack-dot--down { border-color: var(--df-danger); background: var(--df-danger-soft); }
.netStack-dotText { margin-left: var(--df-space-2); color: var(--df-text-muted); }
/* Network capacity forecast (PRODREQ-0000357) */
.netFcast-detail { padding: var(--df-space-4); box-sizing: border-box; }
.netFcast-detail h4 { margin: 0 0 var(--df-space-2); font-size: var(--df-font-size-md); font-weight: 600; color: var(--df-text); }
.netFcast-detail dl { margin: 0 0 var(--df-space-4); display: grid; grid-template-columns: auto 1fr; gap: var(--df-space-1) var(--df-space-2); font-size: var(--df-font-size); color: var(--df-text); }
.netFcast-detail dt { color: var(--df-text-muted); }
.netFcast-detail dd { margin: 0; }
.netFcast-chart { height: 260px; }
.netFcast-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--df-space-3); height: 100%; box-sizing: border-box; padding-bottom: var(--df-space-3); }
.netFcast-card { min-width: 0; }
.netFcast-meter { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.netFcast-seg { width: 10px; height: 14px; border-radius: 2px; background: var(--df-border); }
.netFcast-meter--success .netFcast-seg.is-on { background: var(--df-success); }
.netFcast-meter--warning .netFcast-seg.is-on { background: var(--df-warning); }
.netFcast-meter--danger .netFcast-seg.is-on { background: var(--df-danger); }
.netFcast-meterNone { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.netFcast-empty, .netFcast-note { color: var(--df-text-muted); font-size: var(--df-font-size); margin: 0 0 var(--df-space-2); }
.netFcast-pill { display: inline-block; padding: 1px var(--df-space-2); border-radius: var(--df-radius-lg); font-size: var(--df-font-size-xs); font-weight: 600; background: var(--uiGrey); color: var(--df-text); }
.netFcast-pill--yes { background: var(--df-danger-soft); color: var(--df-danger); }
.netFcast-pill--no { background: var(--df-success-soft); color: var(--df-success); }
.netFcast-pill--unknown { background: var(--uiGrey); color: var(--df-text-muted); }
.dfPlannerThumb { display: flex; flex-direction: column; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); overflow: hidden; }
.dfPlannerThumb-head { display: flex; justify-content: space-between; align-items: center; padding: var(--df-space-2) var(--df-space-3); font-weight: 600; border-bottom: 1px solid var(--df-border); }
.dfPlannerThumb-canvas { flex: 1; background: var(--df-surface-sunken); }
.dfPlannerThumb-foot { padding: var(--df-space-1) var(--df-space-3); font-size: var(--df-font-size-xs); color: var(--df-text-muted); border-top: 1px solid var(--df-border); }
.dfPlanner-dim { font-size: 10px; fill: var(--df-text-muted); text-anchor: middle; dominant-baseline: middle; }
.dfPlanner-rowLabel { font-size: 10px; font-weight: 600; fill: var(--df-text-muted); text-anchor: end; dominant-baseline: middle; }
.dfPlannerThumb-foot { display: flex; flex-wrap: wrap; gap: var(--df-space-4); }
.dfPlannerThumb-key { display: inline-flex; align-items: center; gap: var(--df-space-1); }
.dfPlannerThumb-canvas { min-height: 0; }
/* Site planner: Equip mode elevation */
:root { --df-elev-u: 14px; }
.dfPlanner-input { height: 30px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: 0 var(--df-space-2); font: inherit; width: 100%; box-sizing: border-box; margin-bottom: var(--df-space-2); }
.dfPlanner-tabs { display: flex; gap: var(--df-space-1); margin-bottom: var(--df-space-2); }
.dfPlanner-tab { height: 24px; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); border-radius: 999px; background: var(--df-surface); color: var(--df-text-muted); font: inherit; font-size: var(--df-font-size-xs); cursor: pointer; }
.dfPlanner-tab.is-active { background: var(--df-accent-soft); color: var(--df-accent); border-color: var(--df-accent); }
.dfElev-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--df-space-2); flex-wrap: wrap; margin-bottom: var(--df-space-2); }
.dfElev-sub { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dfElev-stats { display: flex; gap: var(--df-space-3); font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfElev-faces { display: grid; grid-template-columns: 1fr 1fr; gap: var(--df-space-3); }
.dfElev-faceTitle { text-align: center; font-size: var(--df-font-size-xs); font-weight: 600; color: var(--df-text-muted); margin-bottom: var(--df-space-1); }
.dfElev-grid { display: grid; grid-template-columns: 22px 1fr 1fr; column-gap: 3px; border: 1px solid var(--df-text); border-radius: var(--df-radius-sm); padding: 3px; background: var(--df-surface-sunken); position: relative; }
.dfElev-u { grid-column: 1; font-size: 9px; color: var(--df-text-muted); text-align: right; line-height: var(--df-elev-u); }
.dfElev-slot { grid-column: 2 / span 2; border: 1px dashed var(--df-border); background: var(--df-surface); box-sizing: border-box; }
.dfElev-item { grid-column: 2 / span 2; background: var(--df-border); border: 1px solid var(--df-text-muted); border-radius: 2px; font-size: 10px; line-height: 12px; padding: 1px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--df-text); cursor: grab; box-sizing: border-box; display: flex; align-items: center; }
.dfElev-item--L { grid-column: 2; }
.dfElev-item--R { grid-column: 3; }
.dfElev-item--odf { background: var(--df-accent-soft); border-color: var(--df-accent); cursor: default; }
.dfElev-item--planned { background: var(--df-accent-soft); border-style: dashed; }
.dfElev-item--reserved { background: var(--df-danger-soft); border-color: var(--df-danger); color: var(--df-danger); }
.dfElev-item.is-dirty { border-color: var(--df-warning); box-shadow: inset 0 0 0 1px var(--df-warning); }
.dfElev-ghost { grid-column: 2 / span 2; border: 2px solid var(--df-success); background: var(--df-success-soft); pointer-events: none; box-sizing: border-box; }
.dfElev-ghost.is-bad { border-color: var(--df-danger); background: var(--df-danger-soft); }
.dfElev-feedback { margin-top: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); background: var(--df-surface-sunken); color: var(--df-text-muted); }
.dfElev-feedback.is-ok { background: var(--df-success-soft); color: var(--df-success); }
.dfElev-feedback.is-bad { background: var(--df-danger-soft); color: var(--df-danger); }
.dfElev-zeroU { display: flex; gap: var(--df-space-1); align-items: center; flex-wrap: wrap; margin-top: var(--df-space-2); font-size: var(--df-font-size-xs); }
.dfElev-zeroULabel { color: var(--df-text-muted); font-weight: 600; }
.dfElev-chip { background: var(--df-warning-soft); border: 1px solid var(--df-warning); border-radius: 999px; padding: 0 var(--df-space-2); }
.dfElev-parking { margin-top: var(--df-space-2); padding: var(--df-space-2); border: 1px dashed var(--df-border); border-radius: var(--df-radius-sm); text-align: center; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfElev-parking.is-over { border-color: var(--df-accent); background: var(--df-accent-soft); }
/* Site planner: patching chips on the elevation */
.dfElev-item.has-ports { flex-wrap: wrap; white-space: normal; align-content: flex-start; }
.dfElev-ports { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; margin-top: 1px; }
.dfElev-port { height: 11px; min-width: 14px; padding: 0 3px; border: 1px solid var(--df-text-muted); border-radius: 2px; background: var(--df-surface); color: var(--df-text); font: inherit; font-size: 8px; line-height: 9px; cursor: pointer; }
.dfElev-port.is-used { background: var(--df-accent-soft); border-color: var(--df-accent); color: var(--df-accent); }
.dfElev-port.is-staged { background: var(--df-warning-soft); border-color: var(--df-warning); }
.dfElev-port.is-pending { outline: 2px solid var(--df-accent); outline-offset: 1px; }
.dfElev-port.is-target { outline: 2px solid var(--df-success); outline-offset: 1px; }
.dfElev-port.is-target.is-bad { outline-color: var(--df-danger); }
.dfElev-port.is-range { outline: 2px solid var(--df-accent); outline-offset: 1px; }
.dfElev-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: var(--df-space-2); margin-top: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); background: var(--df-success-soft); color: var(--df-success); }
.dfElev-bulk.is-bad { background: var(--df-danger-soft); color: var(--df-danger); }
.dfElev-connList { margin-top: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: var(--df-space-2); max-height: 160px; overflow: auto; }
.dfElev-connHead { display: flex; align-items: center; gap: var(--df-space-2); font-weight: 600; margin-bottom: var(--df-space-1); }
.dfElev-conn { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--df-space-2); align-items: center; padding: 2px 0; font-size: var(--df-font-size-xs); border-bottom: 1px solid var(--df-border); }
.dfElev-conn.is-staged { color: var(--df-warning); }
.dfElev-conn.is-deleting .dfElev-connName { text-decoration: line-through; color: var(--df-danger); }
.dfElev-connKind { padding: 0 6px; border-radius: 999px; background: var(--df-surface-sunken); color: var(--df-text-muted); }
.dfElev-connName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfElev-connSpec { font: inherit; font-size: var(--df-font-size-xs); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); }
/* Site planner: trays and routes */
.dfPlanner-tray { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; cursor: pointer; }
.dfPlanner-tray--ok { stroke: var(--df-success); }
.dfPlanner-tray--warning { stroke: var(--df-warning); }
.dfPlanner-tray--danger { stroke: var(--df-danger); }
.dfPlanner-tray.is-draft { stroke-dasharray: 8 5; }
.dfPlanner-tray.is-selected { opacity: 1; stroke-width: 9; }
.dfPlanner-tray.is-route { stroke: var(--df-accent); opacity: 1; }
.dfPlanner-tray.is-picked { stroke: var(--df-accent); stroke-dasharray: 6 4; opacity: 1; }
.dfPlanner-trayGhost { stroke: var(--df-accent); stroke-width: 2; stroke-dasharray: 4 3; pointer-events: none; }
.dfPlanner-trayLabel { font-size: 10px; fill: var(--df-text-muted); text-anchor: middle; pointer-events: none; }
.dfPlanner-node { fill: var(--df-surface); stroke: var(--df-text); stroke-width: 1.5; cursor: crosshair; }
.dfPlanner-node--drop { stroke: var(--df-accent); }
.dfPlanner-node.is-draft { stroke-dasharray: 2 2; }
.dfPlanner-node.is-from { fill: var(--df-accent); }
.dfPlanner-route { grid-template-columns: 18px 1fr auto; }
.dfPlanner-route input { align-self: center; }
.dfPlanner-route .dfPlanner-routeSpec { grid-column: 2 / span 2; font: inherit; font-size: var(--df-font-size-xs); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); margin-top: 2px; }
.dfPlanner-route.has-warn { border-color: var(--df-warning); }
.dfPlanner-route.is-bad { border-color: var(--df-danger); }
.dfPlanner-warn { color: var(--df-warning); grid-column: 2 / span 2; }
.dfPlanner-trayItem.is-selected { border-color: var(--df-accent); background: var(--df-accent-soft); }
.dfPlanner-route > span { grid-column: 2; }
/* Site planner: Plan BOM popout (scripts/site_planner_bom.js) */
.dfBom-head { display: flex; align-items: center; gap: var(--df-space-3); }
.dfBom-room { font-weight: 600; }
.dfBom-date { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dfBom-exportBtn { margin-left: auto; }
.dfBom-gridHost { height: 100%; width: 100%; }
.dfPlanner-route > small { grid-column: 2; }
.dfPlanner-trayItem.dfPlanner-route > input { grid-row: span 3; align-self: start; margin-top: 3px; }
/* Site planner: top bar (mode bar in the toolbar cell) */
.dfPlanner-bar { display: flex; align-items: center; gap: var(--df-space-3); height: 50px; padding: 0 var(--df-space-4); font-size: var(--df-font-size); color: var(--df-text); white-space: nowrap; overflow: hidden; }
.dfPlanner-barTitle { font-weight: 600; font-size: var(--df-font-size-md); }
.dfPlanner-crumb { color: var(--df-text-muted); }
.dfPlanner-crumb b { color: var(--df-text); font-weight: 500; }
.dfPlanner-crumbSep { margin: 0 2px; }
.dfPlanner-seg { display: flex; gap: 2px; padding: 3px; background: var(--df-surface-sunken); border-radius: var(--df-radius); }
.dfPlanner-segBtn { height: 28px; padding: 0 var(--df-space-3); border: 0; border-radius: 6px; background: transparent; color: var(--df-text-muted); font: inherit; cursor: pointer; }
.dfPlanner-segBtn.is-active { background: var(--df-surface); color: var(--df-accent); font-weight: 600; box-shadow: var(--df-shadow); }
.dfPlanner-chips { display: flex; gap: var(--df-space-1); }
.dfPlanner-chip { height: 26px; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); border-radius: 999px; background: var(--df-surface); color: var(--df-text-muted); font: inherit; font-size: var(--df-font-size-sm); cursor: pointer; }
.dfPlanner-chip.is-on { border-color: var(--df-accent); background: var(--df-accent-soft); color: var(--df-accent); }
.dfPlanner-colour { display: flex; align-items: center; gap: var(--df-space-1); color: var(--df-text-muted); }
.dfPlanner-colour select { height: 28px; border: 1px solid var(--df-border); border-radius: 6px; background: var(--df-surface); font: inherit; padding: 0 var(--df-space-1); }
.dfPlanner-barSpacer { flex: 1; }
.dfPlanner-iconBtn { width: 32px; height: 32px; border: 1px solid var(--df-border); border-radius: 6px; background: var(--df-surface); color: var(--df-text); font: inherit; cursor: pointer; }
.dfPlanner-iconBtn:disabled { color: var(--df-text-muted); opacity: 0.5; cursor: default; }
.dfPlanner-save { height: 32px; padding: 0 var(--df-space-4); border: 0; border-radius: 6px; background: var(--df-border); color: var(--df-text-muted); font: inherit; font-weight: 600; cursor: pointer; }
.dfPlanner-save.is-dirty { background: var(--df-accent); color: #fff; }
.dfPlanner-zoom { position: absolute; right: var(--df-space-3); bottom: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-1); }
/* Site planner: mode bar fits narrower windows (labels drop, layers fold into a dropdown) */
.dfPlanner-layersDd { position: relative; }
.dfPlanner-layersDd > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--df-space-1); height: 26px; cursor: pointer; }
.dfPlanner-layersDd > summary::-webkit-details-marker { display: none; }
.dfPlanner-layersDd[open] > .dfPlanner-chips { position: absolute; top: 32px; left: 0; z-index: 30; flex-wrap: wrap; width: 260px; padding: var(--df-space-2); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); }
@media (max-width: 1900px) { .dfPlanner-segBtn .dfPlanner-lbl { display: none; } .dfPlanner-segBtn { padding: 0 var(--df-space-2); } .dfPlanner-segBtn.is-active .dfPlanner-lbl { display: inline; } }
@media (max-width: 1500px) { .dfPlanner-crumb { display: none; } }
.dfPlanner-rack.is-fit rect { stroke: var(--df-success); stroke-width: 3; stroke-dasharray: 6 3; }
.dfPlanner-fitItem { grid-template-columns: auto 1fr auto; align-items: center; }
.dfPlanner-fitItem input { width: 40px; font: inherit; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: 2px 4px; }
.dfPlanner-fitCats { max-height: 180px; overflow: auto; }
.dfPlanner-fitQty { display: inline-flex; align-items: center; gap: 2px; }
.dfPlanner-fitCard { grid-template-columns: 20px 1fr; }
.dfPlanner-fitCard small { grid-column: 2; display: block; color: var(--df-text-muted); }
.dfPlanner-fitNew { fill: none; stroke: var(--df-success); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.dfPlanner-fitNewText { font-size: 11px; fill: var(--df-success); pointer-events: none; dominant-baseline: middle; }

/* Site planner trace (hop table and highlighted chips) */
.dfElev-port.is-trace { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-surface); }
.dfTrace { padding: 12px; font-size: 13px; color: var(--df-text); }
.dfTrace-table { width: 100%; border-collapse: collapse; }
.dfTrace-table th, .dfTrace-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--df-border); }
.dfTrace-table th { color: var(--df-text-muted); font-weight: 600; }
.dfTrace-table tr.is-cable td, .dfTrace-table tr.is-internal td { color: var(--df-text-muted); background: var(--df-surface-sunken); }
.dfTrace-end { margin-top: 10px; font-weight: 600; }
.dfTrace-end.is-conflict, .dfTrace-end.is-loop, .dfTrace-end.is-unterminated { color: var(--df-danger); }
.dfTrace-summary { margin-top: 4px; color: var(--df-text-muted); }
.dfTrace-actions, .dfTrace-bar { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
/* Site planner: elevations side by side */
.dfElev-multi { display: flex; gap: var(--df-space-3); align-items: flex-start; }
.dfElev-one { flex: 1 1 0; min-width: 0; }
.dfElev-multi.is-multi .dfElev-faces { gap: var(--df-space-1); }
.dfElev-multi.is-multi .dfElev-item { font-size: 9px; }
.dfPlanner-rack.is-extra rect { stroke: var(--df-accent); stroke-dasharray: 4 2; stroke-width: 2; }
.dfElev-multi.is-multi .dfElev-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.dfElev-multi.is-multi .dfElev-stats { flex-wrap: wrap; gap: 2px var(--df-space-2); }
.dfPlanner-routed { grid-template-columns: 18px 1fr auto; cursor: default; }
.dfPlanner-routedActions { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: var(--df-space-1); align-items: stretch; align-self: center; }

.dfPlannerThumb-canvas { min-height: 160px; }
.dfPlannerThumb-canvas svg { display: block; }

/* ── Platform network footprint (row type nwplatfootprint, scripts/network_platform_footprint.js) ── */
.dfFootprint { display: flex; flex-direction: column; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); color: var(--df-text); overflow: hidden; }
.dfFootprint-head { display: flex; justify-content: space-between; align-items: center; padding: var(--df-space-2) var(--df-space-3); border-bottom: 1px solid var(--df-border); }
.dfFootprint-title { font-weight: 600; font-size: var(--df-font-size-md); }
.dfFootprint-actions { display: inline-flex; gap: var(--df-space-2); }
.dfFootprint-primary { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-surface); }
.dfFootprint-primary:disabled { opacity: 0.5; cursor: default; }
.dfFootprint-body { flex: 1; min-height: 0; overflow: auto; padding: var(--df-space-3); }
.dfFootprint-table { width: 100%; max-width: 640px; border-collapse: collapse; font-size: var(--df-font-size); }
.dfFootprint-table th { text-align: left; font-weight: 600; font-size: var(--df-font-size-sm); color: var(--df-text-muted); padding: var(--df-space-1) var(--df-space-2); border-bottom: 1px solid var(--df-border); }
.dfFootprint-table td { padding: var(--df-space-2); border-bottom: 1px solid var(--df-border); }
.dfFootprint-table tbody tr { cursor: pointer; }
.dfFootprint-table tbody tr:hover, .dfFootprint-table tbody tr.is-open { background: var(--df-surface-sunken); }
.dfFootprint-table tbody tr:focus-visible { outline: 2px solid var(--df-accent); outline-offset: -2px; }
.dfFootprint-num { text-align: right; font-variant-numeric: tabular-nums; width: 110px; }
.dfFootprint-derived { color: var(--df-warning); font-weight: 600; }
.dfFootprint-chev { width: 24px; color: var(--df-text-muted); text-align: center; }
.dfFootprint-note { margin: var(--df-space-2) 0 var(--df-space-3); max-width: 640px; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfFootprint-sub { margin: var(--df-space-3) 0 var(--df-space-1); font-weight: 600; font-size: var(--df-font-size-sm); }
.dfFootprint-grid { height: 280px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); }
.dfFootprint-pick { display: flex; flex-direction: column; height: 100%; }
.dfFootprint-pickSummary { margin: 0; padding: var(--df-space-3) var(--df-space-4); }
.dfFootprint-pickGrid { flex: 1; min-height: 0; }

/* ── Dependants panel (row type nwdependants, scripts/network_depgraph_loader.js) ── */
.dfDependants { display: flex; flex-direction: column; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); color: var(--df-text); overflow: hidden; }
.dfDependants-summary { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--df-space-3); padding: var(--df-space-3); border-bottom: 1px solid var(--df-border); }
.dfDependants-stat { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.dfDependants-stat-n { font-size: var(--df-font-size-xl); font-weight: 700; color: var(--df-accent); }
.dfDependants-stat-l { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfDependants-counts { display: flex; flex-wrap: wrap; gap: var(--df-space-2); align-items: center; margin-left: auto; }
.dfDependants-count { display: flex; align-items: baseline; gap: 4px; background: var(--df-surface-sunken); border-radius: var(--df-radius-sm); padding: var(--df-space-1) var(--df-space-2); }
.dfDependants-count-n { font-weight: 600; font-size: var(--df-font-size); }
.dfDependants-count-l { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfDependants-note { margin: var(--df-space-2) var(--df-space-3) 0; font-size: var(--df-font-size-sm); color: var(--df-warning); }
.dfDependants-grid { flex: 1; min-height: 0; padding: var(--df-space-3); }

/* ── Site cabling (scripts/site_cabling.js, row type sitecabling) ───────── */
.dfSiteCabling-headerBar { padding: var(--df-space-2) var(--df-space-4); font-weight: 600; color: var(--df-text-muted); }
.dfSiteCabling-statusLine { color: var(--df-text-muted); }
.dfSiteCabling-grid { height: 100%; box-sizing: border-box; padding: 0 var(--df-space-4) var(--df-space-4); }
.dfSiteCabling-previewTable { width: 100%; border-collapse: collapse; margin-top: var(--df-space-3); font-size: var(--df-font-size-sm); }
.dfSiteCabling-previewTable th, .dfSiteCabling-previewTable td { border: 1px solid var(--df-border); padding: var(--df-space-1) var(--df-space-2); text-align: left; }
.dfSiteCabling-skipped { margin-top: var(--df-space-3); color: var(--df-text-muted); }
.dfSiteCablingPanel { border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.dfSiteCablingPanel-head { display: flex; align-items: center; justify-content: space-between; padding: var(--df-space-3) var(--df-space-4); border-bottom: 1px solid var(--df-border); font-weight: 600; }
.dfSiteCablingPanel-body { padding: var(--df-space-3) var(--df-space-4); color: var(--df-text-muted); }

/* Product roadmap: timeline with unplanned tray, Now/Next/Later board, table
   (scripts/entity_product_roadmap.js). */
.dfPmRoad { height: calc(100vh - 150px); display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-4); box-sizing: border-box; overflow: hidden; }
.dfPmRoad-message { text-align: center; padding: calc(var(--df-space-4) * 3) var(--df-space-4); color: var(--df-text-muted); }
.dfPmRoad-tray { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-2); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-2) var(--df-space-3); max-height: 120px; overflow-y: auto; }
.dfPmRoad-trayTitle { font-weight: 600; margin-right: var(--df-space-2); }
.dfPmRoad-trayChip { display: inline-flex; align-items: center; gap: var(--df-space-1); background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: 999px; padding: 1px var(--df-space-2); }
.dfPmRoad-trayName { cursor: pointer; }
.dfPmRoad-trayName:hover { color: var(--df-accent); }
.dfPmRoad-schedule { cursor: pointer; background: var(--df-accent-soft); color: var(--df-accent); border: 0; border-radius: var(--df-radius); padding: 1px var(--df-space-2); font-size: var(--df-font-size-xs); font-weight: 600; }
.dfPmRoad-chart { flex: 1 1 auto; min-height: 0; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); overflow: hidden; }
.dfPmRoad-grid { flex: 1 1 auto; min-height: 0; border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
.dfPmRoad-board { flex: 1 1 auto; min-height: 0; display: flex; gap: var(--df-space-3); overflow-x: auto; }
.dfPmRoad-lane { flex: 1 1 0; min-width: 260px; display: flex; flex-direction: column; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); min-height: 0; }
.dfPmRoad-laneHead { display: flex; justify-content: space-between; align-items: center; padding: var(--df-space-2) var(--df-space-3); font-weight: 600; border-bottom: 1px solid var(--df-border); }
.dfPmRoad-count { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: 999px; padding: 0 var(--df-space-2); font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfPmRoad-laneBody { flex: 1 1 auto; overflow-y: auto; padding: var(--df-space-2); display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfPmRoad-card { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-1); cursor: grab; }
.dfPmRoad-card:hover { border-color: var(--df-accent); }
.dfPmRoad-cardHead { display: flex; justify-content: space-between; align-items: center; gap: var(--df-space-2); }
.dfPmRoad-cardName { font-weight: 600; }
.dfPmRoad-pop { display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-4); }
.dfPmRoad-pop label { display: flex; flex-direction: column; gap: var(--df-space-1); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfPmRoad-pop input, .dfPmRoad-pop select { padding: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); color: inherit; }
.dfPmRoad-popTitle { font-weight: 600; }
.dfPmRoad-filterRow { display: grid; grid-template-columns: 1fr 90px 1.4fr auto; gap: var(--df-space-2); align-items: center; margin-bottom: var(--df-space-2); }

.dfPmRoad-save { display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-4); }
.dfPmRoad-save label { display: flex; flex-direction: column; gap: var(--df-space-1); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfPmRoad-save .dfPmRoad-check { flex-direction: row; align-items: center; gap: var(--df-space-2); color: var(--df-text); }
.dfPmRoad-input { font: inherit; padding: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm, var(--df-radius)); background: var(--df-surface); color: var(--df-text); }

.dfPmRoad-trayToggle { font: inherit; font-size: var(--df-font-size-sm); color: var(--df-accent); background: none; border: 0; cursor: pointer; padding: var(--df-space-1) var(--df-space-2); }
.dfPmRoad-trayReqs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--df-space-2); max-height: 160px; overflow-y: auto; }

/* Priority poker: sessions list, new-session popout and the session view
   (scripts/entity_product_poker.js). */
.dfPmPoker { height: calc(100vh - 150px); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; }
.dfPmPoker-message { text-align: center; padding: calc(var(--df-space-4) * 3) var(--df-space-4); color: var(--df-text-muted); }
.dfPmPoker-grid { flex: 1 1 auto; min-height: 0; border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; margin: var(--df-space-4); }
.dfPmPoker-new { display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-4); }
.dfPmPoker-pick { min-height: 0; }
.dfPmPoker-pickGrid { height: 220px; border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
.dfPmPoker-session { height: 100%; display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-4); box-sizing: border-box; overflow-y: auto; }
.dfPmPoker-sessionHead { display: flex; align-items: center; gap: var(--df-space-2); }
.dfPmPoker-itemNav { display: flex; align-items: center; }
.dfPmPoker-item { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-3) var(--df-space-4); display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfPmPoker-itemHead { display: flex; align-items: center; gap: var(--df-space-2); }
.dfPmPoker-itemName { font-weight: 600; font-size: var(--df-font-size-lg); }
.dfPmPoker-itemDesc { color: var(--df-text-muted); }
.dfPmPoker-voteRows { display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfPmPoker-voteRow { display: flex; align-items: center; gap: var(--df-space-3); flex-wrap: wrap; }
.dfPmPoker-voteLabel { min-width: 160px; font-weight: 600; }
.dfPmPoker-voteButtons { display: flex; gap: var(--df-space-2); flex-wrap: wrap; }
.dfPmPoker-voteBtn { min-width: 44px; padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); color: var(--df-text); font: inherit; font-weight: 600; cursor: pointer; }
.dfPmPoker-voteBtn:hover { border-color: var(--df-accent); }
.dfPmPoker-voteBtn--selected { border: 2px solid var(--df-accent); color: var(--df-accent); background: var(--df-accent-soft); }
.dfPmPoker-results { display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfPmPoker-resultCard { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-3) var(--df-space-4); display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfPmPoker-resultHead { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-2); }
.dfPmPoker-resultLabel { font-weight: 600; }
.dfPmPoker-chart { height: 180px; }
.dfPmPoker-resultsFooter { display: flex; align-items: center; gap: var(--df-space-3); flex-wrap: wrap; }
.dfPmPoker-overrideForm { flex: 1 1 auto; min-width: 220px; }

/* Product feedback inbox */
.dfPmInbox { height: calc(100vh - 150px); display: flex; gap: var(--df-space-4); padding: var(--df-space-4); box-sizing: border-box; }
.dfPmInbox-left { width: 380px; flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--df-space-2); padding-right: var(--df-space-1); }
.dfPmInbox-right { flex: 1; min-width: 0; overflow-y: auto; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-4); box-sizing: border-box; }
.dfPmInbox-bulk { display: flex; flex-wrap: wrap; gap: var(--df-space-2); }
.dfPmInbox-row { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); cursor: pointer; }
.dfPmInbox-row:hover { border-color: var(--df-accent); }
.dfPmInbox-row.is-selected { background: var(--df-accent-soft); border-color: var(--df-accent); }
.dfPmInbox-row-head { display: flex; gap: var(--df-space-2); align-items: flex-start; }
.dfPmInbox-check { margin-top: 2px; flex-shrink: 0; }
.dfPmInbox-row-body { flex: 1; min-width: 0; }
.dfPmInbox-row-name { font-weight: 600; }
.dfPmInbox-row-meta { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfPmInbox-text { line-height: 1.7; font-size: var(--df-font-size-lg); margin: var(--df-space-3) 0; }
.dfPmInbox-mark { background: var(--df-warning-soft); border-radius: 3px; cursor: pointer; }
.dfPmInbox-heading { font-size: var(--df-font-size-2xl); margin: 0 0 var(--df-space-2); }
.dfPmInbox-interpretation { margin: var(--df-space-3) 0; }
.dfPmInbox-evidence { margin: var(--df-space-4) 0 var(--df-space-3); }
.dfPmInbox-evidence h3 { margin: 0 0 var(--df-space-3); font-size: var(--df-font-size-lg); }
.dfPmInbox-evidenceRow { padding: var(--df-space-2) 0; border-top: 1px solid var(--df-border); }
.dfPmInbox-quote { font-style: italic; color: var(--df-text); }
.dfPmInbox-evidenceMeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-2); margin-top: var(--df-space-1); }
.dfPmInbox-actions { display: flex; flex-wrap: wrap; gap: var(--df-space-2); margin-top: var(--df-space-4); }
.dfPmInbox-link { color: var(--df-accent); cursor: pointer; }
.dfPmInbox-link:hover { text-decoration: underline; }
.dfPmInbox-empty { text-align: center; padding: 48px 16px; color: var(--df-text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--df-space-3); }
.dfPmInbox-btn { cursor: pointer; background: var(--df-surface); color: var(--df-text); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-1) var(--df-space-3); font-size: var(--df-font-size-sm); font-weight: 600; }
.dfPmInbox-btn:hover { border-color: var(--df-accent); color: var(--df-accent); }
.dfPmInbox-btn.is-active, .dfPmInbox-btn.is-primary { background: var(--df-accent-soft); color: var(--df-accent); border-color: var(--df-accent); }
.dfPmInbox-match { padding: var(--df-space-1) var(--df-space-2); border-radius: var(--df-radius-sm); cursor: pointer; }
.dfPmInbox-match:hover { background: var(--df-surface-sunken); }
.dfPmInbox-match.is-active { background: var(--df-accent-soft); }
.dfPmInbox-pop { position: fixed; z-index: 1000; width: 320px; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-2); box-sizing: border-box; }
.dfPmInbox-popQuote { font-size: var(--df-font-size-sm); color: var(--df-text-muted); border-left: 2px solid var(--df-warning-soft); padding-left: var(--df-space-2); }
.dfPmInbox-popSearch { font: inherit; padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); }
.dfPmInbox-popMatches { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.dfPmInbox-popImportance { display: flex; flex-wrap: wrap; gap: var(--df-space-1); }
.dfPmInbox-popActions { display: flex; align-items: center; gap: var(--df-space-2); }

/* Accounting: Sales invoices / Bills (invoice.js) */
li.dfAccToolbarPrimary { background: var(--df-accent); }
li.dfAccToolbarPrimary span { color: #fff; }
li.dfAccToolbarPrimary:hover { background: var(--df-accent); opacity: 0.9; }
li.dfAccToolbarPrimary:hover span { color: #fff; }
.dfAccTabsBar { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-3); padding: 0 0 var(--df-space-2) 0; flex-wrap: wrap; }
.dfAccTabs { display: flex; gap: var(--df-space-2); flex-wrap: wrap; }
.dfAccTab { font: inherit; font-size: var(--df-font-size); cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--df-radius); padding: var(--df-space-1) var(--df-space-3); color: var(--df-text-muted); }
.dfAccTab:hover { background: var(--df-surface-sunken); color: var(--df-text); }
.dfAccTab.dfAccTabActive { background: var(--df-accent-soft); color: var(--df-accent); font-weight: 600; }
.dfAccTab.dfAccTabDanger { color: var(--df-danger); }
.dfAccTab.dfAccTabDanger.dfAccTabActive { background: var(--df-danger-soft); color: var(--df-danger); }
.dfAccTabTotal { font-weight: 400; }
.dfAccSearchWrap { flex-shrink: 0; }
.dfAccSearchInput { font: inherit; font-size: var(--df-font-size-sm); padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); min-width: 260px; background: var(--df-surface); color: var(--df-text); }
.dfAccEmptyActions { display: flex; justify-content: center; padding: var(--df-space-2) 0; }
.dfAccChip { display: inline-block; padding: 2px var(--df-space-2); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text); }
.dfAccBtn { font: inherit; font-size: var(--df-font-size-sm); font-weight: 600; cursor: pointer; padding: var(--df-space-2) var(--df-space-3); border-radius: var(--df-radius-sm); border: 1px solid var(--df-border); background: var(--df-surface); color: var(--df-text); }
.dfAccBtn:hover { border-color: var(--df-accent); color: var(--df-accent); }
.dfAccBtn.dfAccBtnPrimary { background: var(--df-accent); border-color: var(--df-accent); color: #fff; }
.dfAccBtn.dfAccBtnPrimary:hover { color: #fff; opacity: 0.9; }
.dfAccBtn.dfAccBtnDanger { border-color: var(--df-danger-soft); color: var(--df-danger); }
.dfAccBtn.dfAccBtnDanger:hover { border-color: var(--df-danger); color: var(--df-danger); }

.dfAccInvEditor { display: flex; flex-direction: column; gap: var(--df-space-4); padding: var(--df-space-4) calc(var(--df-space-4) * 1.5) calc(var(--df-space-4) * 1.5); height: 100%; box-sizing: border-box; overflow-y: auto; }
.dfAccInvHeaderGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--df-space-3); }
.dfAccField { display: flex; flex-direction: column; gap: 4px; font-size: var(--df-font-size-sm); color: var(--df-text-muted); position: relative; }
.dfAccField input, .dfAccField select, .dfAccField textarea { font: inherit; font-size: var(--df-font-size); color: var(--df-text); padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); }
.dfAccFieldWide { grid-column: span 2; }
.dfAccFieldError { color: var(--df-danger); font-size: var(--df-font-size-xs); min-height: 14px; }
.dfAccFieldHint { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dfAccRadioRow { display: flex; gap: var(--df-space-4); align-items: center; }
.dfAccRadio { display: flex; align-items: center; gap: 4px; font-size: var(--df-font-size-sm); color: var(--df-text); font-weight: 400; }
.dfAccTypeahead { position: relative; }
.dfAccTypeaheadList { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); box-shadow: var(--df-shadow); max-height: 220px; overflow-y: auto; }
.dfAccTypeaheadItem { padding: var(--df-space-2) var(--df-space-3); cursor: pointer; font-size: var(--df-font-size); color: var(--df-text); }
.dfAccTypeaheadItem:hover { background: var(--df-surface-sunken); }
.dfAccTypeaheadItem.dfAccTypeaheadNew { color: var(--df-accent); border-top: 1px solid var(--df-border); }
.dfAccTypeaheadHead { padding: var(--df-space-2) var(--df-space-3) var(--df-space-1); font-size: var(--df-font-size-xs); color: var(--df-text-muted); border-top: 1px solid var(--df-border); text-transform: none; }
.dfAccLines { min-height: 220px; }
.dfAccLineDelete { cursor: pointer; color: var(--df-danger-soft); }
.dfAccLineDelete:hover { color: var(--df-danger); }
.dfAccInvBottom { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--df-space-4); flex-wrap: wrap; }
.dfAccInvTimeline { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAccTimelineItem { padding: 2px 0; }
.dfAccInvTotals { min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.dfAccTotalsRow { display: flex; justify-content: space-between; gap: var(--df-space-4); font-size: var(--df-font-size); color: var(--df-text); }
.dfAccTotalsRow.dfAccTotalsStrong { font-weight: 700; border-top: 1px solid var(--df-border); padding-top: var(--df-space-1); }
.dfAccInvActions { display: flex; gap: var(--df-space-2); flex-wrap: wrap; padding-top: var(--df-space-3); border-top: 1px solid var(--df-border); }

/* Accounting: Reconcile (domain_accounting_reconcile.js) */
.dfAccRecHeader { display: flex; align-items: flex-end; gap: var(--df-space-4); flex-wrap: wrap; padding: 0 0 var(--df-space-3) 0; }
.dfAccRecBank { min-width: 260px; }
.dfAccRecCount { font-size: var(--df-font-size-xl); color: var(--df-text); }
.dfAccRecCount-num { font-size: var(--df-font-size-2xl); font-weight: 700; }
.dfAccRecBalances { margin-left: auto; display: flex; gap: var(--df-space-4); flex-wrap: wrap; }
.dfAccRecBal { display: flex; flex-direction: column; align-items: flex-end; }
.dfAccRecBal-label { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAccRecBal-value { font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-text); }
.dfAccRecBal--ok .dfAccRecBal-value { color: var(--df-success); }
.dfAccRecBal--bad .dfAccRecBal-value { color: var(--df-danger); }
.dfAccRecBody { height: 100%; width: 100%; overflow: auto; }
/* One column, as reconciling is usually laid out, capped so the form never stretches across a wide screen. */
.dfAccRecList { display: flex; flex-direction: column; gap: var(--df-space-3); padding-bottom: var(--df-space-3); max-width: 1150px; }
.dfAccRecCard { display: flex; align-items: stretch; gap: var(--df-space-4); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-4); box-sizing: border-box; transition: height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease; }
.dfAccRecCard.is-leaving { overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: calc(var(--df-space-3) * -1); border-width: 0; }
.dfAccRecCard--pending { opacity: 0.6; background: var(--df-surface-sunken); align-items: center; }
.dfAccRecPendingText { flex: 1; color: var(--df-text-muted); font-size: var(--df-font-size); }
.dfAccRecLeft { flex: 0 0 210px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dfAccRecDate { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAccRecPayee { font-size: var(--df-font-size-md); font-weight: 700; color: var(--df-text); overflow-wrap: anywhere; }
.dfAccRecMuted { font-size: var(--df-font-size-sm); color: var(--df-text-muted); overflow-wrap: anywhere; }
.dfAccRecPad { padding: var(--df-space-2) 0; }
.dfAccRecAmount { margin-top: auto; padding-top: var(--df-space-2); text-align: right; font-size: var(--df-font-size-lg); font-weight: 600; }
.dfAccRecAmount--in { color: var(--df-success); }
.dfAccRecAmount--out { color: var(--df-text); }
.dfAccRecMid { flex: 0 0 auto; display: flex; align-items: center; }
.dfAccRecOk { min-width: 84px; height: 56px; font-size: var(--df-font-size-lg); font-weight: 700; border: 0; border-radius: var(--df-radius); background: var(--df-border); color: var(--df-text-muted); cursor: pointer; }
.dfAccRecOk:disabled { cursor: not-allowed; opacity: 0.6; }
.dfAccRecOk:not(:disabled) { background: var(--df-accent); color: var(--df-surface); }
.dfAccRecOk.is-match:not(:disabled) { background: var(--df-success); }
.dfAccRecRight { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfAccRecTabs { display: flex; align-items: center; gap: var(--df-space-1); border-bottom: 1px solid var(--df-border); }
.dfAccRecTab { border: 0; background: transparent; padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.dfAccRecTab.is-active { color: var(--df-accent); border-bottom-color: var(--df-accent); font-weight: 600; }
.dfAccRecMenuWrap { margin-left: auto; position: relative; }
.dfAccRecMenuBtn { border: 0; background: transparent; cursor: pointer; font-size: var(--df-font-size-lg); color: var(--df-text-muted); padding: 0 var(--df-space-2); }
.dfAccRecMenu { position: absolute; right: 0; top: 100%; z-index: 20; display: flex; flex-direction: column; min-width: 200px; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); box-shadow: var(--df-shadow); }
.dfAccRecMenu[hidden] { display: none; }
.dfAccRecMenu button { border: 0; background: transparent; text-align: left; padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text); cursor: pointer; }
.dfAccRecMenu button:hover { background: var(--df-surface-sunken); }
.dfAccRecPane[hidden] { display: none; }
.dfAccRecCand { display: flex; align-items: center; gap: var(--df-space-3); padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); margin-bottom: var(--df-space-1); cursor: pointer; }
.dfAccRecCand:hover { background: var(--df-surface-sunken); }
.dfAccRecCand.is-on { border-color: var(--df-success); background: var(--df-success-soft); }
.dfAccRecCand-main { flex: 1; min-width: 0; }
.dfAccRecCand-num { font-weight: 600; color: var(--df-text); }
.dfAccRecCand-amt { font-weight: 600; color: var(--df-text); white-space: nowrap; }
.dfAccRecTick { width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; pointer-events: none; }
.dfAccRecCand.is-on .dfAccRecTick { background: var(--df-success); border-color: var(--df-success); color: var(--df-surface); }
.dfAccRecChip { display: inline-block; padding: 0 var(--df-space-2); border-radius: var(--df-radius-lg); background: var(--df-success-soft); color: var(--df-success); font-size: var(--df-font-size-xs); font-weight: 600; }
.dfAccRecChip--soft { background: var(--df-accent-soft); color: var(--df-accent); }
.dfAccRecSummary { padding: var(--df-space-2) 0; font-size: var(--df-font-size); color: var(--df-danger); }
.dfAccRecSummary.is-ok { color: var(--df-success); }
.dfAccRecFind { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAccRecFindWrap { padding: var(--df-space-4); }
.dfAccRecFindList { margin-top: var(--df-space-3); max-height: 60vh; overflow: auto; }
.dfAccRecMore { display: flex; justify-content: center; padding: var(--df-space-2) 0 var(--df-space-4) 0; }
.dfAccRecBtn { border: 1px solid var(--df-border); background: var(--df-surface); color: var(--df-text); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-4); font-size: var(--df-font-size); cursor: pointer; }
.dfAccRecBtn--primary { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-surface); }
.dfAccRecEmpty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--df-space-3); text-align: center; padding: 64px var(--df-space-4); }
.dfAccRecEmpty-title { font-size: var(--df-font-size-xl); font-weight: 600; color: var(--df-text); }
.dfAccRecEmpty-text { color: var(--df-text-muted); font-size: var(--df-font-size-md); }
.dfAccRecUndo { margin-left: var(--df-space-2); font-weight: 700; text-decoration: underline; color: inherit; }

/* Accounting: Bank accounts (domain_accounting_bank.js) */
.dfAccBankTop { display: flex; flex-direction: column; gap: var(--df-space-3); padding: 0 0 var(--df-space-3) 0; }
.dfAccBankControls { display: flex; gap: var(--df-space-3); align-items: flex-end; flex-wrap: wrap; }
.dfAccBankLabel { display: flex; flex-direction: column; gap: var(--df-space-1); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAccBankSelect { font: inherit; font-size: var(--df-font-size); color: var(--df-text); padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); min-width: 160px; }
.dfAccBankSelect--wide { min-width: 260px; }
.dfAccBankHead { display: flex; align-items: center; gap: var(--df-space-4); flex-wrap: wrap; padding: var(--df-space-3) var(--df-space-4); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); }
.dfAccBankHead-main { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.dfAccBankHead-name { font-size: var(--df-font-size-lg); font-weight: 700; color: var(--df-text); }
.dfAccBankHead-feed { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAccBankHead-figs { margin-left: auto; display: flex; align-items: center; gap: var(--df-space-4); flex-wrap: wrap; }
.dfAccBankFig { display: flex; flex-direction: column; align-items: flex-end; }
.dfAccBankFig-label { font-size: var(--df-font-size-sm); color: var(--df-text-muted); white-space: nowrap; }
.dfAccBankFig-value { font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-text); white-space: nowrap; }
.dfAccBankFig--bad .dfAccBankFig-value { color: var(--df-danger); }
.dfAccBankDone { font-size: var(--df-font-size); color: var(--df-success); font-weight: 600; white-space: nowrap; }
.dfAccBankFeed--ok { color: var(--df-success); }
.dfAccBankFeed--warn { color: var(--df-warning); }
.dfAccBankFeed--bad { color: var(--df-danger); }
/* ── Accounting reports screen: left list, period bar and statement rows ── */
.dfAccRptNav { display: flex; flex-direction: column; gap: var(--df-space-1); padding: var(--df-space-2); height: 100%; box-sizing: border-box; background: var(--df-surface); border-right: 1px solid var(--df-border); }
.dfAccRptNavItem { appearance: none; background: none; border: 0; border-radius: var(--df-radius-sm); padding: var(--df-space-2) var(--df-space-3); text-align: left; font: inherit; font-size: var(--df-font-size); color: var(--df-text); cursor: pointer; }
.dfAccRptNavItem:hover { background: var(--df-surface-sunken); }
.dfAccRptNavItem.is-active { background: var(--df-accent-soft); color: var(--df-accent); font-weight: 600; }
.dfAccRptNavItem:focus-visible { outline: 2px solid var(--df-accent); outline-offset: -2px; }
.dfAccRptPeriod { background: var(--df-surface); border-bottom: 1px solid var(--df-border); }
.dfAccRptInfo { display: flex; align-items: center; gap: var(--df-space-3); padding: var(--df-space-2) var(--df-space-4); font-size: var(--df-font-size); color: var(--df-text); background: var(--df-surface); overflow: auto; height: 100%; box-sizing: border-box; }
.dfAccRptMuted { color: var(--df-text-muted); }
.dfAccRptStatus { display: inline-block; padding: 2px var(--df-space-2); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); font-weight: 600; }
.dfAccRptStatus--ok { background: var(--df-success-soft); color: var(--df-success); }
.dfAccRptStatus--bad { background: var(--df-danger-soft); color: var(--df-danger); }
.dfAccRptIc { display: flex; gap: var(--df-space-3); width: 100%; }
.dfAccRptIcCard { flex: 1; border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-3); background: var(--df-surface-sunken); }
.dfAccRptIcTitle { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAccRptIcAmount { font-size: var(--df-font-size-xl); font-weight: 700; }
.dfAccRptCell { display: flex; align-items: center; gap: var(--df-space-2); height: 100%; width: 100%; box-sizing: border-box; color: var(--df-text); white-space: nowrap; }
.dfAccRptCell.is-end { justify-content: flex-end; }
.dfAccRptCell.is-link { cursor: pointer; }
.dfAccRptCell.is-link:hover { color: var(--df-accent); text-decoration: underline; }
.dfAccRptCode { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfAccRptCaret { width: var(--df-space-3); color: var(--df-text-muted); }
.dfAccRptRow--head, .dfAccRptRow--contact, .dfAccRptRow--sub, .dfAccRptRow--total { font-weight: 700; }
.dfAccRptRow--acct, .dfAccRptRow--invoice { padding-left: var(--df-space-4); }
.dfAccRptRow--sub { border-top: 1px solid var(--df-text); }
.dfAccRptRow--total { border-top: 1px solid var(--df-text); border-bottom: 3px double var(--df-text); }
.dfAccRptRow--meta { color: var(--df-text-muted); }
.dfAccRptRow--meta.is-title { color: var(--df-text); font-size: var(--df-font-size-lg); font-weight: 700; }

/* Accounting home: Xero-style cards on the Lattice dashboard (scripts/domain_accounting_home.js). */
.dfAccHomeCard { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); color: var(--df-text); overflow: hidden; }
.dfAccHomeCard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-3); padding: var(--df-space-4) var(--df-space-4) var(--df-space-3); }
.dfAccHomeCard-titles { min-width: 0; }
.dfAccHomeCard-title { font-size: var(--df-font-size-lg); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfAccHomeCard-sub { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-top: 2px; }
.dfAccHomeCard-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--df-space-4) var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfAccHomeCard-foot { display: flex; gap: var(--df-space-2); flex-wrap: wrap; padding: var(--df-space-3) var(--df-space-4); border-top: 1px solid var(--df-border); }
.dfAccHomeBadge { flex-shrink: 0; font-size: var(--df-font-size-xs); font-weight: 600; padding: 2px var(--df-space-2); border-radius: 999px; background: var(--df-surface-sunken); color: var(--df-text-muted); border: 1px solid var(--df-border); }
.dfAccHomeBadge--warning { background: var(--df-warning-soft); color: var(--df-warning); border-color: var(--df-warning-soft); }
.dfAccHomeBadge--danger { background: var(--df-danger-soft); color: var(--df-danger); border-color: var(--df-danger-soft); }
.dfAccHomeFigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--df-space-3); }
.dfAccHomeFig-label { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAccHomeFig-value { font-size: var(--df-font-size-xl); font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.dfAccHomeFig-sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: 2px; }
.dfAccHomeFig--danger .dfAccHomeFig-value { color: var(--df-danger); }
.dfAccHomeFigBig { font-size: var(--df-font-size-2xl); font-weight: 700; }
.dfAccHomeLine { display: flex; justify-content: space-between; align-items: baseline; gap: var(--df-space-3); font-size: var(--df-font-size); padding: var(--df-space-2) 0; border-top: 1px solid var(--df-border); }
.dfAccHomeLine-value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dfAccHomeGroup + .dfAccHomeLine { border-top: 0; }
.dfAccHomeGroup { font-size: var(--df-font-size-xs); font-weight: 700; color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--df-space-2); }
.dfAccHomeGroup:first-child { margin-top: 0; }
.dfAccHomeCard .is-link { cursor: pointer; }
.dfAccHomeCard .is-link:hover, .dfAccHomeCard .is-link:hover .dfAccHomeLine-label { color: var(--df-accent); }
.dfAccHomeCard [role="button"]:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
.dfAccHomeMuted { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfAccHomeNote { font-size: var(--df-font-size-sm); }
.dfAccHomeTone--success { color: var(--df-success); font-weight: 600; }
.dfAccHomeTone--warning { color: var(--df-warning); font-weight: 600; }
.dfAccHomeTone--danger { color: var(--df-danger); font-weight: 600; }
.dfAccHomeTone--muted { color: var(--df-text-muted); }
.dfAccHomeChart { height: 130px; flex-shrink: 0; }
.dfAccHomeChart--tall { height: 170px; }
.dfAccHomeChart--short { height: 90px; }
.dfAccHomeEmpty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--df-space-3); color: var(--df-text-muted); padding: var(--df-space-4) 0; }
.dfAccHomeTable { width: 100%; border-collapse: collapse; font-size: var(--df-font-size-sm); table-layout: fixed; }
.dfAccHomeTable th { text-align: left; font-weight: 600; color: var(--df-text-muted); padding: var(--df-space-1) var(--df-space-1) var(--df-space-1) 0; border-bottom: 1px solid var(--df-border); }
.dfAccHomeTable td { padding: var(--df-space-2) var(--df-space-1) var(--df-space-2) 0; border-bottom: 1px solid var(--df-border); }
.dfAccHomeTable .dfAccHomeNum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0; }
.dfAccHomeTable th.dfAccHomeNum { width: 28%; }
.dfAccHomeEllipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Site planner: circuits ending at the site (rail section, detail, trace hop) */
.dfPlanner-rack.is-circuit rect { stroke: var(--df-success); stroke-width: 3.5; }
.dfElev-port.is-circuit { outline: 2px solid var(--df-success); outline-offset: 1px; }
.dfPlanner-circuits { margin: var(--df-space-2) 0; border-top: 1px solid var(--df-border); padding-top: var(--df-space-2); }
.dfPlanner-circuitsHead { display: flex; align-items: center; gap: var(--df-space-2); margin-bottom: var(--df-space-1); }
.dfPlanner-circuitsToggle { display: flex; align-items: center; gap: var(--df-space-2); border: 0; background: none; padding: 0; color: var(--df-text); font: inherit; font-weight: 600; cursor: pointer; }
.dfPlanner-circuitList { list-style: none; margin: var(--df-space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfPlanner-circuit { padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); cursor: pointer; }
.dfPlanner-circuit.is-selected { border-color: var(--df-accent); background: var(--df-accent-soft); }
.dfPlanner-circuitHead { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-2); }
.dfPlanner-circuitName { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfPlanner-circuitMeta { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dfPlanner-state { flex: none; font-size: var(--df-font-size-xs); border-radius: 999px; padding: 0 6px; border: 1px solid var(--df-border); }
.dfPlanner-state--muted { background: var(--df-surface); color: var(--df-text-muted); }
.dfPlanner-state--warning { background: var(--df-warning-soft); color: var(--df-warning); border-color: var(--df-warning); }
.dfPlanner-state--accent { background: var(--df-accent-soft); color: var(--df-accent); border-color: var(--df-accent); }
.dfPlanner-state--success { background: var(--df-success-soft); color: var(--df-success); border-color: var(--df-success); }
.dfPlanner-circuitDetailItem { list-style: none; }
.dfPlanner-circuitDetail { margin: var(--df-space-1) 0 var(--df-space-2); padding: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); cursor: default; }
.dfPlanner-circuitSummary { font-weight: 600; margin-bottom: var(--df-space-1); }
.dfPlanner-circuitEnd { margin-bottom: var(--df-space-2); }
.dfPlanner-circuitEndHead { font-weight: 600; color: var(--df-text-muted); display: flex; align-items: center; gap: var(--df-space-2); }
.dfPlanner-circuitMsg { margin: var(--df-space-1) 0; padding: var(--df-space-1) var(--df-space-2); border-radius: var(--df-radius); font-size: var(--df-font-size-sm); background: var(--df-accent-soft); color: var(--df-accent); }
.dfPlanner-circuitMsg--warning { background: var(--df-warning-soft); color: var(--df-warning); }
.dfPlanner-pickHint { color: var(--df-accent); font-weight: 600; }
.dfTrace-table tr.is-circuit td { background: var(--df-success-soft); }

/* ── Network map: logical links over the physical plant (scripts/network_logical_map.js) ── */
.dfLmap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--df-space-2); height: calc(100vh - 150px); color: var(--df-text); font-size: var(--df-font-size); }
.dfLmap-mapWrap { position: relative; border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; background: var(--df-surface-sunken); }
.dfLmap-map { position: absolute; inset: 0; }
.dfLmap-seg { position: absolute; left: var(--df-space-3); top: var(--df-space-3); z-index: 800; display: flex; gap: 2px; padding: 3px; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); }
.dfLmap-map .leaflet-top.leaflet-left { top: 52px; }
.dfLmap-segBtn { height: 28px; padding: 0 var(--df-space-3); border: 0; border-radius: var(--df-radius-sm); background: transparent; color: var(--df-text-muted); font: inherit; cursor: pointer; }
.dfLmap-segBtn.is-active { background: var(--df-accent-soft); color: var(--df-accent); font-weight: 600; }
.dfLmap-segBtn:focus-visible, .dfLmap-item:focus-visible, .dfLmap-pill--stub:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
.dfLmap-legend { position: absolute; right: var(--df-space-3); top: var(--df-space-3); z-index: 800; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-xs); box-shadow: var(--df-shadow); pointer-events: none; display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfLmap-legendTitle { font-weight: 600; }
.dfLmap-legendItem { display: flex; align-items: center; gap: var(--df-space-2); }
.dfLmap-swatch { width: 22px; height: 6px; border-radius: 3px; background: var(--df-text-muted); }
.dfLmap-swatch--util-mid { background: var(--df-warning); }
.dfLmap-swatch--plane-b { background: var(--df-text); }
.dfLmap-swatch--util-high { background: var(--df-danger); }
.dfLmap-swatch--util-none, .dfLmap-swatch--plane-none { background: repeating-linear-gradient(90deg, var(--df-text-muted) 0 5px, transparent 5px 8px); }
.dfLmap-swatch--vrf-mid, .dfLmap-swatch--plane-a { background: var(--df-accent); }
.dfLmap-swatch--vrf-high { background: var(--df-text); }
.dfLmap-swatch--plane-both { background: repeating-linear-gradient(90deg, var(--df-accent) 0 8px, var(--df-text) 8px 12px); }
.dfLmap-swatch--fibre { height: 0; border-top: 2px solid var(--df-text); background: none; border-radius: 0; }
.dfLmap-swatch--straight { height: 0; border-top: 3px dashed var(--df-text-muted); background: none; border-radius: 0; }
.dfLmap-ringSwatch { width: 12px; height: 12px; border: 2px solid var(--df-warning); border-radius: 999px; box-sizing: border-box; }
.dfLmap-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 800; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-3); color: var(--df-text-muted); }
/* Leaflet paths: colour comes from these classes, never from the path options. */
.dfLmap-fibre { stroke: var(--df-text); stroke-opacity: 0.55; fill: none; }
.dfLmap-duct { stroke: var(--df-text-muted); stroke-opacity: 0.6; stroke-dasharray: 2 4; fill: none; }
.dfLmap-duct.is-shared { stroke: var(--df-warning); stroke-opacity: 0.9; }
.dfLmap-link { stroke: var(--df-text-muted); stroke-opacity: 0.9; stroke-linecap: round; stroke-linejoin: round; fill: none; cursor: pointer; }
.dfLmap-link--util-mid { stroke: var(--df-warning); }
.dfLmap-link--plane-b { stroke: var(--df-text); }
.dfLmap-link--util-high { stroke: var(--df-danger); }
.dfLmap-link--util-none, .dfLmap-link--plane-none { stroke-dasharray: 10 6; }
.dfLmap-link--vrf-mid, .dfLmap-link--plane-a { stroke: var(--df-accent); }
.dfLmap-link--vrf-high { stroke: var(--df-text); }
.dfLmap-link--plane-both { stroke: var(--df-accent); stroke-dasharray: 14 6; }
.dfLmap-link.is-straight { stroke-dasharray: 8 6; stroke-opacity: 0.75; }
.dfLmap-link.is-selected { stroke-opacity: 1; }
.dfLmap-halo { stroke: var(--df-accent); stroke-opacity: 0.25; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.dfLmap-stub { stroke-dasharray: 6 5; stroke-opacity: 0.85; fill: none; }
.dfLmap-risk { stroke: var(--df-warning); fill: var(--df-warning-soft); fill-opacity: 0.35; cursor: pointer; }
.dfLmap-risk--declared { stroke-dasharray: 4 3; }
.dfLmap-risk.is-selected { stroke: var(--df-danger); fill-opacity: 0.5; }
.dfLmap-site { stroke: var(--df-text); fill: var(--df-surface); fill-opacity: 1; cursor: pointer; }
.dfLmap-site.is-selected { stroke: var(--df-accent); }
.leaflet-tooltip.dfLmap-siteLabel { background: var(--df-surface); border: 1px solid var(--df-border); color: var(--df-text); font-size: var(--df-font-size-xs); padding: 1px var(--df-space-1); box-shadow: none; }
.leaflet-tooltip.dfLmap-siteLabel.is-selected { border-color: var(--df-accent); color: var(--df-accent); }
.leaflet-tooltip.dfLmap-siteLabel::before { display: none; }
.leaflet-tooltip.dfLmap-tip { background: var(--df-surface); border: 1px solid var(--df-border); color: var(--df-text); font-size: var(--df-font-size-xs); box-shadow: var(--df-shadow); }
.dfLmap-pillIcon { background: none; border: 0; }
.dfLmap-pill { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; padding: 1px var(--df-space-2); border-radius: 999px; border: 1px solid var(--df-border); background: var(--df-surface); color: var(--df-text); font: inherit; font-size: var(--df-font-size-xs); line-height: 16px; }
.dfLmap-pill--sel { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-surface); font-weight: 600; }
.dfLmap-pill--util-mid { border-color: var(--df-warning); color: var(--df-warning); }
.dfLmap-pill--util-high { border-color: var(--df-danger); color: var(--df-danger); }
.dfLmap-pill--stub { cursor: pointer; color: var(--df-text-muted); }
.dfLmap-panel { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); overflow: auto; display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfLmap-detail { border-top: 1px solid var(--df-border); padding-top: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfLmap-title { font-weight: 600; font-size: var(--df-font-size-md); }
.dfLmap-sub { color: var(--df-text-muted); font-size: var(--df-font-size-sm); margin-top: calc(-1 * var(--df-space-1)); }
.dfLmap-grid { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--df-space-1) var(--df-space-2); font-size: var(--df-font-size-sm); }
.dfLmap-k { color: var(--df-text-muted); }
.dfLmap-v { overflow-wrap: anywhere; }
.dfLmap-v.is-warn { color: var(--df-warning); font-weight: 600; }
.dfLmap-v.is-ok { color: var(--df-success); font-weight: 600; }
.dfLmap-note, .dfLmap-hint { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfLmap-section { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--df-space-2); display: flex; align-items: center; gap: var(--df-space-2); }
.dfLmap-count { background: var(--df-surface-sunken); border-radius: 999px; padding: 0 var(--df-space-2); color: var(--df-text); }
.dfLmap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dfLmap-item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: var(--df-space-1) var(--df-space-2); border: 0; border-radius: var(--df-radius-sm); background: transparent; color: var(--df-text); font: inherit; font-size: var(--df-font-size-sm); cursor: pointer; }
.dfLmap-item:hover { background: var(--df-surface-sunken); }
.dfLmap-item.is-selected { background: var(--df-accent-soft); }
.dfLmap-item--risk .fa-circle-exclamation { color: var(--df-warning); }
.dfLmap-itemMeta { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dfLmap-actions { display: flex; flex-wrap: wrap; gap: var(--df-space-2); margin-top: var(--df-space-2); }

/* ── RAN map (scripts/ran_map.js): sector wedges, towers, EMF zones, search rings, candidates ── */
.dfRmap-wedge { fill-opacity: 0.3; stroke-opacity: 0.9; cursor: pointer; }
.dfRmap-wedge.is-selected { fill-opacity: 0.45; stroke-width: 2; }
.dfRmap-wedge--gsm { fill: var(--df-ran-gsm); stroke: var(--df-ran-gsm); }
.dfRmap-wedge--umts { fill: var(--df-ran-umts); stroke: var(--df-ran-umts); }
.dfRmap-wedge--lte { fill: var(--df-ran-lte); stroke: var(--df-ran-lte); }
.dfRmap-wedge--nr { fill: var(--df-ran-nr); stroke: var(--df-ran-nr); }
.dfRmap-wedge--multirat { fill: var(--df-ran-multirat); stroke: var(--df-ran-multirat); }
.dfRmap-wedge--none { fill: var(--df-ran-none); stroke: var(--df-ran-none); }
.dfRmap-swatch--gsm { background: var(--df-ran-gsm); }
.dfRmap-swatch--umts { background: var(--df-ran-umts); }
.dfRmap-swatch--lte { background: var(--df-ran-lte); }
.dfRmap-swatch--nr { background: var(--df-ran-nr); }
.dfRmap-swatch--multirat { background: var(--df-ran-multirat); }
.dfRmap-swatch--none { background: var(--df-ran-none); }
.dfRmap-tower { stroke: var(--df-text); fill: var(--df-surface-sunken); fill-opacity: 1; cursor: pointer; }
.dfRmap-emf { stroke: var(--df-warning); stroke-opacity: 0.8; fill: var(--df-warning-soft); fill-opacity: 0.25; cursor: pointer; }
.dfRmap-ring { stroke: var(--df-accent); stroke-opacity: 0.8; stroke-dasharray: 5 4; fill: var(--df-accent-soft); fill-opacity: 0.12; cursor: pointer; }
.dfRmap-ring.is-selected { stroke-opacity: 1; fill-opacity: 0.22; }
.dfRmap-candidate { stroke: var(--df-accent); fill: var(--df-surface); fill-opacity: 1; cursor: pointer; }
.dfRmap-neighbour { stroke: var(--df-text); stroke-opacity: 0.6; stroke-dasharray: 2 5; fill: none; }
.dfRmap-ringSwatch--ring { border-color: var(--df-accent); }
.dfRmap-ringSwatch--emf { border-color: var(--df-warning); }
.dfRmap-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--df-grey-400); }
.dfRmap-dot--onair { background: var(--df-success); }
.dfRmap-dot--planned { background: var(--df-grey-400); }
.dfRmap-dot--locked { background: var(--df-warning); }
.dfRmap-dot--decommissioned { background: var(--df-grey-300); }

/* ── Site planner, Logical mode: network links over the room (scripts/site_planner_logical.js) ── */
.dfSpLogical-arc { fill: none; stroke: var(--df-text-muted); stroke-linecap: round; opacity: 0.85; cursor: pointer; }
.dfSpLogical-arc--fabric { stroke: var(--df-success); }
.dfSpLogical-arc--l3 { stroke: var(--df-accent); }
.dfSpLogical-arc--l2 { stroke: var(--df-text-muted); stroke-dasharray: 5 4; }
.dfSpLogical-arc--ext { stroke-dasharray: 3 3; }
.dfSpLogical-arc.is-selected { opacity: 1; stroke-width: 5px; }
.dfSpLogical-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.dfSpLogical-head path { fill: var(--df-text-muted); }
.dfSpLogical-head--fabric path { fill: var(--df-success); }
.dfSpLogical-head--l3 path { fill: var(--df-accent); }
.dfSpLogical-count, .dfSpLogical-extLabel { font-size: var(--df-font-size-xs); fill: var(--df-text); paint-order: stroke; stroke: var(--df-surface); stroke-width: 3px; pointer-events: none; }
.dfSpLogical-count { text-anchor: middle; dominant-baseline: middle; font-weight: 600; }
.dfSpLogical-badge { cursor: pointer; }
.dfSpLogical-badge circle { fill: var(--df-text-muted); stroke: var(--df-surface); stroke-width: 2; }
.dfSpLogical-badge--fabric circle { fill: var(--df-success); }
.dfSpLogical-badge--l3 circle { fill: var(--df-accent); }
.dfSpLogical-badge.is-selected circle { stroke: var(--df-text); stroke-width: 3; }
.dfSpLogical-badge text { fill: var(--df-surface); font-size: var(--df-font-size-xs); font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.dfPlanner-rack.dfSpLogical-dim { opacity: 0.35; }
.dfPlanner-rack.dfSpLogical-onPath rect { stroke: var(--df-accent); stroke-width: 2; }
.dfSpLogical-swatch { width: 22px; height: 0; border-top: 3px solid var(--df-text-muted); }
.dfSpLogical-swatch--fabric { border-top-color: var(--df-success); }
.dfSpLogical-swatch--l3 { border-top-color: var(--df-accent); }
.dfSpLogical-swatch--l2 { border-top-style: dashed; }
.dfSpLogical-badgeSwatch { width: 16px; height: 16px; border-radius: 999px; background: var(--df-accent); color: var(--df-surface); font-size: var(--df-font-size-xs); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.dfSpLogical-loopSwatch { width: 12px; height: 8px; border: 2px solid var(--df-success); border-bottom: 0; border-radius: 999px 999px 0 0; }
.dfSpLogical-section { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--df-space-3) 0 var(--df-space-1); display: flex; align-items: center; gap: var(--df-space-2); }
.dfSpLogical-pathTitle { font-weight: 600; font-size: var(--df-font-size-md); }
.dfSpLogical-hint { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: var(--df-space-1); }
.dfSpLogical-note { font-size: var(--df-font-size-sm); color: var(--df-warning); margin: var(--df-space-2) 0; }
.dfSpLogical-hops { list-style: none; margin: var(--df-space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfSpLogical-hop { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--df-space-2); padding: var(--df-space-1); border-radius: var(--df-radius-sm); cursor: pointer; font-size: var(--df-font-size-sm); }
.dfSpLogical-hop:hover { background: var(--df-surface-sunken); }
.dfSpLogical-hop.is-selected { background: var(--df-accent-soft); }
.dfSpLogical-hop:focus-visible, .dfSpLogical-rackBtn:focus-visible, .dfSpLogical-linkBtn:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 1px; }
.dfSpLogical-hopNo { width: 20px; height: 20px; border-radius: 999px; background: var(--df-text-muted); color: var(--df-surface); font-size: var(--df-font-size-xs); font-weight: 600; display: flex; align-items: center; justify-content: center; }
span.dfSpLogical-badge--fabric { background: var(--df-success); }
span.dfSpLogical-badge--l3 { background: var(--df-accent); }
.dfSpLogical-hopBody { min-width: 0; }
.dfSpLogical-hopTitle { font-weight: 600; overflow-wrap: anywhere; }
.dfSpLogical-hopMeta { color: var(--df-text-muted); font-size: var(--df-font-size-xs); overflow-wrap: anywhere; }
.dfSpLogical-hopMeta.is-warn { color: var(--df-warning); }
.dfSpLogical-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--df-space-1) var(--df-space-2); font-size: var(--df-font-size-sm); }
.dfSpLogical-check .is-ok { color: var(--df-success); font-weight: 600; }
.dfSpLogical-check .is-warn { color: var(--df-warning); font-weight: 600; }
.dfSpLogical-racks, .dfSpLogical-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dfSpLogical-rackBtn, .dfSpLogical-linkBtn { width: 100%; text-align: left; padding: var(--df-space-1) var(--df-space-2); border: 0; border-radius: var(--df-radius-sm); background: transparent; color: var(--df-text); font: inherit; font-size: var(--df-font-size-sm); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.dfSpLogical-rackBtn { display: block; }
.dfSpLogical-rackBtn:hover, .dfSpLogical-linkBtn:hover { background: var(--df-surface-sunken); }
.dfSpLogical-rackBtn.is-selected { background: var(--df-accent-soft); color: var(--df-accent); }
.dfSpLogical-linkBtn small { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dfSpLogical-actions { display: flex; flex-wrap: wrap; gap: var(--df-space-2); margin-top: var(--df-space-3); }
.dfLmap-panel > * { flex-shrink: 0; }
.dfLmap-link.is-selected { stroke: var(--df-accent); }
.dfLmap-pill--stub.is-left { transform: translate(0, -50%); }
.dfLmap-pill--stub.is-right { transform: translate(-100%, -50%); }
.dfLmap-pill--stub.is-top { transform: translate(-50%, 0); }
.dfLmap-pill--stub.is-bottom { transform: translate(-50%, -100%); }
/* Network drift view (scripts/network_drift.js): documented model vs an observed snapshot */
.dfDrift { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: calc(100vh - 150px); gap: var(--df-space-2); color: var(--df-text); font-size: var(--df-font-size); }
.dfDrift-canvasWrap { position: relative; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
.dfDrift-canvas { position: absolute; inset: 0; overflow: auto; }
.dfDrift-svg { display: block; user-select: none; }
.dfDrift-edge { stroke-linecap: round; stroke-width: 3px; cursor: pointer; }
.dfDrift-edge--matched { stroke: var(--df-text-muted); opacity: 0.45; }
.dfDrift-edge--missing { stroke: var(--df-danger); stroke-width: 4px; stroke-dasharray: 9 7; }
.dfDrift-edge--new { stroke: var(--df-accent); stroke-width: 4px; }
.dfDrift-edge--changed { stroke: var(--df-warning); stroke-width: 4px; stroke-dasharray: 2 6; }
.dfDrift-edge.is-selected { stroke-width: 7px; opacity: 1; }
.dfDrift-pill { cursor: pointer; }
.dfDrift-pill rect { fill: var(--df-surface); stroke-width: 1; }
.dfDrift-pill text { font-size: var(--df-font-size-xs); font-weight: 600; text-anchor: middle; }
.dfDrift-pill--missing rect { stroke: var(--df-danger); }
.dfDrift-pill--missing text { fill: var(--df-danger); }
.dfDrift-pill--new rect { stroke: var(--df-accent); }
.dfDrift-pill--new text { fill: var(--df-accent); }
.dfDrift-pill--changed rect { stroke: var(--df-warning); }
.dfDrift-pill--changed text { fill: var(--df-warning); }
.dfDrift-node { cursor: pointer; }
.dfDrift-node rect { fill: var(--df-surface); stroke: var(--df-border); stroke-width: 1.5; }
.dfDrift-node text { text-anchor: middle; }
.dfDrift-nodeName { font-size: var(--df-font-size-sm); font-weight: 600; fill: var(--df-text); }
.dfDrift-nodeSub { font-size: var(--df-font-size-xs); fill: var(--df-text-muted); }
.dfDrift-node--changed rect, .dfDrift-node--ifchanged rect { fill: var(--df-warning-soft); stroke: var(--df-warning); stroke-width: 2; }
.dfDrift-node--changed .dfDrift-nodeSub, .dfDrift-node--ifchanged .dfDrift-nodeSub { fill: var(--df-warning); font-weight: 600; }
.dfDrift-node--new rect { fill: var(--df-accent-soft); stroke: var(--df-accent); stroke-width: 2; stroke-dasharray: 5 3; }
.dfDrift-node--new .dfDrift-nodeSub { fill: var(--df-accent); font-weight: 600; }
.dfDrift-node--missing rect { fill: var(--df-danger-soft); stroke: var(--df-danger); stroke-width: 2; stroke-dasharray: 5 3; }
.dfDrift-node--missing .dfDrift-nodeSub { fill: var(--df-danger); font-weight: 600; }
.dfDrift-node.is-selected rect { stroke: var(--df-accent); stroke-width: 3; }
.dfDrift-node:focus { outline: none; }
.dfDrift-node:focus-visible rect { stroke: var(--df-accent); stroke-width: 3; }
.dfDrift-legend { position: absolute; left: var(--df-space-3); bottom: var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-xs); display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfDrift-legendTitle { font-weight: 600; }
.dfDrift-legendRow { display: flex; align-items: center; gap: var(--df-space-2); }
.dfDrift-swatch { display: inline-block; width: 24px; height: 0; border-top: 4px solid var(--df-text-muted); }
.dfDrift-swatch--matched { opacity: 0.45; }
.dfDrift-swatch--missing { border-top: 4px dashed var(--df-danger); }
.dfDrift-swatch--new { border-top-color: var(--df-accent); }
.dfDrift-swatch--changed { border-top: 4px dotted var(--df-warning); }
.dfDrift-swatch--node { width: 14px; height: 10px; border: 2px solid var(--df-warning); background: var(--df-warning-soft); box-sizing: border-box; }
.dfDrift-zoom { position: absolute; right: var(--df-space-3); bottom: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfDrift-iconBtn { width: 32px; height: 32px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); cursor: pointer; font-size: var(--df-font-size-md); }
.dfDrift-iconBtn:focus-visible, .dfDrift-btn:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
.dfDrift-panel { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-2); min-height: 0; overflow: auto; }
.dfDrift-eyebrow { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dfDrift-title { font-size: var(--df-font-size-md); font-weight: 600; margin-top: 2px; }
.dfDrift-meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfDrift-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--df-space-1); }
.dfDrift-kpis .dfKpi { padding: var(--df-space-2); justify-content: center; text-align: center; box-shadow: none; }
.dfDrift-kpis .dfKpi-icon { display: none; }
.dfDrift-kpis .dfKpi-label { font-size: var(--df-font-size-xs); }
.dfDrift-kpis .dfKpi-value { font-size: var(--df-font-size-lg); margin-top: 0; }
.dfDrift-kpis .dfKpi--accent .dfKpi-value { color: var(--df-accent); }
.dfDrift-grid { flex: 1 1 auto; min-height: 240px; }
.dfDrift-detail { border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-2); background: var(--df-surface-sunken); display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfDrift-detailHead { display: flex; justify-content: space-between; align-items: center; gap: var(--df-space-2); }
.dfDrift-detailName { font-weight: 600; overflow-wrap: anywhere; }
.dfDrift-status { flex: none; font-size: var(--df-font-size-xs); font-weight: 600; border-radius: 999px; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); }
.dfDrift-status--missing { color: var(--df-danger); border-color: var(--df-danger); background: var(--df-danger-soft); }
.dfDrift-status--new { color: var(--df-accent); border-color: var(--df-accent); background: var(--df-accent-soft); }
.dfDrift-status--changed { color: var(--df-warning); border-color: var(--df-warning); background: var(--df-warning-soft); }
.dfDrift-evidence { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfDrift-changes { margin: 0; padding-left: var(--df-space-4); font-size: var(--df-font-size-sm); }
.dfDrift-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.dfDrift-note { margin: 0; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfDrift-canvas > .dfDrift-note { padding: var(--df-space-4); }
.dfDrift-actions { display: flex; flex-wrap: wrap; gap: var(--df-space-2); }
.dfDrift-btn { height: 32px; padding: 0 var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); font: inherit; cursor: pointer; }
.dfDrift-btn--primary { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-surface); font-weight: 600; }
.dfDrift-btn:disabled { opacity: 0.5; cursor: default; }
/* Network topology page (scripts/network_topology*.js): rail, SVG canvas, panel, status. Tokens only. */
.dfTopo { display: grid; grid-template-columns: 250px minmax(0, 1fr) 310px; grid-template-rows: minmax(0, 1fr) 28px; height: calc(100vh - 150px); gap: var(--df-space-2); color: var(--df-text); font-size: var(--df-font-size); }
.dfTopo-rail, .dfTopo-panel { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: auto; padding: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-2); min-height: 0; }
.dfTopo-canvasWrap { position: relative; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; min-height: 0; }
.dfTopo-canvas { position: absolute; inset: 0; cursor: grab; outline: none; }
.dfTopo-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--df-accent); }
.dfTopo-canvas.is-panning { cursor: grabbing; }
.dfTopo-hint { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 360px; text-align: center; color: var(--df-text-muted); font-size: var(--df-font-size-md); pointer-events: none; }
.dfTopo-zoom { position: absolute; right: var(--df-space-3); bottom: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfTopo-status { grid-column: 1 / -1; display: flex; gap: var(--df-space-4); align-items: center; padding: 0 var(--df-space-3); font-size: var(--df-font-size-xs); color: var(--df-text-muted); border-top: 1px solid var(--df-border); background: var(--df-surface); white-space: nowrap; overflow: hidden; }
.dfTopo-statusSpacer { flex: 1; }
.dfTopo-warn { color: var(--df-warning); cursor: help; }
/* Top bar */
.dfTopo-bar { display: flex; align-items: center; gap: var(--df-space-3); height: 50px; padding: 0 var(--df-space-4); font-size: var(--df-font-size); color: var(--df-text); white-space: nowrap; overflow: hidden; }
.dfTopo-barTitle { font-weight: 600; font-size: var(--df-font-size-md); }
.dfTopo-barSpacer { flex: 1; }
.dfTopo-menuHost { position: relative; display: inline-flex; }
.dfTopo-menu { position: fixed; z-index: 1000; display: flex; flex-direction: column; width: 150px; padding: var(--df-space-1); border: 1px solid var(--df-border); border-radius: 6px; background: var(--df-surface); box-shadow: var(--df-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15)); }
.dfTopo-menu[hidden] { display: none; }
.dfTopo-menu button { height: 28px; padding: 0 var(--df-space-3); border: 0; border-radius: 4px; background: transparent; color: var(--df-text); font: inherit; text-align: left; cursor: pointer; }
.dfTopo-menu button:hover, .dfTopo-menu button:focus-visible { background: var(--df-accent-soft); }
.dfTopo-seg { display: flex; gap: 2px; padding: 3px; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); }
.dfTopo-seg--wrap { flex-wrap: wrap; align-self: flex-start; }
.dfTopo-segBtn { height: 28px; padding: 0 var(--df-space-3); border: 0; border-radius: 6px; background: transparent; color: var(--df-text-muted); font: inherit; cursor: pointer; }
.dfTopo-segBtn.is-active { background: var(--df-surface); color: var(--df-accent); font-weight: 600; box-shadow: var(--df-shadow); }
.dfTopo-segBtn:disabled { opacity: 0.5; cursor: default; }
.dfTopo-segBtn:focus-visible, .dfTopo-btn:focus-visible, .dfTopo-iconBtn:focus-visible, .dfTopo-chip:focus-visible, .dfTopo-linkBtn:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 1px; }
.dfTopo-filters { flex: none; width: 390px; }
.dfTopo-filtersForm { width: 100%; }
.dfTopo-labelsPick { display: flex; align-items: center; gap: var(--df-space-1); color: var(--df-text-muted); font-size: var(--df-font-size-sm); white-space: nowrap; }
.dfTopo-labelsPick select { height: 30px; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); border-radius: 6px; background: var(--df-surface); color: var(--df-text); font: inherit; }
.dfTopo-chips { display: flex; gap: var(--df-space-1); }
.dfTopo-chip { height: 28px; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); border-radius: 999px; background: var(--df-surface); color: var(--df-text-muted); font: inherit; font-size: var(--df-font-size-sm); cursor: pointer; }
.dfTopo-chip.is-on { border-color: var(--df-accent); background: var(--df-accent-soft); color: var(--df-accent); }
.dfTopo-iconBtn { width: 32px; height: 32px; border: 1px solid var(--df-border); border-radius: 6px; background: var(--df-surface); color: var(--df-text); font: inherit; cursor: pointer; }
.dfTopo-btn { height: 30px; padding: 0 var(--df-space-3); border: 1px solid var(--df-border); border-radius: 6px; background: var(--df-surface); color: var(--df-text); font: inherit; cursor: pointer; white-space: nowrap; }
.dfTopo-btn--accent { border-color: var(--df-accent); background: var(--df-accent); color: var(--df-surface); font-weight: 600; }
.dfTopo-linkBtn { border: 0; background: none; padding: 0; color: var(--df-accent); font: inherit; font-size: var(--df-font-size-sm); cursor: pointer; text-align: left; }
/* Rail */
.dfTopo-rail > *, .dfTopo-panel > * { flex-shrink: 0; }
.dfTopo-railHead { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--df-space-1); display: flex; justify-content: space-between; }
.dfTopo-muted { color: var(--df-text-muted); font-size: var(--df-font-size-sm); margin: 0; }
.dfTopo-small { font-size: var(--df-font-size-sm); margin: 0; color: var(--df-text); }
.dfTopo-focus { display: flex; flex-direction: column; gap: var(--df-space-1); padding: var(--df-space-2); border: 1px solid var(--df-accent); border-radius: var(--df-radius); background: var(--df-accent-soft); font-size: var(--df-font-size-sm); }
.dfTopo-legend { display: flex; flex-direction: column; gap: var(--df-space-1); font-size: var(--df-font-size-sm); }
.dfTopo-legendRow { display: flex; align-items: center; gap: var(--df-space-2); }
.dfTopo-lg { stroke: var(--df-text-muted); stroke-width: 3; fill: none; }
.dfTopo-lg--wide { stroke-width: 6; }
.dfTopo-lg--derived { stroke-dasharray: 5 4; stroke-width: 2; }
.dfTopo-lg--cable { stroke-width: 1.5; stroke-dasharray: 2 2; }
.dfTopo-lg--path { stroke: var(--df-accent); stroke-width: 4; }
.dfTopo-lg--lsp { stroke: var(--df-accent); stroke-width: 5; opacity: 0.6; }
.dfTopo-lg--dim { opacity: 0.35; }
.dfTopo-lg--fabricA { stroke: var(--df-fabric-a); }
.dfTopo-lg--fabricB { stroke: var(--df-fabric-b); }
.dfTopo-lg--sas { stroke-dasharray: 7 5; stroke-width: 2; }
.dfTopo-lg--member { stroke: var(--df-accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.dfTopo-lg--overlay { fill: var(--df-accent-soft); stroke: var(--df-accent); stroke-width: 1.5; }
.dfTopo-lg--group { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1.5; stroke-dasharray: 3 2; }
.dfTopo-lg--box { fill: var(--df-surface); stroke: var(--df-border); stroke-width: 1.5; }
.dfTopo-lg--inter { stroke: var(--df-text-muted); stroke-width: 2.5; stroke-dasharray: 8 4; }
.dfTopo-lg--dep { stroke: var(--df-accent-soft); stroke-width: 8; }
.dfTopo-derived { margin-top: auto; border-top: 1px solid var(--df-border); padding-top: var(--df-space-2); display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfTopo-derivedHead { font-weight: 600; }
/* Canvas */
.dfTopo-svg { display: block; user-select: none; font-family: inherit; }
.dfTopo-band rect { fill: var(--df-surface); stroke: var(--df-border); }
.dfTopo-band text { font-size: 11px; fill: var(--df-text-muted); letter-spacing: 0.5px; }
.dfTopo-box rect { fill: var(--df-surface); stroke: var(--df-border); stroke-width: 1.5; cursor: pointer; }
.dfTopo-box text { font-size: 13px; font-weight: 600; fill: var(--df-text); pointer-events: none; }
.dfTopo-box .dfTopo-boxCount { font-weight: 400; fill: var(--df-text-muted); }
.dfTopo-box.is-selected rect { stroke: var(--df-accent); stroke-width: 2.5; }
.dfTopo-dep line { stroke: var(--df-accent-soft); stroke-width: 14; stroke-linecap: round; cursor: pointer; }
.dfTopo-dep:hover line { stroke: var(--df-accent); opacity: 0.35; }
.dfTopo-inter { stroke: var(--df-text-muted); stroke-width: 2.5; stroke-dasharray: 8 4; }
.dfTopo-edge { cursor: pointer; }
.dfTopo-edgeLine { stroke: var(--df-text-muted); stroke-linecap: round; fill: none; }
.dfTopo-edgeHit { stroke: transparent; stroke-width: 14; fill: none; }
.dfTopo-edgeHalo { stroke: var(--df-accent-soft); stroke-linecap: round; fill: none; }
.dfTopo-edge.is-derived .dfTopo-edgeLine { stroke-dasharray: 7 5; }
.dfTopo-edge--proposal .dfTopo-edgeLine { stroke-dasharray: 4 4; opacity: 0.7; }
.dfTopo-edge--connection .dfTopo-edgeLine { stroke-dasharray: 2 3; }
.dfTopo-edge--l2trunk .dfTopo-edgeLine, .dfTopo-lg.dfTopo-lg--l2trunk { stroke: var(--df-accent); }
.dfTopo-edge--l2carry .dfTopo-edgeLine, .dfTopo-lg.dfTopo-lg--l2carry { stroke: var(--df-accent); opacity: 1; }
.dfTopo-edge--l2nocarry .dfTopo-edgeLine, .dfTopo-lg.dfTopo-lg--l2nocarry { stroke: var(--df-text-muted); opacity: 0.35; }
.dfTopo-edge--l2access .dfTopo-edgeLine, .dfTopo-lg.dfTopo-lg--l2access { stroke: var(--df-text-muted); stroke-dasharray: 2 3; opacity: 0.8; }
.dfTopo-edge--l2other .dfTopo-edgeLine { stroke: var(--df-text-muted); opacity: 0.35; }
.dfTopo-edge--l2blocked .dfTopo-edgeLine, .dfTopo-lg.dfTopo-lg--l2blocked { stroke: var(--df-danger); stroke-dasharray: 7 5; opacity: 1; }
.dfTopo-edgeMismatch { fill: none; stroke: var(--df-warning); stroke-linecap: round; opacity: 0.8; pointer-events: none; }
.dfTopo-lg.dfTopo-lg--l2mismatch { stroke: var(--df-warning); stroke-width: 6; }
.dfTopo-node--l2accessOnly .dfTopo-nodeBox, .dfTopo-lg.dfTopo-lg--l2accessOnly { stroke: var(--df-accent); stroke-dasharray: 4 3; fill: none; }
.dfTopo-l2Badge rect { fill: var(--df-surface); stroke: var(--df-accent); stroke-width: 1.5; }
.dfTopo-l2Badge text { font-size: 11px; font-weight: 600; fill: var(--df-accent); text-anchor: middle; pointer-events: none; }
.dfTopo-l2Badge--root rect, rect.dfTopo-l2Badge--root { fill: var(--df-surface); stroke: var(--df-success); stroke-width: 1.5; }
.dfTopo-l2Badge--root text { fill: var(--df-success); }
.dfTopo-edge--member .dfTopo-edgeLine { stroke: var(--df-accent); stroke-dasharray: 4 3; opacity: 0.7; }
.dfTopo-edge--group .dfTopo-edgeLine { opacity: 0.85; }
.dfTopo-edge--area .dfTopo-edgeLine { stroke: var(--df-text-muted); opacity: 0.9; stroke-linecap: round; }
.dfTopo-edge--area.is-selected .dfTopo-edgeLine { opacity: 1; }
.dfTopo-edge--lsp .dfTopo-edgeLine { stroke: var(--df-accent); opacity: 0.55; }
.dfTopo-edge--fabricA .dfTopo-edgeLine { stroke: var(--df-fabric-a); }
.dfTopo-edge--fabricB .dfTopo-edgeLine { stroke: var(--df-fabric-b); }
.dfTopo-edge--sas .dfTopo-edgeLine { stroke-dasharray: 7 5; }
.dfTopo-edge--t-low .dfTopo-edgeLine, .dfTopo-lg.dfTopo-edge--t-low { stroke: var(--df-success); }
.dfTopo-edge--t-mid .dfTopo-edgeLine, .dfTopo-lg.dfTopo-edge--t-mid { stroke: var(--df-warning); }
.dfTopo-edge--t-high .dfTopo-edgeLine, .dfTopo-lg.dfTopo-edge--t-high { stroke: var(--df-danger); }
.dfTopo-edge.has-alert .dfTopo-edgeLine { stroke: var(--df-danger); }
.dfTopo-edge.is-dim { opacity: 0.25; }
.dfTopo-edge.is-hi .dfTopo-edgeLine, .dfTopo-edge.is-selected .dfTopo-edgeLine { stroke: var(--df-accent); opacity: 1; }
/* Failure what-if drawing */
.dfTopo-edge--w-ok .dfTopo-edgeLine, .dfTopo-lg.dfTopo-edge--w-ok { stroke: var(--df-success); }
.dfTopo-edge--w-warn .dfTopo-edgeLine, .dfTopo-lg.dfTopo-edge--w-warn { stroke: var(--df-warning); }
.dfTopo-edge--w-high .dfTopo-edgeLine, .dfTopo-lg.dfTopo-edge--w-high { stroke: var(--df-danger); }
.dfTopo-edge.is-wi-unknown { opacity: 0.3; }
.dfTopo-edge.is-wi-failed .dfTopo-edgeLine, .dfTopo-lg.dfTopo-lg--failed { stroke: var(--df-danger); stroke-dasharray: 6 4; }
.dfTopo-wiRoute { stroke: var(--df-accent-soft); stroke-linecap: round; fill: none; }
.dfTopo-lg.dfTopo-lg--reroute { stroke: var(--df-accent); stroke-width: 4; }
.dfTopo-wiCross { stroke: var(--df-danger); stroke-width: 3; stroke-linecap: round; fill: none; pointer-events: none; }
.dfTopo-node.is-wi-failed .dfTopo-nodeBox, .dfTopo-node.is-wi-failed .dfNetCard-box { stroke: var(--df-danger); stroke-width: 3; }
.dfTopo-edge.is-impact-start .dfTopo-edgeLine { stroke: var(--df-danger); stroke-width: 3px; opacity: 1; }
.dfTopo-edge:hover .dfTopo-edgeLine { stroke: var(--df-accent); }
.dfTopo-edgeText { font-size: 11px; fill: var(--df-text-muted); text-anchor: middle; paint-order: stroke; stroke: var(--df-surface); stroke-width: 3px; stroke-linejoin: round; cursor: pointer; pointer-events: none; }
.dfTopo-edgeText.is-mid { fill: var(--df-text); }
.dfTopo-edgeText.is-hi { fill: var(--df-accent); font-weight: 600; }
.dfTopo-edgeText.is-derived { font-style: italic; }
.dfTopo-edgeText.has-alert { fill: var(--df-danger); }
.dfTopo-lagBand { fill: var(--df-surface-sunken); stroke: var(--df-text-muted); stroke-width: 1.5; }
.dfTopo-lagText { font-size: 11px; fill: var(--df-text); text-anchor: middle; font-weight: 600; pointer-events: none; }
.dfTopo-edge--lag.is-dim .dfTopo-lagBand { opacity: 0.6; }
.dfTopo-edge--lag:hover .dfTopo-lagBand, .dfTopo-edge--lag.is-hi .dfTopo-lagBand, .dfTopo-edge--lag.is-selected .dfTopo-lagBand { stroke: var(--df-accent); fill: var(--df-accent-soft); }
.dfTopo-edge--lag.dfTopo-edge--t-low .dfTopo-lagBand { stroke: var(--df-success); }
.dfTopo-edge--lag.dfTopo-edge--t-mid .dfTopo-lagBand { stroke: var(--df-warning); }
.dfTopo-edge--lag.dfTopo-edge--t-high .dfTopo-lagBand { stroke: var(--df-danger); }
.dfTopo-edge--lag.has-alert .dfTopo-lagBand { stroke: var(--df-danger); }
.dfTopo-edge--lag .dfTopo-edgeMember { stroke: var(--df-text-muted); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.dfTopo-edge--lag:hover .dfTopo-edgeMember, .dfTopo-edge--lag.is-hi .dfTopo-edgeMember, .dfTopo-edge--lag.is-selected .dfTopo-edgeMember { stroke: var(--df-accent); }
.dfTopo-pill { cursor: pointer; }
.dfTopo-pill rect { fill: var(--df-surface); stroke: var(--df-border); }
.dfTopo-pill text { font-size: 11px; fill: var(--df-text-muted); text-anchor: middle; pointer-events: none; }
.dfTopo-pill.is-hi rect { fill: var(--df-accent); stroke: var(--df-accent); }
.dfTopo-pill.is-hi text { fill: var(--df-surface); font-weight: 600; }
.dfTopo-pill.is-derived rect { stroke-dasharray: 3 2; fill: var(--df-surface-sunken); }
.dfTopo-pill.has-alert rect { stroke: var(--df-danger); }
.dfTopo-pill.is-inter rect { stroke: var(--df-text-muted); }
.dfTopo-pill.is-inter text { fill: var(--df-text); font-weight: 600; }
.dfTopo-pill.is-dep rect { fill: var(--df-accent); stroke: var(--df-accent); }
.dfTopo-pill.is-dep text { fill: var(--df-surface); }
.dfTopo-node { cursor: pointer; }
.dfTopo-nodeBox { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1; }
.dfTopo-nodeStack { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1; }
.dfTopo-node--group .dfTopo-nodeBox { stroke-dasharray: 4 2; }
.dfTopo-node--area .dfTopo-nodeBox { stroke: var(--df-accent); stroke-width: 1.5; stroke-dasharray: none; fill: var(--df-accent-soft); }
.dfTopo-node--area .dfTopo-nodeStack { stroke: var(--df-accent); stroke-opacity: 0.6; }
.dfTopo-node--area.is-selected .dfTopo-nodeBox { stroke-width: 2.5; }
.dfTopo-node--overlay .dfTopo-nodeBox { fill: var(--df-accent-soft); stroke: var(--df-accent); }
.dfTopo-node.is-stub .dfTopo-nodeBox { stroke-dasharray: 2 2; fill: var(--df-surface-sunken); }
.dfTopo-nodeLabel { font-size: 12px; font-weight: 600; fill: var(--df-text); text-anchor: middle; pointer-events: none; }
.dfTopo-nodeSub { font-size: 11px; fill: var(--df-text-muted); text-anchor: middle; pointer-events: none; }
.dfTopo-node:hover .dfTopo-nodeBox { stroke: var(--df-accent); }
.dfTopo-node.is-selected .dfTopo-nodeBox, .dfTopo-node.is-hi .dfTopo-nodeBox { stroke: var(--df-accent); stroke-width: 2.5; }
.dfTopo-node.is-dim { opacity: 0.3; }
.dfTopo-node.has-alert--critical .dfTopo-nodeBox, .dfTopo-node.has-alert--error .dfTopo-nodeBox { fill: var(--df-danger-soft); stroke: var(--df-danger); stroke-width: 2; }
.dfTopo-node.has-alert--warn .dfTopo-nodeBox { fill: var(--df-warning-soft); stroke: var(--df-warning); stroke-width: 2; }
.dfTopo-node.is-impact-start .dfTopo-nodeBox { stroke: var(--df-danger); stroke-width: 3; }
.dfTopo-badge { stroke: var(--df-surface); stroke-width: 1.5; }
.dfTopo-badge--critical { fill: var(--uiCriticalBorder); }
.dfTopo-badge--error { fill: var(--df-danger); }
.dfTopo-badge--warn { fill: var(--df-warning); }
.dfTopo-badge--info { fill: var(--df-accent); }
.dfTopo-badgeText { font-size: 11px; font-weight: 600; fill: var(--df-surface); text-anchor: middle; pointer-events: none; }
.dfTopo-more rect { fill: var(--df-accent-soft); stroke: var(--df-accent); }
.dfTopo-more text { font-size: 11px; font-weight: 600; fill: var(--df-accent); text-anchor: middle; pointer-events: none; }
/* topo_mount: an embeddable instance (scripts/network_topology.js). Fills and resizes with its
   host element; .dfTopo-canvasWrap / .dfTopo-canvas already fill and pan/zoom from the full page. */
.dfTopo-mount { width: 100%; height: 100%; min-height: 0; }
/* Plan overlay on an embedded topology (topo_mount setPlan): added dashed accent, removed crossed danger, changed warning outline */
.dfTopo-edge.is-plan-added .dfTopo-edgeLine { stroke: var(--df-accent); stroke-dasharray: 7 5; }
.dfTopo-edge.is-plan-removed .dfTopo-edgeLine { stroke: var(--df-danger); }
.dfTopo-edge.is-plan-removed .dfTopo-wiCross { stroke: var(--df-danger); }
.dfTopo-planOutline { stroke: var(--df-warning); fill: none; opacity: 0.55; stroke-linecap: round; }
.dfTopo-node.is-plan-added .dfTopo-nodeBox { stroke: var(--df-accent); stroke-width: 2; stroke-dasharray: 6 4; }
.dfTopo-node.is-plan-removed .dfTopo-nodeBox { stroke: var(--df-danger); stroke-width: 3; }
.dfTopo-node.is-plan-removed .dfTopo-wiCross { stroke: var(--df-danger); }
.dfTopo-lg.dfTopo-lg--planAdded { stroke: var(--df-accent); stroke-dasharray: 7 5; }
.dfTopo-lg.dfTopo-lg--planRemoved { stroke: var(--df-danger); }
.dfTopo-lg.dfTopo-lg--planChanged { stroke: var(--df-warning); stroke-width: 6; }
.dfTopo-mountLegend { position: absolute; left: var(--df-space-2); bottom: var(--df-space-2); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-2); box-shadow: var(--df-shadow); }
.dfTopo-mountLegend[hidden] { display: none; }
.dfTopo-mountToggle { position: absolute; left: var(--df-space-2); top: var(--df-space-2); z-index: 1; display: flex; align-items: center; gap: var(--df-space-1); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-1) var(--df-space-2); font-size: var(--df-font-size-xs); color: var(--df-text); cursor: pointer; }
.dfTopo-mountToggle input { cursor: pointer; }
/* A dependency-graph node/edge topo_mount draws with no COMPINV/NWLINK record behind it. */
.dfTopo-node--abstract .dfTopo-nodeBox { stroke-dasharray: 4 2; fill: var(--df-surface-sunken); }
.dfTopo-edge--depedge .dfTopo-edgeLine { stroke-dasharray: 4 3; opacity: 0.85; }
/* Panel */
.dfTopo-pHead { display: flex; flex-direction: column; gap: 2px; }
.dfTopo-pKicker { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dfTopo-pTitle { font-weight: 600; font-size: var(--df-font-size-md); overflow-wrap: anywhere; }
.dfTopo-kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; font-size: var(--df-font-size-sm); }
.dfTopo-kvKey { color: var(--df-text-muted); }
.dfTopo-kvVal { overflow-wrap: anywhere; }
.dfTopo-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--df-font-size-sm); }
.dfTopo-pSection { border-top: 1px solid var(--df-border); padding-top: var(--df-space-2); display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfTopo-pSectionHead { font-weight: 600; }
.dfTopo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; text-align: center; }
.dfTopo-tile { background: var(--df-surface-sunken); border-radius: 6px; padding: 6px 0; display: flex; flex-direction: column; }
.dfTopo-tile b { font-size: var(--df-font-size-lg); }
.dfTopo-tile span { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfTopo-state { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: var(--df-font-size-xs); font-weight: 600; border: 1px solid var(--df-border); }
.dfTopo-state--muted { background: var(--df-surface-sunken); color: var(--df-text-muted); }
.dfTopo-state--success { background: var(--df-success-soft); color: var(--df-success); border-color: var(--df-success); }
.dfTopo-state--warning { background: var(--df-warning-soft); color: var(--df-warning); border-color: var(--df-warning); }
.dfTopo-state--danger { background: var(--df-danger-soft); color: var(--df-danger); border-color: var(--df-danger); }
.dfTopo-state--accent { background: var(--df-accent-soft); color: var(--df-accent); border-color: var(--df-accent); }
.dfTopo-pActions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--df-space-2); }
.dfTopo-list, .dfTopo-hops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--df-font-size-sm); }
.dfTopo-listItem { display: flex; flex-direction: column; padding: 4px 6px; border-radius: 6px; }
.dfTopo-listItem[tabindex] { cursor: pointer; }
.dfTopo-listItem[tabindex]:hover, .dfTopo-listItem.is-selected, .dfTopo-hop:hover { background: var(--df-accent-soft); }
.dfTopo-listMain { overflow-wrap: anywhere; }
.dfTopo-listMeta { color: var(--df-text-muted); font-size: var(--df-font-size-xs); overflow-wrap: anywhere; }
.dfTopo-hop { display: flex; gap: var(--df-space-2); padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.dfTopo-hopNo { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--df-accent); color: var(--df-surface); font-size: var(--df-font-size-xs); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.dfTopo-hopMain { display: block; overflow-wrap: anywhere; }
.dfTopo-hopMain .dfTopo-listMeta { display: block; }
.dfTopo-blast { display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfTopo-listGrid { height: 100%; }

/* Device card (scripts/network_device_card.js), one SVG renderer for every 2D network view.
   Vendor colour comes from the --df-card-accent/--df-card-soft pair the renderer sets per
   card from a --df-vendor-<key> token (defined once, above); nothing here names a vendor. */
.dfNetCard-box { fill: var(--df-surface); stroke: var(--df-border); stroke-width: 1; }
.dfTopo-node:hover .dfNetCard-box { stroke: var(--df-accent); }
.dfTopo-node.is-selected .dfNetCard-box, .dfTopo-node.is-hi .dfNetCard-box { stroke: var(--df-accent); stroke-width: 2.5; }
.dfTopo-node.is-stub .dfNetCard-box { stroke-dasharray: 2 2; fill: var(--df-surface-sunken); }
.dfTopo-node.has-alert--critical .dfNetCard-box, .dfTopo-node.has-alert--error .dfNetCard-box { stroke: var(--df-danger); stroke-width: 2; }
.dfTopo-node.has-alert--warn .dfNetCard-box { stroke: var(--df-warning); stroke-width: 2; }
.dfTopo-node.is-impact-start .dfNetCard-box { stroke: var(--df-danger); stroke-width: 3; }
.dfNetCard.is-planned .dfNetCard-box { stroke-dasharray: 5 3; }
.dfNetCard-hatch line { stroke: var(--df-danger); stroke-width: 1; opacity: 0.35; }
.dfNetCard-iconRing { fill: var(--df-card-soft); stroke: var(--df-card-accent); stroke-width: 1; }
.dfNetCard-iconWrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--df-card-accent); font-size: 12px; }
.dfNetCard-name { font-size: 12px; font-weight: 600; fill: var(--df-text); pointer-events: none; }
.dfNetCard-addr, .dfNetCard-model { font-size: 10px; fill: var(--df-text-muted); pointer-events: none; }
.dfNetCard-band { fill: var(--df-card-soft); }
.dfNetCard-bandLabel { font-size: 10px; font-weight: 600; fill: var(--df-card-accent); text-anchor: middle; pointer-events: none; }
.dfNetCard-port { fill: var(--df-surface); stroke: var(--df-border); stroke-width: 1; }

/* Generated device faceplate (workbooks/net/faceplate.js), drawn by kind onto the rack sheet
   (N6, scripts/network_rack_sheet.js). Token colours only; the vendor wordmark uses the
   --df-face-accent pair the group's inline style sets from a --df-vendor-<key> token. */
.dfFace-body { fill: var(--df-face-bg); stroke: var(--df-face-line); stroke-width: 1; }
.dfFace--rear .dfFace-body { fill: var(--df-face-bg-rear); }
.dfFace-fan, .dfFace-outlet { fill: none; stroke: var(--df-face-fitting); stroke-width: 1; }
.dfFace-fanHub { fill: var(--df-face-fitting); }
.dfFace-fanBlade { stroke: var(--df-face-fitting); stroke-width: 0.6; opacity: 0.8; }
.dfFace-slot { fill: var(--df-face-bg-rear); stroke: var(--df-face-line); stroke-width: 0.75; }
.dfFace-led { fill: var(--df-success); }
.dfFace-port { fill: var(--df-face-bg-rear); stroke: var(--df-face-fitting); stroke-width: 0.75; }
.dfFace-port--uplink { stroke: var(--df-face-accent); }
.dfFace-vent { stroke: var(--df-face-line); stroke-width: 1; }
.dfFace-keystone { fill: var(--df-face-bg-rear); stroke: var(--df-face-fitting); stroke-width: 0.75; rx: 1; }
.dfFace-blank { fill: var(--df-face-bg-rear); stroke: var(--df-face-line); stroke-width: 0.5; }
.dfFace-psu { fill: var(--df-face-bg-rear); stroke: var(--df-face-fitting); stroke-width: 0.75; }
.dfFace-bezel { fill: var(--df-face-accent-soft, var(--df-face-fitting)); }
.dfFace-bay { fill: var(--df-face-bg-rear); stroke: var(--df-face-fitting); stroke-width: 0.5; }
.dfFace-breaker { fill: var(--df-face-fitting); }
.dfFace-cord { fill: var(--df-face-fitting); }
.dfFace-lambda { fill: var(--df-face-accent); font-size: 12px; font-weight: 700; }
.dfFace-vendor { fill: var(--df-face-accent); font-size: 8px; font-weight: 700; }
.dfFace-model { fill: var(--df-face-text); font-size: 8px; opacity: 0.85; }
.dfFace-empty { fill: var(--df-surface); stroke: var(--df-border); stroke-dasharray: 3 2; }

/* Rack sheet frame, U ladder, callouts and info panel. */
.dfRackSheet-pageBar { display: flex; align-items: center; gap: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); font-weight: 600; }
.dfRackSheet-page { height: 100%; }
.dfRackSheet-bg { fill: var(--df-sheet-bg); }
.dfRackSheet-frame { fill: var(--df-rackframe); rx: 3; }
.dfRackSheet-frameInner { fill: var(--df-face-bg-rear); }
.dfRackSheet-faceLabel { fill: var(--df-text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.dfRackSheet-uLabel { fill: var(--df-text-muted); font-size: 8px; }
.dfRackSheet-item { cursor: pointer; }
.dfRackSheet-itemHit { fill: transparent; }
.dfRackSheet-item:hover .dfFace-body, .dfRackSheet-item:focus-visible .dfFace-body { stroke: var(--df-accent); stroke-width: 2; }
.dfRackSheet-leader { stroke: var(--df-text-muted); stroke-width: 0.75; }
.dfRackSheet-calloutName { fill: var(--df-text); font-size: 10px; font-weight: 600; }
.dfRackSheet-calloutRole { fill: var(--df-text-muted); font-size: 9px; }
.dfRackSheet-panel { background: var(--df-surface); color: var(--df-text); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-4); overflow-y: auto; }
.dfRackSheet-panelTitle { margin: 0 0 var(--df-space-3); font-size: var(--df-font-size-lg); color: var(--df-text); }
.dfRackSheet-section { margin-bottom: var(--df-space-4); border-top: 1px solid var(--df-border); padding-top: var(--df-space-3); }
.dfRackSheet-section:first-of-type { border-top: none; padding-top: 0; }
.dfRackSheet-section h3 { margin: 0 0 var(--df-space-2); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); }
.dfRackSheet-section p { margin: 0; line-height: 1.5; font-size: var(--df-font-size); }
.dfRackSheet-numbers { display: flex; gap: var(--df-space-4); margin: 0; }
.dfRackSheet-numbers dt { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin: 0; }
.dfRackSheet-numbers dd { font-size: var(--df-font-size-xl); font-weight: 700; margin: 0; }
.dfRackSheet-deviceList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfRackSheet-deviceRow { display: flex; gap: var(--df-space-2); align-items: baseline; padding: 4px 6px; border-radius: var(--df-radius-sm); cursor: pointer; }
.dfRackSheet-deviceRow:hover, .dfRackSheet-deviceRow:focus-visible { background: var(--df-surface-sunken); }
.dfRackSheet-deviceU { flex: none; width: 48px; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfRackSheet-deviceMain { display: flex; flex-direction: column; min-width: 0; }
.dfRackSheet-deviceName { font-size: var(--df-font-size-sm); font-weight: 600; overflow-wrap: anywhere; }
.dfRackSheet-deviceRole { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfRackSheet-muted { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfRackSheet-navBtns { display: flex; gap: var(--df-space-2); margin-top: var(--df-space-2); }
.dfRackSheet-navBtn { flex: 1; font: inherit; font-size: var(--df-font-size-sm); padding: 6px 10px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); cursor: pointer; }
.dfRackSheet-navBtn:hover { background: var(--df-surface-sunken); }
.dfRackSheet-navBtn:disabled { opacity: 0.4; cursor: default; }
.dfRackSheet-item.is-onpath .dfRackSheet-itemHit { fill: var(--df-accent-soft); fill-opacity: 0.15; stroke: var(--df-accent); stroke-width: 2.5; }
.dfRackSheet-item.is-offpath { opacity: 0.35; }
.dfRackSheet-pathDot { fill: var(--df-accent); stroke: var(--df-surface); stroke-width: 1; }
.dfRackSheet-badge { fill: var(--df-surface); stroke: var(--df-accent); stroke-width: 1.5; }
.dfRackSheet-badgeText { fill: var(--df-accent); font-size: 9px; font-weight: 700; }
.dfRackSheet-calloutName.is-onpath { fill: var(--df-accent); }
.dfRackSheet-chip { display: inline-flex; align-items: center; gap: var(--df-space-2); padding: 2px 4px 2px 10px; border: 1px solid var(--df-accent); border-radius: var(--df-radius); color: var(--df-accent); font-size: var(--df-font-size-sm); background: var(--df-surface); }
.dfRackSheet-chipClear { font: inherit; font-size: var(--df-font-size-xs); padding: 2px 8px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); cursor: pointer; }
.dfRackSheet-chipClear:hover { background: var(--df-surface-sunken); }
.dfRackSheet-pathList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfRackSheet-pathRow { display: flex; gap: var(--df-space-2); align-items: flex-start; font-size: var(--df-font-size-sm); }
.dfRackSheet-pathNum { flex: none; width: 20px; height: 20px; line-height: 18px; text-align: center; box-sizing: border-box; border: 1.5px solid var(--df-accent); border-radius: 50%; color: var(--df-accent); font-size: var(--df-font-size-xs); font-weight: 700; }
.dfRackSheet-pathMain { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.dfRackSheet-pathLink { font-weight: 600; }
.dfRackSheet-pathOpen { align-self: flex-start; font: inherit; font-size: var(--df-font-size-xs); padding: 2px 8px; margin-top: 2px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); cursor: pointer; }
.dfRackSheet-pathOpen:hover { background: var(--df-surface-sunken); }

/* Isometric network engine (scripts/network_iso_engine.js) and its optical view
   (scripts/network_iso_optical.js): reuses the dfTopo-bar/btn/chip/panel chrome above
   for the toolbar, canvas wrap and side panel, and adds the CSS2D name plates and the
   ring/site picker here. */
.dfIso-root { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: var(--df-space-2); height: calc(100vh - 150px); color: var(--df-text); font-size: var(--df-font-size); }
.dfIso-canvas { position: absolute; inset: 0; outline: none; }
.dfIso-select { height: 30px; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); border-radius: 6px; background: var(--df-surface); color: var(--df-text); font: inherit; max-width: 320px; }
.dfIso-plate { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: 2px var(--df-space-2); white-space: nowrap; transform: translate(-50%, -100%); font-size: var(--df-font-size-xs); line-height: 1.3; }
.dfIso-plateName { font-weight: 600; color: var(--df-text); }
.dfIso-plateSub { color: var(--df-text-muted); }

/* ── Site connectivity (network view N8): media colours and page chrome ── */
:root {
	--df-media-smf: #d97706;
	--df-media-mmf: #0891b2;
	--df-media-copper: #2563eb;
	--df-media-power: #dc2626;
	--df-media-other: #6b7280;
	/* Storage fabric lens (network view N5): the two SAN fabrics. */
	--df-fabric-a: #0e7490;
	--df-fabric-b: #c2410c;
}
:root[data-theme="dark"] {
	--df-media-smf: #fbbf24;
	--df-media-mmf: #22d3ee;
	--df-media-copper: #60a5fa;
	--df-media-power: #f87171;
	--df-media-other: #9ca3af;
	--df-fabric-a: #22d3ee;
	--df-fabric-b: #fb923c;
}
.dfSiteConn { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: calc(100vh - 150px); gap: var(--df-space-2); color: var(--df-text); font-size: var(--df-font-size); }
.dfSiteConn-canvasWrap { position: relative; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; min-height: 0; }
.dfSiteConn-canvas { position: absolute; inset: 0; cursor: grab; outline: none; }
.dfSiteConn-canvas:active { cursor: grabbing; }
.dfSiteConn-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--df-accent); }
.dfSiteConn-svg { display: block; user-select: none; }
.dfSiteConn-bundle:hover polyline:first-of-type { opacity: 1; }
.dfSiteConn-bar { display: flex; align-items: center; gap: var(--df-space-3); height: 50px; padding: 0 var(--df-space-4); font-size: var(--df-font-size); color: var(--df-text); white-space: nowrap; overflow: hidden; }
.dfSiteConn-title { font-size: var(--df-font-size-md); font-weight: 600; }
.dfSiteConn-group { display: inline-flex; gap: var(--df-space-1); }
.dfSiteConn-spacer { flex: 1; }
.dfSiteConn-chip, .dfSiteConn-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text-muted); font-size: var(--df-font-size-sm); cursor: pointer; }
.dfSiteConn-chip.is-on { color: var(--df-text); border-color: var(--df-accent); background: var(--df-accent-soft); }
.dfSiteConn-btn { color: var(--df-text); }
.dfSiteConn-btn:hover, .dfSiteConn-chip:hover { border-color: var(--df-accent); }
.dfSiteConn-swatch { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.dfSiteConn-swatch--dashed { background: repeating-linear-gradient(90deg, var(--df-text-muted) 0 4px, transparent 4px 7px); }
.dfSiteConn-foot { display: flex; justify-content: space-between; gap: var(--df-space-4); align-items: center; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfSiteConn-legend { display: flex; flex-wrap: wrap; gap: var(--df-space-3); align-items: center; }
.dfSiteConn-key { display: inline-flex; align-items: center; gap: 6px; }
.dfSiteConn-key b { color: var(--df-text); }
.dfSiteConn-zoom { position: absolute; right: var(--df-space-3); bottom: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfSiteConn-iconBtn { width: 30px; height: 30px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); cursor: pointer; }
.dfSiteConn-iconBtn:hover { border-color: var(--df-accent); }
.dfSiteConn-tip { position: absolute; z-index: 5; width: 320px; max-width: 90%; padding: var(--df-space-2) var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); pointer-events: none; font-size: var(--df-font-size-sm); }
.dfSiteConn-tip[hidden] { display: none; }
.dfSiteConn-tipHead { font-weight: 600; display: flex; justify-content: space-between; gap: var(--df-space-2); }
.dfSiteConn-tipHead span { font-weight: 400; color: var(--df-text-muted); }
.dfSiteConn-tipSub { color: var(--df-text-muted); margin-bottom: var(--df-space-1); }
.dfSiteConn-tip ul { list-style: none; margin: 0; padding: 0; }
.dfSiteConn-tip li { display: flex; align-items: center; gap: 6px; padding: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfSiteConn-tipMore { color: var(--df-text-muted); }
.dfSiteConn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dfSiteConn-empty { margin: var(--df-space-4); color: var(--df-text-muted); }
.dfSiteConn-listHead { padding: var(--df-space-2) var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfSiteConn-listGrid { height: calc(100% - 34px); min-height: 300px; }
.dfSiteConn-panel { display: flex; flex-direction: column; gap: var(--df-space-2); padding: var(--df-space-2); }
.dfSiteConn-panelHead { display: flex; justify-content: space-between; align-items: center; gap: var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfSiteConn-preview { width: 100%; max-height: 420px; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); }

/* Patching diagram (scripts/network_patching.js, workbooks/net/patchlayout.js): the lead colours
   reuse the --df-media-* tokens above (site connectivity, N8). */
.dfPatch { display: grid; grid-template-rows: minmax(0, 1fr) 28px; height: calc(100vh - 150px); gap: var(--df-space-2); color: var(--df-text); font-size: var(--df-font-size); }
.dfPatch-bar { display: flex; align-items: center; gap: var(--df-space-3); height: 50px; padding: 0 var(--df-space-4); font-size: var(--df-font-size); color: var(--df-text); white-space: nowrap; overflow: hidden; }
.dfPatch-search { height: 30px; min-width: 220px; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); border-radius: 6px; background: var(--df-surface); color: var(--df-text); font: inherit; }
.dfPatch-canvasWrap { position: relative; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: auto; min-height: 0; padding: var(--df-space-3); }
.dfPatch-status { display: flex; gap: var(--df-space-4); align-items: center; padding: 0 var(--df-space-3); font-size: var(--df-font-size-xs); color: var(--df-text-muted); border-top: 1px solid var(--df-border); background: var(--df-surface); white-space: nowrap; overflow: hidden; }
.dfPatch-panelHead { display: flex; justify-content: flex-end; padding: var(--df-space-1) 0; }
.dfPatch-panelBody { min-height: 0; }
.dfPatch-empty { color: var(--df-text-muted); font-size: var(--df-font-size-sm); padding: var(--df-space-3); }
.dfPatch-svg { display: block; user-select: none; font-family: inherit; }
.dfPatch-panel { fill: var(--df-surface); stroke: var(--df-border); stroke-width: 1.5; }
.dfPatch-panelLabel { font-size: 11px; font-weight: 600; fill: var(--df-text); pointer-events: none; }
.dfPatch-port rect { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1; cursor: pointer; }
.dfPatch-port text { font-size: 8px; fill: var(--df-text-muted); text-anchor: middle; pointer-events: none; }
.dfPatch-port.is-hot rect, .dfPatch-port:hover rect { stroke: var(--df-accent); fill: var(--df-accent-soft); }
.dfPatch-port.is-dim { opacity: 0.25; }
.dfPatch-lead path { fill: none; stroke-width: 2; cursor: pointer; }
.dfPatch-lead--copper path { stroke: var(--df-media-copper); }
.dfPatch-lead--smf path { stroke: var(--df-media-smf); }
.dfPatch-lead--mmf path { stroke: var(--df-media-mmf); }
.dfPatch-lead--other path { stroke: var(--df-media-other); }
.dfPatch-lead.is-hot path, .dfPatch-lead:hover path { stroke-width: 3.5; }
.dfPatch-lead.is-dim { opacity: 0.15; }
.dfPatch-stub { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1.5; }
.dfPatch-stubLabel { font-size: 10px; fill: var(--df-text-muted); }

/* dfcAttach (scripts/_utils_dfc.js): the host a dfc component is mounted into inside a DHX cell. */
.dfcCellHost { height: 100%; }

/* ===========================================================================
   dfComponents Toolbar, Tabbar and Sidebar in the DHX look (2026-10-16).
   The DHX Toolbar, Tabbar and Sidebar were replaced by dfc.Toolbar, dfc.Tabbar and
   dfc.Sidebar. These rules give the dfc widgets the metrics and colours the DHX ones
   had (32px buttons padded 6px 12px, 20px icons, 14px medium text, the DHX hover and
   active tints and count badges, the blue record-editor bar, the 44px icon rails, the
   uppercase DHX tabs), read from the DHX theme tokens so a theme change reaches both.
   dfc.min.css loads after this file, so every rule here carries a second class to
   outrank the library's single-class rules. Each block names the DHX rule it stands
   in for; those DHX rules stay until no DHX toolbar, tabbar or sidebar is left.
   =========================================================================== */

/* ---- Toolbar ------------------------------------------------------------- */

/* A DHX toolbar filled its cell whatever height it was given; a dfc toolbar sets its
   `height` option inline, so one in a cell (dfcAttach, the record editor's bar) is
   stretched to the cell as before. */
.dfcCellHost > .dfc-toolbar,
.complexToolbar > .dfc-toolbar {
	height: 100% !important;
}

/* .dhx_toolbar / .dhx_toolbar-button / __icon / __text / __caret / --active / :hover */
.dfc.dfc-toolbar.functionToolbar,
.dfc.dfc-toolbar.toolbarTop {
	--dfc-fg: var(--dhx-font-color-primary, rgba(0, 0, 0, 0.7));
	--dfc-surface-raised: var(--dhx-s-toolbar-button-background-hover, rgba(0, 0, 0, 0.07));
	--dfc-border: var(--dhx-border-color, rgba(0, 0, 0, 0.1));
	--dfc-radius-sm: var(--dhx-border-radius, 2px);
	--dfc-danger: var(--dhx-color-danger, #d32f2f);
	padding: 0;
	font-family: var(--dhx-font-family);
	font-size: var(--dhx-font-size-normal, 14px);
	line-height: var(--dhx-line-height-normal, 20px);
}
/* .dhx_widget * drew its text antialiased (thinner on macOS); so do the dfc widgets in its place. */
.dfc.dfc-toolbar.functionToolbar,
.dfc.dfc-toolbar.toolbarTop,
.dfc.dfc-tabbar,
.dfc.dfc-sidebar.dfIconRail {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.dfc.dfc-toolbar.functionToolbar {
	background-color: var(--dhx-s-toolbar-background, #fff);
}
.dfc.dfc-toolbar.toolbarChrome {
	background-color: #f0f0f0;
}
.dfc.dfc-toolbar.backgroundTransparent {
	background-color: rgba(0, 0, 0, 0);
}
.dfc-toolbar.functionToolbar .dfc-toolbar__button,
.dfc-toolbar.toolbarTop .dfc-toolbar__button {
	gap: 8px;
	padding: 6px 12px;
	border: 0;
	font-weight: var(--dhx-font-weight-medium, 500);
}
.dfc-toolbar.functionToolbar .dfc-toolbar__button.is-icon-only,
.dfc-toolbar.toolbarTop .dfc-toolbar__button.is-icon-only {
	width: auto;
	padding: 6px 12px;
}
.dfc-toolbar.functionToolbar .dfc-toolbar__icon,
.dfc-toolbar.toolbarTop .dfc-toolbar__icon {
	font-size: var(--dhx-icon-size-normal, 20px);
}
.dfc-toolbar.functionToolbar .dfc-toolbar__icon.dfc-icon-font i,
.dfc-toolbar.toolbarTop .dfc-toolbar__icon.dfc-icon-font i {
	font-size: 1em;
}
.dfc-toolbar.functionToolbar .dfc-toolbar__button.is-active,
.dfc-toolbar.functionToolbar .dfc-toolbar__button[aria-expanded='true'] {
	background-color: var(--dhx-s-toolbar-button-background-active, rgba(0, 0, 0, 0.15));
	color: var(--dfc-fg);
}
.dfc-toolbar.functionToolbar .dfc-toolbar__button[aria-disabled='true'],
.dfc-toolbar.toolbarTop .dfc-toolbar__button[aria-disabled='true'] {
	opacity: 0.8;
	color: var(--dhx-font-color-disabled, rgba(0, 0, 0, 0.3));
}
.dfc-toolbar.functionToolbar .dfc-toolbar__caret,
.dfc-toolbar.toolbarTop .dfc-toolbar__caret {
	margin-left: 0;
	opacity: 1;
	color: var(--dhx-font-color-secondary, rgba(0, 0, 0, 0.5));
}
/* .dhx_navbar-title: 12px in from the bar's ends, 4px between neighbours */
.dfc-toolbar.functionToolbar .dfc-toolbar__title,
.dfc-toolbar.toolbarTop .dfc-toolbar__title {
	padding: 0;
	margin: 0 4px;
}
.dfc-toolbar.functionToolbar .dfc-toolbar__item:first-child > .dfc-toolbar__title,
.dfc-toolbar.toolbarTop .dfc-toolbar__item:first-child > .dfc-toolbar__title {
	margin-left: 12px;
}
/* .dhx_toolbar__item--separator */
.dfc-toolbar.functionToolbar .dfc-toolbar__item--separator,
.dfc-toolbar.toolbarTop .dfc-toolbar__item--separator {
	height: 28px;
	max-height: none;
	margin: 0 2px;
	background-color: var(--dhx-border-color, rgba(0, 0, 0, 0.1));
}
/* .dhx_toolbar-button__count + .dhx_navbar-count: a 24px badge on the button's corner */
.dfc-toolbar.functionToolbar .dfc-toolbar__button .dfc-toolbar__count,
.dfc-toolbar.toolbarTop .dfc-toolbar__button .dfc-toolbar__count {
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 1;
	min-width: 24px;
	height: 24px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 12px;
	font-size: var(--dhx-font-size-small, 12px);
	font-weight: inherit;
	line-height: 24px;
	color: var(--dhx-font-color-contrast, #fff);
	box-shadow: none;
}
/* A toolbar input sits in a <label>, which bootstrap.css makes bold; the input inherits it. */
.dfc-toolbar .dfc-toolbar__field {
	font-weight: normal;
}
/* .dhx_toolbar__input .dhx_input: a borderless grey box, its icon on the right. */
.dfc-toolbar.functionToolbar .dfc-toolbar__input,
.dfc-toolbar.toolbarTop .dfc-toolbar__input {
	font-size: var(--dhx-font-size-normal, 14px);
}
.dfc-toolbar.functionToolbar .dfc-toolbar__input,
.dfc-toolbar.functionToolbar .dfc-toolbar__input:hover {
	padding: 0 8px;
	background-color: var(--dhx-background-secondary, #f7f7f7);
	border-color: var(--dhx-border-color, rgba(0, 0, 0, 0.1));
}
.dfc-toolbar.functionToolbar .dfc-toolbar__input:focus {
	border-color: var(--dhx-color-primary, #3041b0);
}
.dfc-toolbar.functionToolbar .dfc-toolbar__field.has-icon .dfc-toolbar__input {
	padding: 0 26px 0 8px;
}
.dfc-toolbar.functionToolbar .dfc-toolbar__field-icon {
	left: auto;
	right: 6px;
	font-size: var(--dhx-icon-size-normal, 20px);
	color: var(--dhx-font-color-secondary, rgba(0, 0, 0, 0.5));
}
.dfc-toolbar.functionToolbar .dfc-toolbar__caret {
	font-size: 14px;
}

/* The toolbars' dropdown menus: .functionToolbar--popup-menu ul.dhx_menu scrolled past 75vh. */
.dfc.dfc-menu {
	max-height: 75vh;
	overflow-y: auto;
	padding: 4px 0;
}
/* More vertical room than dfc's compact default (3px 6px), for every menu: toolbar dropdowns
   and context menus. */
.dfc.dfc-menu .dfc-menu-item {
	padding: 7px 10px;
	gap: 6px;
}
.dfc.dfc-menu .dfc-menu-separator {
	margin: 4px 0;
}

/* The app bar: .toolbarTop (blue, white text). The dfc toolbar's transparent background
   and its own text colour outrank a bare .toolbarTop. The background and text rules stay
   at two or three classes so the tenant titleBackground / titleColor rules app_startup.js
   injects later (same selectors) still win. */
.dfc.dfc-toolbar.toolbarTop {
	--dfc-fg: #fff;
}
.dfc-toolbar.toolbarTop {
	background: var(--tocloco-blue);
	color: white;
}
.dfc-toolbar.toolbarTop .dfc-toolbar__title,
.dfc-toolbar.toolbarTop .dfc-toolbar__button {
	color: white;
}
.dfc-toolbar.toolbarTop .dfc-toolbar__button:hover,
.dfc-toolbar.toolbarTop .dfc-toolbar__button.is-active,
.dfc-toolbar.toolbarTop .dfc-toolbar__button[aria-expanded='true'] {
	background: rgba(255, 255, 255, 0.15);
}
.dfc-toolbar.toolbarTop .dfc-toolbar__select {
	border-color: transparent;
}
.dfc-toolbar.toolbarTop .dfc-toolbar__item--separator {
	background: rgba(255, 255, 255, 0.35);
}
.dfc-toolbar.toolbarTop .globalsearch .dfc-toolbar__input {
	border-radius: 6px;
}
/* The app bar's Stop-timer button (shown only while a timer runs): red. */
.toolbarTop .topbarTimerStop .dfc-toolbar__button {
	background: #ef4444;
	color: #fff;
}
.toolbarTop .topbarTimerStop .dfc-toolbar__button:hover {
	background: #dc2626;
}
/* .colorRed * also reaches a dfc button's text and icon; the button itself too. */
.dfc-toolbar__item.colorRed .dfc-toolbar__button {
	color: var(--uiRed);
}
/* .hide on a toolbar item: the library's display:flex loads later and would beat it. */
.dfc-toolbar__item.hide {
	display: none;
}
/* .dhx_toolbar-button-image__image, .userbutton button / .dhx_toolbar-button-image__image */
.dfc-toolbar .dfc-toolbar__image {
	object-fit: contain;
}
.dfc-toolbar .userbutton .dfc-toolbar__image {
	object-fit: cover;
}
.dfc-toolbar .userbutton .dfc-toolbar__button,
.dfc-toolbar .userbutton .dfc-toolbar__button:hover {
	background: rgba(0, 0, 0, 0);
}
/* .messagesNav .dhx_navbar-count (both rules) */
.dfc-toolbar .messagesNav .dfc-toolbar__button .dfc-toolbar__count {
	top: 8px;
	right: -4px;
	transform: translateY(-50%);
	z-index: 5;
	background-color: #ff0000;
	border: 1px solid white !important;
}
/* .favorites .dhx_toolbar-button__caret */
.dfc-toolbar .favorites .dfc-toolbar__caret {
	display: none;
}
/* .lat-layout__window .dhx_toolbar (and its *) */
.lat-layout__window .dfc.dfc-toolbar {
	background-color: var(--tocloco-blue);
	--dfc-fg: #fff;
}
.lat-layout__window .dfc-toolbar * {
	color: white;
}

/* The record editor's bar: .complexToolbar .scroll-view-wrapper,
   .complexToolbar .functionToolbar (> .scroll-view-wrapper *) */
.complexToolbar .dfc.dfc-toolbar.functionToolbar {
	--dfc-fg: #fff;
	background-color: var(--tocloco-blue) !important;
	border: 1px solid rgb(216, 211, 211);
	border-radius: 8px;
	padding-left: 10px;
	box-sizing: border-box;
}

/* .dfToolbar and its li.* item classes (the item css lands on .dfc-toolbar__item) */
.dfc.dfc-toolbar.dfToolbar {
	padding-right: 10px;
	padding-left: 10px;
}
.dfToolbar .dfc-toolbar__items {
	padding-top: 5px;
	padding-bottom: 5px;
	box-sizing: border-box;
}
.dfToolbar .dfc-toolbar__item {
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
	overflow: hidden;
}
.dfToolbar .dfc-toolbar__item.dfc-toolbar__item--separator {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.dfToolbar .dfc-toolbar__item .dfc-toolbar__button {
	margin-top: 2px;
}
.dfc-toolbar__item.dfToolbarButton {
	background: rgba(46, 63, 167, 0.1);
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
}
.dfc-toolbar__item.dfToolbarButton:hover {
	background: rgba(46, 63, 167, 0.3);
}
.dfc-toolbar__item.dfToolbarButton span {
	color: rgba(46, 63, 167, 1);
	transition: color 200ms linear;
}
.dfc-toolbar__item.dfToolbarButton:hover span {
	color: black;
}
.dfc-toolbar__item.dfToolbarButton .dfc-toolbar__button:hover {
	background: transparent !important;
}
.dfc-toolbar__item.dfToolbarSelect {
	border: 1px solid rgba(46, 63, 167, 0.1);
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
}
.dfc-toolbar__item.dfToolbarSelect .dfc-toolbar__button,
.dfc-toolbar__item.dfToolbarSelect .dfc-toolbar__button:hover {
	background: transparent;
	margin-top: 0;
}
.dfc-toolbar__item.dfToolbarTitle {
	height: 80%;
	margin-bottom: 5px;
	padding-right: 8px;
}
.dfc-toolbar__item.dfToolbarTitle2 {
	height: 80%;
	margin-bottom: 5px;
	padding-right: 8px;
}
.dfc-toolbar__item.dfToolbarButtonGrey {
	border-radius: 8px;
	padding: 0;
	height: 80%;
	margin-bottom: 8px;
	transition: background-color 200ms linear;
	margin-right: 5px;
}
.dfc-toolbar__item.dfToolbarButtonGrey .dfc-toolbar__button,
.dfc-toolbar__item.dfToolbarButtonGrey .dfc-toolbar__button:hover {
	padding: 0;
	height: 100%;
	padding-left: 12px;
	padding-right: 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 0;
}
.dfc-toolbar__item.dfToolbarButton .dfc-toolbar__button .dfc-toolbar__count {
	position: relative;
	top: 5px;
	right: -10px;
}
.dfc-toolbar__item.bufferRight {
	margin-right: 10px;
}
.dfToolbarButton:has(.dfc-toolbar__button.is-active) {
	background-color: rgba(46, 63, 167, 0.3);
}
.dfc-toolbar__item.dfToolbarButton .dfc-toolbar__button.is-active {
	background: transparent !important;
}

/* ---- Tabbar -------------------------------------------------------------- */

/* .dhx_tabbar / .dhx_tabbar-header__wrapper (border: none) / .dhx_tabbar-tab-button(--active) /
   .dhx_tabbar-header-active: 14px medium tabs in the primary colour, padded
   12px 24px, inactive text at 70%, a 2px bar under the active tab. */
.dfc.dfc-tabbar {
	--dfc-accent: var(--df-accent);
	--dfc-surface-raised: var(--dhx-background-additional, #e6e6e6);
	background-color: var(--dhx-background-primary, #fff);
	color: var(--dhx-font-color-primary, rgba(0, 0, 0, 0.7));
	font-family: var(--dhx-font-family);
	font-size: var(--dhx-font-size-normal, 14px);
	line-height: var(--dhx-line-height-normal, 20px);
}
.dfc.dfc-tabbar.backgroundTransparent,
.dfc.dfc-tabbar.backgroundTransparent .dfc-tabbar__panel {
	background-color: rgba(0, 0, 0, 0);
}
.dfc-tabbar > .dfc-tabbar__header {
	border: none !important;
}
.dfc-tabbar > .dfc-tabbar__header > .dfc-tabbar__list {
	gap: 0;
	padding: 0;
}
.dfc-tabbar .dfc-tabbar__tab {
	padding: 12px 24px;
	border-radius: 0;
	color: var(--dhx-color-primary, #3041b0);
	font-weight: var(--dhx-font-weight-medium, 500);
}
/* House style is sentence case: one app-wide rule for every dfc tab bar, no per-screen overrides. */
.dfc.dfc-tabbar .dfc-tabbar__tab,
.dfc.dfc-tabbar .dfc-tabbar__tab .dfc-tabbar__label {
	text-transform: none;
	letter-spacing: normal;
}
.dfc-tabbar .dfc-tabbar__tab:not(.is-active) .dfc-tabbar__label {
	opacity: 0.7;
}
.dfc-tabbar .dfc-tabbar__tab:hover {
	color: var(--dhx-color-primary, #3041b0);
}
.dfc-tabbar .dfc-tabbar__tab.is-active::after {
	left: 0;
	right: 0;
	border-radius: 0;
}

/* .dfTabbar (the advanced object editor): a bordered strip of pill tabs. */
.dfc.dfc-tabbar.dfTabbar {
	padding-left: 2px !important;
}
.dfTabbar > .dfc-tabbar__header {
	align-self: flex-start;
	max-width: 100%;
	height: 40px;
	margin-bottom: 5px;
	border: 1px solid #2e3fa7 !important;
	border-radius: 8px;
	overflow: hidden;
	background-color: white;
	box-sizing: border-box;
}
.dfTabbarHidden > .dfc-tabbar__header {
	display: none;
}
.dfTabbar > .dfc-tabbar__header > .dfc-tabbar__list {
	height: 100%;
}
.dfTabbar .dfc-tabbar__tab {
	box-sizing: border-box;
	height: calc(100% - 6px);
	margin: 3px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 11px;
}
.dfTabbar .dfc-tabbar__tab.is-active {
	background: #2e3fa7 !important;
	border: 1px solid #2e3fa7;
	color: white;
}
.dfTabbar .dfc-tabbar__tab::after {
	display: none !important;
}

/* ---- Sidebar icon rails --------------------------------------------------- */

/* .dhx_sidebar.dhx_sidebar--minimized (+ dhx_widget--border_right): the record editor's
   panel rail, the stack panel, the team and profile rails. 44px rows, 20px icons in the
   secondary text colour, the selected row tinted with a 2px primary bar on its left,
   and a 24px count badge on the icon's corner. */
.dfc.dfc-sidebar.dfIconRail {
	--dfc-fg: var(--dhx-font-color-primary, rgba(0, 0, 0, 0.7));
	background-color: var(--dhx-background-primary, #fff);
	border-right: 1px solid var(--dhx-border-color, rgba(0, 0, 0, 0.1));
	box-sizing: border-box;
	font-family: var(--dhx-font-family);
	font-size: var(--dhx-font-size-normal, 14px);
	scrollbar-width: none;
}
.dfc.dfc-sidebar.dfIconRail::-webkit-scrollbar {
	display: none;
}
#stackPanel > .dfc.dfc-sidebar.dfIconRail {
	border-right: 0;
}
.dfc-sidebar.dfIconRail .dfc-sidebar__body {
	padding: 0;
}
.dfc-sidebar.dfIconRail .dfc-sidebar__item {
	justify-content: center;
	margin: 0;
	padding: 12px;
	border-radius: 0;
	color: var(--dfc-fg);
	transition: background-color 0.2s;
}
.dfc-sidebar.dfIconRail .dfc-sidebar__icon {
	flex: 0 0 20px;
	height: 20px;
	font-size: var(--dhx-icon-size-normal, 20px);
	line-height: 20px;
	color: var(--dfc-sidebar-item-color, var(--dhx-font-color-secondary, rgba(0, 0, 0, 0.5)));
}
.dfc-sidebar.dfIconRail .dfc-sidebar__item--selected,
.dfc-sidebar.dfIconRail .dfc-sidebar__item--selected:hover {
	background-color: var(--dhx-background-secondary, #f7f7f7);
	color: var(--dfc-fg);
	box-shadow: inset 2px 0 0 0 var(--dhx-color-primary, #3041b0);
}
.dfc-sidebar.dfIconRail .dfc-sidebar__item--selected .dfc-sidebar__icon > span {
	color: inherit !important;
}
/* A panel's own background (its definition `css`) shows on its row, selected or not. */
.dfc-sidebar.dfIconRail .dfc-sidebar__item.sidebarBackgroundBlue {
	background-color: var(--uiBlueProjectSidebar);
}
.dfc-sidebar.dfIconRail .dfc-sidebar__item.sidebarBackgroundGreen {
	background-color: var(--uiGreenProjectSidebar);
}
.dfc-sidebar.dfIconRail .dfc-sidebar__item.sidebarBackgroundAmber {
	background-color: var(--uiAmberProjectSidebar);
}
.dfc-sidebar.dfIconRail .dfc-sidebar__item.sidebarBackgroundRed {
	background-color: var(--uiRedProjectSidebar);
}
.dfc-sidebar.dfIconRail .dfc-sidebar__item.sidebarBackgroundGrey {
	background-color: var(--uiGreyProjectSidebar);
}
.dfc-sidebar.dfIconRail .dfc-sidebar__item:hover {
	background-color: var(--dhx-background-additional, #e6e6e6);
}
/* .dhx_sidebar--minimized .dhx_sidebar-button__count (+ .dhx_navbar-count) */
.dfc-sidebar.dfIconRail .dfc-sidebar__count {
	top: -4px;
	right: 4px;
	min-width: 24px;
	max-width: 24px;
	height: 24px;
	padding: 0;
	overflow: hidden;
	border-radius: 12px;
	font-size: var(--dhx-font-size-small, 12px);
	font-weight: 400;
	line-height: 24px;
	letter-spacing: normal;
	color: var(--dhx-font-color-contrast, #fff);
	box-shadow: none;
}
/* .dhx_sidebar__item--separator */
.dfc-sidebar.dfIconRail .dfc-sidebar__separator {
	margin: 2px 0;
	background-color: var(--dhx-border-color, rgba(0, 0, 0, 0.1));
}

/* dfShellInCell (scripts/_utils_lattice_shell.js): the element a screen's Lattice shell is built on inside a layout cell. */
.dfShellHost { height: 100%; width: 100%; }

/* The main navigation collapsed to its icon rail (dfc.Sidebar flat): a visible scrollbar took width out
   of the 44px rail and pushed the icons off centre. It still scrolls, without the bar. */
.dfc-sidebar.dfc-sidebar--flat {
	scrollbar-width: none;
}
.dfc-sidebar.dfc-sidebar--flat::-webkit-scrollbar {
	display: none;
}

/* Lattice list views (LatticeGridListView.createList) drawn like the DHX Lists they replaced.
   The host element carries dfList (plus dfList--bordered where the DHX List had
   dhx_widget--bordered); the Lattice grid root is its child. */
.dfList > .lattice {
	--lattice-font-family: Roboto, Arial, Tahoma, Verdana, sans-serif;
	--lattice-font-size: 14px;
	--lattice-line-height: 20px;
	--lattice-foreground: rgba(0, 0, 0, 0.7);
	--lattice-cell-padding-x: 12px;
	--lattice-cell-padding-y: 8px;
	--lattice-hovered-background: #e6e6e6;
	--lattice-selected-background: #e6e6e6;
	--lattice-selected-foreground: rgba(0, 0, 0, 0.7);
	border: none;
	border-radius: 0;
}
.dfList--bordered > .lattice {
	border: 1px solid rgba(0, 0, 0, 0.1);
}
/* lattice-grid.min.css loads after this file and its `.lattice.lat-grid-root { border }` ties with
   the two rules above, so the grid's own grey border won. Naming the root class as well wins. */
.dfList > .lattice.lat-grid-root {
	border: none;
	border-radius: 0;
}
.dfList--bordered > .lattice.lat-grid-root {
	border: 1px solid rgba(0, 0, 0, 0.1);
}
/* The DHX item rule under each item. */
.dfList > .lattice[data-grid-lines] .lat-body-viewport .lat-row {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* The DHX selected item: a 2px accent bar on the left. */
.dfList > .lattice .lat-row--selected .lat-cell {
	box-shadow: inset 2px 0 0 #3041b0;
}

/* Per-list rules that targeted the DHX items (style.css: .teamTaskList, .weekActivityList,
   .noBorderList, .slideIn .dhx_list, [data-cell-id=nextweek|thisweek|...] .dhx_list). */
.dfList.teamTaskList > .lattice {
	--lattice-cell-padding-x: 10px;
	--lattice-cell-padding-y: 10px;
}
.dfList.weekActivityList > .lattice {
	--lattice-cell-padding-x: 0px;
	--lattice-cell-padding-y: 0px;
}
.dfList.noBorderList > .lattice[data-grid-lines] .lat-body-viewport .lat-row {
	border-bottom-color: transparent;
}
.dfList.noBorderList > .lattice .lat-row:hover {
	background: none;
}
.dfList.noBorderList > .lattice .lat-cell {
	cursor: default;
}
.slideIn .dfList > .lattice {
	--lattice-background: rgba(217, 217, 217, 0.2);
}
/* The week activity rows fill their 50px height (the template's status block is height: 100%). */
.dfList.weekActivityList > .lattice .lat-cell > div {
	align-self: stretch;
}
/* Card templates in the definition editor lists: the hover border (inline onmouseover is sanitised away). */
.dfListCard:hover { border-color: #818cf8 !important; }

/* Lattice trees (org explorer, network explorer, menu structure): Font Awesome node icons at a fixed width, so labels line up, with a gap before the label. */
.lat-group > .lat-icon-class { width: 18px; text-align: center; flex: none; }
.lat-group > .lat-icon-class + .lat-group-label { margin-left: 4px; }

/* Lattice data views (LatticeGridDataView.createDataView) drawn like the DHX DataViews they
   replaced. The host element carries dfDataView; the .lat-dataview root is its child; a view's
   `css` names go on every card (.lat-dv-card), where DHX put them on the view's root. */
/* DHX painted the view white, the gap round the cards included (the host carries that gap as padding). */
.dfDataView {
	background-color: #fff;
}
.dfDataView > .lat-dataview {
	font-family: Roboto, Arial, Tahoma, Verdana, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.7);
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	user-select: auto;
	-webkit-user-select: auto;
}
/* The DHX item: 8px padding inside a light rule, square, on the view's background. */
.dfDataView .lat-dv-card {
	--lattice-dataview-card-bg: transparent;
	--lattice-dataview-card-border: rgba(0, 0, 0, 0.1);
	--lattice-dataview-card-radius: 0;
	padding: 8px;
}
.dfDataView .lat-dv-card:hover {
	border-color: rgba(0, 0, 0, 0.1);
}
/* The DHX selected item had no fill, and the clicked (focused) item no ring either
   (style.css: .dhx_dataview-item--focus { box-shadow: none !important }), so a click shows nothing. */
.dfDataView .lat-dv-card.lat-dv-selected {
	--lattice-dataview-selected-bg: transparent;
	border-color: rgba(0, 0, 0, 0.1);
}

/* The icon picker (gap 0): DHX drew only the rules between the icons, none on the outside edges. */
.dfDataView .lat-dv-card.dfIconPickerCard {
	border-width: 0 1px 1px 0;
}
.dfDataView .lat-dv-card.dfIconPickerCard[aria-colindex='6'] {
	border-right-width: 0;
}

/* Connect a social account: .networkchooserView .dhx_dataview-item. */
.dfDataView .lat-dv-card.networkchooserView {
	cursor: pointer;
}
.dfDataView .lat-dv-card.networkchooserView:hover {
	background-color: #f4f4f4;
}

/* Entity card view (initiatives): .initiative_card .dhx_dataview-item. The card body
   (.dfDvCardBody) carries the padding so a record's colour fills the whole card. */
.dfDataView .lat-dv-card.initiative_card {
	cursor: pointer;
	border-radius: 25px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	border: none;
	padding: 0;
}
.dfDataView .lat-dv-card.initiative_card > .dfDvCardBody {
	padding: 15px 20px;
}

/* The designers' phone preview (publish / dashboard views): the preview image is on the host,
   so the view is see-through; .phonezone .dhx_dataview-item. */
.dfDataView.dfGuidePreview > .lat-dataview {
	background-color: transparent;
}
.dfDataView .lat-dv-card.dfGuidePreviewItem {
	padding: 0;
	border: none;
	cursor: grab;
}

/* Last, so it wins over the per-view shadows above: the selected (clicked) card loses its shadow,
   as the focused DHX item did (the initiative card's drop shadow included). */
.dfDataView .lat-dv-card.lat-dv-selected {
	box-shadow: none;
}

/* ---- Added for the designers' editors, template pickers, galleries and Settings home ---- */

/* The designers' page (host .ggdv) and block palette (host .blocksView): DHX items had no padding,
   border or fill and a grab cursor (.ggdv / .blocksView .dhx_dataview-item); the palette's view was
   see-through on the grey editor column (.blocksView { background: none }). */
.dfDataView .lat-dv-card.dfGuideBlockCard,
.dfDataView .lat-dv-card.dfBlockPaletteCard {
	padding: 0;
	border: none;
	cursor: grab;
}
.dfDataView.blocksView,
.dfDataView.blocksView > .lat-dataview {
	background-color: transparent;
}

/* The template pickers and the Apps / Mails lists (host .templatesView): a full-bleed preview image
   in a ruled card (.templatesView .dhx_dataview-item { padding: 0 }), the name strip darkening a
   little on the selected card (.dhx_dataview-item--selected .templateName). */
.dfDataView .lat-dv-card.dfTemplateCard {
	padding: 0;
}
.dfDataView .lat-dv-card.dfTemplateCard.lat-dv-selected .templateName {
	background-color: rgba(48, 65, 176, 0.752);
	color: white;
}

/* A gallery block's images in the block editor (DHX css 'dhx_widget--bordered galleryview'): a ruled,
   white view; the rules between the images only (right and bottom), none right of the last column. */
.dfDataView.dfBlockGalleryView {
	border: 1px solid rgba(0, 0, 0, 0.1);
}
.dfDataView .lat-dv-card.dfBlockGalleryCard {
	border-width: 0 1px 1px 0;
}
.dfDataView .lat-dv-card.dfBlockGalleryCard[aria-colindex='2'] {
	border-right-width: 0;
}

/* Diversity and SPOF screen (scripts/network_shared_risk.js): a one-line note above a grid, and the path lists in the side cell. */
.netRiskNote {
	padding: var(--df-space-2, 8px) var(--df-space-3, 12px);
	margin-bottom: var(--df-space-2, 8px);
	font-size: var(--df-font-size);
	color: var(--df-text);
	background-color: var(--df-warning-soft);
	border-radius: var(--df-radius-sm);
}
.netRiskPath {
	margin-bottom: var(--df-space-4, 16px);
	font-size: var(--df-font-size);
	color: var(--df-text);
}
.netRiskPath h4 {
	margin: 0 0 var(--df-space-2, 8px);
	font-size: var(--df-font-size-md);
}
.netRiskPath ul {
	margin: 0;
	padding-left: var(--df-space-4, 16px);
}
.netRiskPath .netRiskShared {
	color: var(--df-danger);
	font-weight: 500;
}
.netRiskPath .netRiskMuted {
	color: var(--df-text-muted);
}
/* Blast radius / outage impact (scripts/network_blast_radius.js): the summary strip no dfc
   primitive covers, and its loading/empty/error states. */
.netBlast-summaryWrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-bottom: 1px solid var(--df-border);
	box-sizing: border-box;
}
.netBlast-summary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-4);
	flex: 1;
	min-height: 0;
	align-items: center;
	padding: 0 var(--df-space-4);
	box-sizing: border-box;
}
.netBlast-summaryNote {
	margin: 0;
	padding: 0 var(--df-space-4) var(--df-space-2);
	color: var(--df-text-muted);
	font-size: var(--df-font-size-xs);
	flex: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.netBlast-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 90px;
}
.netBlast-stat i {
	color: var(--df-accent);
	font-size: var(--df-font-size-md);
}
.netBlast-statValue {
	font-size: var(--df-font-size-xl);
	font-weight: 600;
	color: var(--df-text);
}
.netBlast-verdict {
	margin: 0;
	padding: var(--df-space-3) var(--df-space-4) 0;
	font-size: var(--df-font-size);
	font-weight: 600;
	color: var(--df-text);
	flex: none;
}
.netBlast-statLabel {
	font-size: var(--df-font-size-xs);
	color: var(--df-text-muted);
}
.netBlast-loading,
.netBlast-empty,
.netBlast-error {
	padding: var(--df-space-4);
	color: var(--df-text-muted);
	font-size: var(--df-font-size);
}
.netBlast-error {
	color: var(--df-danger);
}
.netBlast-gridHost {
	height: 100%;
	min-height: 260px;
	padding: var(--df-space-3);
	box-sizing: border-box;
}
.netBlast-subHeader {
	padding: var(--df-space-3) var(--df-space-3) var(--df-space-1);
	font-weight: 600;
	font-size: var(--df-font-size-sm);
	color: var(--df-text-muted);
}
/* The outage impact / blast radius tab bar only: a quieter
   tab for one with no rows rather than hiding it. The header's horizontal scroll on overflow is
   dfc.Tabbar's own default (.dfc-tabbar__header), not added here. */
.dfc.dfc-tabbar.netBlastTabbar .dfc-tabbar__tab.netBlast-tabEmpty .dfc-tabbar__label {
	color: var(--df-text-muted);
	opacity: 0.6;
}
/* The outage impact Map tab (scripts/network_blast_radius.js, netBlast_mountMap): the map
   beside the circuits-and-premises list, with the no-geometry note below both. */
.netBlast-mapPane {
	display: flex;
	height: 100%;
	min-height: 0;
	gap: var(--df-space-3);
	padding: var(--df-space-3);
	box-sizing: border-box;
}
.netBlast-mapHost {
	flex: 2 1 60%;
	min-width: 0;
	min-height: 0;
	border: 1px solid var(--df-border);
	border-radius: var(--df-radius);
	overflow: hidden;
}
.netBlast-mapLists {
	flex: 1 1 320px;
	min-width: 260px;
	max-width: 420px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: auto;
	border: 1px solid var(--df-border);
	border-radius: var(--df-radius);
}
.netBlast-mapNoGeom {
	margin: 0 var(--df-space-3) var(--df-space-3);
	padding: var(--df-space-2) var(--df-space-3);
	color: var(--df-text-muted);
	font-size: var(--df-font-size-sm);
	border-top: 1px solid var(--df-border);
}
/* The impact map itself (scripts/network_impact_map.js, netMap_mount): the mapview host fills
   whatever element it is mounted into; its backing grid is never shown. */
.netMap-root {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
.netMap-host {
	flex: 1;
	min-height: 0;
}
.netMap-gridHost {
	width: 0;
	height: 0;
	overflow: hidden;
}
/* Read-only room view (scripts/dc_room_overlay.js) and its use in the Blast radius Room tab. */
.dfRoomOverlay { display: flex; flex-direction: column; gap: var(--df-space-2); color: var(--df-text); font-size: var(--df-font-size); }
.dfRoomOverlay-head { display: flex; align-items: baseline; gap: var(--df-space-3); }
.dfRoomOverlay-title { font-weight: 600; }
.dfRoomOverlay-meta { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dfRoomOverlay-msg { padding: var(--df-space-4); color: var(--df-text-muted); }
.dfRoomOverlay-msg--error { color: var(--df-danger); }
.dfRoomOverlay-note { margin: 0; padding: var(--df-space-2) 0; color: var(--df-text-muted); font-size: 12px; }
/* width 100% plus the viewBox's own aspect ratio (set in scripts/dc_room_overlay.js) scales the
   plan to fill its container; max-height is a generous sanity cap, not the usual size (a 10-rack
   suite was capped to 300px regardless of how wide its container was, so it rendered small in the
   middle of a much wider box). */
.dfRoomOverlay-svg { display: block; width: 100%; max-height: 70vh; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); user-select: none; }
.dfRoomOverlay-wall { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dfRoomOverlay-zone rect { fill: none; stroke: var(--df-accent); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.dfRoomOverlay-zone text { fill: var(--df-text-muted); pointer-events: none; }
.dfRoomOverlay-zone--suite rect { stroke: var(--df-success); }
.dfRoomOverlay-zone--cage rect { stroke: var(--df-warning); }
.dfRoomOverlay-zone--hotAisle rect { stroke: var(--df-danger); }
.dfRoomOverlay-feature rect { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.dfRoomOverlay-feature--door rect, .dfRoomOverlay-feature--ramp rect, .dfRoomOverlay-feature--cableEntry rect { stroke: var(--df-accent); }
.dfRoomOverlay-feature--coolingUnit rect { stroke: var(--df-success); }
.dfRoomOverlay-feature--powerCabinet rect { stroke: var(--df-warning); }
.dfRoomOverlay-feature--exitRoute rect, .dfRoomOverlay-feature--noGo rect { stroke: var(--df-danger); }
.dfRoomOverlay-feature--noGo rect { fill: var(--df-danger-soft); }
.dfRoomOverlay-keepClear { fill: var(--df-danger-soft) !important; stroke: var(--df-danger) !important; stroke-dasharray: 3 3; opacity: 0.4; }
.dfRoomOverlay-arc { fill: none; stroke: var(--df-accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dfRoomOverlay-rack { cursor: pointer; outline: none; }
.dfRoomOverlay-rackBody { fill: var(--df-surface-sunken); stroke: var(--df-text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dfRoomOverlay-rack text { fill: var(--df-text); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.dfRoomOverlay-front { fill: var(--df-text-muted); pointer-events: none; }
.dfRoomOverlay-rack--ok .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--ok { fill: var(--df-success-soft); background: var(--df-success-soft); }
.dfRoomOverlay-rack--warn .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--warn { fill: var(--df-warning-soft); background: var(--df-warning-soft); }
.dfRoomOverlay-rack--hit .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--hit { fill: var(--df-warning-soft); background: var(--df-warning-soft); }
.dfRoomOverlay-rack--unpowered .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--unpowered { fill: var(--df-danger-soft); background: var(--df-danger-soft); }
.dfRoomOverlay-rack--hit .dfRoomOverlay-rackBody { stroke: var(--df-warning); stroke-width: 2; }
.dfRoomOverlay-rack--unpowered .dfRoomOverlay-rackBody { stroke: var(--df-danger); stroke-width: 2; }
.dfRoomOverlay-rack:hover .dfRoomOverlay-rackBody, .dfRoomOverlay-rack:focus-visible .dfRoomOverlay-rackBody { stroke: var(--df-accent); stroke-width: 2; }
.dfRoomOverlay-rack.is-selected .dfRoomOverlay-rackBody { stroke: var(--df-accent); stroke-width: 3; }
.dfRoomOverlay-legend { display: flex; flex-wrap: wrap; gap: var(--df-space-3); font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfRoomOverlay-key { display: inline-flex; align-items: center; gap: var(--df-space-1); }
.dfRoomOverlay-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--df-text-muted); border-radius: 2px; background: var(--df-surface-sunken); }
.dfRoomOverlay-swatch--hit { border-color: var(--df-warning); }
.dfRoomOverlay-rack--approx .dfRoomOverlay-rackBody { stroke-dasharray: 8 5; }
.dfRoomOverlay-swatch--approx { border-style: dashed; }
.dfRoomOverlay-swatch--unpowered { border-color: var(--df-danger); }
.dfRoomOverlay-rack--moved .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--moved { stroke: var(--df-text-muted); background: var(--df-surface-sunken); }
.dfRoomOverlay-rack--moved .dfRoomOverlay-rackBody { stroke-dasharray: 6 4; opacity: 0.55; }
.dfRoomOverlay-swatch--moved { border-style: dashed; opacity: 0.55; }
.dfRoomOverlay-rack--removed .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--removed { opacity: 0.5; }
.dfRoomOverlay-strike { stroke: var(--df-text-muted); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
/* Plan state against the live room (PRODREQ-0000104): dcRoom_planState. */
.dfRoomOverlay-rack--planned .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--planned { stroke-dasharray: 8 5; border-style: dashed; }
.dfRoomOverlay-rack--reserved .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--reserved { stroke-dasharray: 2 2; border-style: dotted; }
.dfRoomOverlay-rack--retiring .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--retiring { opacity: 0.5; }
.dfRoomOverlay-rack--clash .dfRoomOverlay-rackBody, .dfRoomOverlay-swatch--clash { fill: var(--df-danger-soft); background: var(--df-danger-soft); }
.dfRoomOverlay-rack--clash .dfRoomOverlay-rackBody { stroke: var(--df-danger); stroke-width: 2; }
.dfRoomOverlay-ghost { pointer-events: none; }
.dfRoomOverlay-ghost text { fill: var(--df-text); text-anchor: middle; dominant-baseline: middle; }
.dfRoomOverlay-ghostBody { fill: var(--df-accent-soft); stroke: var(--df-accent); stroke-width: 1.5; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.dfRoomOverlay-ghost--added .dfRoomOverlay-ghostBody, .dfRoomOverlay-swatch--added { border-color: var(--df-accent); background: var(--df-accent-soft); }
.dfRoomOverlay-swatch--added { border-style: dashed; }
.dfRoomOverlay-ghost--clash .dfRoomOverlay-ghostBody { fill: var(--df-danger-soft); stroke: var(--df-danger); }
.netBlast-roomTab { height: 100%; overflow: auto; padding: var(--df-space-3); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--df-space-3); }
.netBlast-roomPlans { display: flex; flex-direction: column; gap: var(--df-space-3); }
.netBlast-rackHost { border-top: 1px solid var(--df-border); padding-top: var(--df-space-3); }
.netBlast-rackNote { color: var(--df-text-muted); font-size: var(--df-font-size-xs); margin: 0 0 var(--df-space-2); }
.dfRackSheet-item.is-affected .dfRackSheet-itemHit { fill: var(--df-danger-soft); fill-opacity: 0.15; stroke: var(--df-danger); stroke-width: 2; }
.dfRackSheet-item.is-app .dfRackSheet-itemHit { fill: var(--df-accent-soft); fill-opacity: 0.15; stroke: var(--df-accent); stroke-width: 2; }
/* Capacity forecast panel on SITE (scripts/dc_capacity_forecast.js) */
.dcFcast {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
.dcFcastNote {
	padding: 4px 10px;
	font-size: 12px;
	color: var(--df-warning);
}
.dcFcastNote:empty {
	display: none;
}
.dcFcastGrid {
	flex: 0 0 auto;
	min-height: 70px;
}
.dcFcastChart {
	flex: 1 1 auto;
	min-height: 260px;
	position: relative;
}
.dcFcastMuted {
	padding: 16px 10px;
	color: var(--df-text-muted);
	font-size: 13px;
}

/* Capacity question: why, rooms and zones coloured by headroom for the request (scripts/dc_capacity_question.js) */
.dcAskWhy { display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-3) var(--df-space-4); color: var(--df-text); font-size: var(--df-font-size); }
.dcAskWhy-head { display: flex; flex-direction: column; gap: var(--df-space-1); }
.dcAskWhy-title { font-weight: 600; }
.dcAskWhy-note { color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dcAskWhy-room { border: 1px solid var(--df-border); border-left-width: 4px; border-radius: var(--df-radius); padding: var(--df-space-2); background: var(--df-surface); }
.dcAskWhy-room--ok { border-left-color: var(--df-success); }
.dcAskWhy-room--warn { border-left-color: var(--df-warning); }
.dcAskWhy-room--fail { border-left-color: var(--df-danger); }
.dcAskWhy-room--ok .dfRoomOverlay-wall { fill: var(--df-success-soft); }
.dcAskWhy-room--warn .dfRoomOverlay-wall { fill: var(--df-warning-soft); }
.dcAskWhy-room--fail .dfRoomOverlay-wall { fill: var(--df-danger-soft); }
.dcAskWhy-zone--ok rect { fill: var(--df-success-soft); stroke: var(--df-success); stroke-dasharray: none; }
.dcAskWhy-zone--warn rect { fill: var(--df-warning-soft); stroke: var(--df-warning); stroke-dasharray: none; }
.dcAskWhy-zone--fail rect { fill: var(--df-danger-soft); stroke: var(--df-danger); stroke-dasharray: none; }
.dcAskWhy-limit { margin-top: var(--df-space-2); font-weight: 600; color: var(--df-danger); }
.dcAskWhy-list { margin: var(--df-space-1) 0 0; padding-left: 18px; font-size: var(--df-font-size-xs); line-height: 1.6; }
.dcAskWhy-chk--fail { color: var(--df-danger); font-weight: 600; }
.dcAskWhy-chk--warn { color: var(--df-text); }
.dcAskWhy-chk--ok { color: var(--df-text-muted); }

/* Power chain single-line diagram (dc_power_chain.js) */
.dcPower-diagramWrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 320px; height: 100%; }
.dcPower-summary { flex: 0 0 auto; padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text-muted); }
.dcPower-summary.is-failing { color: var(--df-danger); font-weight: 600; }
.dcPower-diagram { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); cursor: grab; }
.dcPower-diagram.is-panning { cursor: grabbing; }
.dcPower-svg { display: block; user-select: none; font-family: inherit; }
.dcPower-viewOn { background-color: var(--df-accent-soft); }
.dcPower-edge { fill: none; stroke: var(--df-text-muted); stroke-width: 2; }
.dcPower-edge--a { stroke-dasharray: none; }
.dcPower-edge--b { stroke-dasharray: 8 4; }
.dcPower-edge--c { stroke-dasharray: 2 4; }
.dcPower-edge--na { stroke-dasharray: 8 3 2 3; }
.dcPower-edge.is-down { stroke: var(--df-border); }
.dcPower-node { cursor: pointer; }
.dcPower-nodeBox { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1.5; }
.dcPower-node--ok .dcPower-nodeBox { fill: var(--df-success-soft); stroke: var(--df-success); }
.dcPower-node--warn .dcPower-nodeBox { fill: var(--df-warning-soft); stroke: var(--df-warning); }
.dcPower-node--over .dcPower-nodeBox { fill: var(--df-danger-soft); stroke: var(--df-danger); stroke-width: 2.5; }
.dcPower-node--unpowered .dcPower-nodeBox { fill: var(--df-surface-sunken); stroke: var(--df-danger); stroke-width: 2.5; }
.dcPower-node--unpowered .dcPower-nodeName, .dcPower-node--unpowered .dcPower-nodeSub { fill: var(--df-text-muted); }
.dcPower-nodeName { font-size: 12px; font-weight: 600; fill: var(--df-text); text-anchor: middle; pointer-events: none; }
.dcPower-nodeSub { font-size: 11px; fill: var(--df-text-muted); text-anchor: middle; pointer-events: none; }

/* Duplicate candidates: match prompt and merge screen (scripts/recruit_candidate_merge.js). */
.dfRecMerge-empty, .dfRecMerge-none { color: var(--df-text-muted); padding: var(--df-space-4); font-size: var(--df-font-size); }
.dfRecMerge-listGrid { height: 100%; padding: var(--df-space-2); }
.dfRecMerge-compareBtn { background: var(--df-accent); color: var(--df-surface); border: none; border-radius: var(--df-radius-sm); padding: 4px 10px; font-size: var(--df-font-size-sm); cursor: pointer; }
.dfRecMerge-compareBtn:hover { background: var(--df-accent-soft); color: var(--df-text); }
.dfRecMerge-compare { padding: var(--df-space-4); overflow-y: auto; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfRecMerge-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--df-space-3); padding-bottom: var(--df-space-3); border-bottom: 1px solid var(--df-border); }
.dfRecMerge-headerCol { display: flex; flex-direction: column; gap: 2px; }
.dfRecMerge-headerCol--loser { text-align: right; }
.dfRecMerge-headerLabel { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dfRecMerge-swap { display: inline-flex; align-items: center; gap: 6px; background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: 6px 12px; font-size: var(--df-font-size-sm); cursor: pointer; }
.dfRecMerge-swap:hover { background: var(--df-accent-soft); }
.dfRecMerge-swap--off { cursor: not-allowed; color: var(--df-text-muted); opacity: 0.6; }
.dfRecMerge-note { background: var(--df-warning-soft); color: var(--df-warning); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-sm); }
.dfRecMerge-section { font-weight: 600; margin-top: var(--df-space-2); }
.dfRecMerge-row { display: grid; grid-template-columns: 220px 1fr 1fr; align-items: center; gap: var(--df-space-3); padding: 6px 0; border-bottom: 1px solid var(--df-border); font-size: var(--df-font-size); }
.dfRecMerge-row--fill { grid-template-columns: 220px 1fr; }
.dfRecMerge-fieldName { color: var(--df-text-muted); }
.dfRecMerge-choice { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.dfRecMerge-fillNote { color: var(--df-text-muted); }
.dfRecMerge-moveTiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.dfRecMerge-moveTile { background: var(--df-surface-sunken); border-radius: var(--df-radius); padding: 8px 0; display: flex; flex-direction: column; align-items: center; }
.dfRecMerge-moveTile b { font-size: var(--df-font-size-lg); }
.dfRecMerge-moveTile span { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfRecMerge-progress { color: var(--df-text-muted); font-size: var(--df-font-size-sm); min-height: 18px; }
.dfRecMerge-compareBtn + .dfRecMerge-compareBtn { margin-left: 6px; }

/* Candidate data retention and erasure (scripts/recruit_gdpr.js): the erasure request popout's
   summary of personal fields that would be blanked. Buttons and the warning note reuse
   .dfRecMerge-compareBtn / .dfRecMerge-note above. */
.dfRecGdpr-summaryList { margin: 0 0 var(--df-space-3); padding-left: var(--df-space-4); font-size: var(--df-font-size-sm); }

/* Vacancy pipeline drawer: the rejection-approval block and chip (defined_object_complex_editor_
   row_type_vacancypipeline.js). The board's own vp-* rules stay in that file's inline stylesheet
   (pre-existing, hex-based debt); anything new goes here on --df-* tokens instead. */
.vp-rejblock { margin: 14px 16px 0; padding: var(--df-space-3) var(--df-space-4); border: 1px solid var(--df-warning); background: var(--df-warning-soft); border-radius: var(--df-radius); }
.vp-rejblock + .vp-dh { border-top: none; }
.vp-rejblock p { margin: var(--df-space-2) 0 0; font-size: var(--df-font-size-sm); color: var(--df-text); }
.vp-rejblock-off { border-color: var(--df-border); background: var(--df-surface-sunken); }
.vp-rejlink { color: var(--df-accent); }
.vp-rejchip { margin-left: 10px; border: 1px solid var(--df-warning); background: var(--df-warning-soft); color: var(--df-text); border-radius: var(--df-radius-sm); padding: 3px 9px; font-size: var(--df-font-size-sm); cursor: pointer; }
/* Per-stage guide time: Overdue toggle in the board header and the drawer guide line. */
.vp-overdue-toggle { margin-left: 10px; border: 1px solid var(--df-border); background: var(--df-surface); color: var(--df-text); border-radius: var(--df-radius-sm); padding: 4px 11px; font-size: var(--df-font-size-sm); cursor: pointer; }
.vp-overdue-toggle.vp-overdue-has { border-color: var(--df-danger); }
.vp-overdue-toggle.vp-overdue-on { background: var(--df-danger-soft); border-color: var(--df-danger); color: var(--df-danger); font-weight: 600; }
.vp-dguide { margin-top: var(--df-space-2); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.vp-dguide-over { color: var(--df-danger); font-weight: 600; }
.vp-tlmsg > span:first-child { background: var(--df-accent-soft); border: 1px solid var(--df-accent); }

/* Placement readiness cockpit (defined_object_complex_editor_row_type_placementcompliance.js) */
.dfPcHost { width: 100%; margin-bottom: var(--df-space-3); }
.dfPcHeader { display: flex; align-items: center; gap: var(--df-space-4); padding: var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); margin-bottom: var(--df-space-3); }
.dfPcRingWrap { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: var(--df-space-1); }
.dfPcRingSvg { width: 96px; height: 96px; }
.dfPcRingTrack { fill: none; stroke: var(--df-surface-sunken); stroke-width: 10; }
.dfPcRingArc { fill: none; stroke-width: 10; stroke-linecap: round; }
.dfPcRingArc.dfPcTone-success { stroke: var(--df-success); }
.dfPcRingArc.dfPcTone-warning { stroke: var(--df-warning); }
.dfPcRingArc.dfPcTone-danger { stroke: var(--df-danger); }
.dfPcRingPct { font-size: 20px; font-weight: 700; fill: var(--df-text); }
.dfPcRingCaption { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfPcHeaderText { display: flex; flex-direction: column; align-items: flex-start; gap: var(--df-space-2); }
.dfPcHeadline { font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-text); }
.dfPcMeta { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfPcAction { padding: 6px 14px; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); color: var(--df-text); cursor: pointer; }
.dfPcCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--df-space-3); }
.dfPcCard { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); }
.dfPcCardTitle { font-weight: 600; color: var(--df-text); margin-bottom: var(--df-space-2); }
.dfPcItem { display: flex; align-items: flex-start; gap: var(--df-space-2); padding: var(--df-space-2) 0; border-top: 1px solid var(--df-border); }
.dfPcItemBody { flex: 1 1 auto; min-width: 0; }
.dfPcLabel { color: var(--df-text); }
.dfPcDetail { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfPcDates { display: flex; flex-wrap: wrap; gap: var(--df-space-2); margin-top: 2px; }
.dfPcDateNote { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfPcDateNote.dfPcTone-warning { color: var(--df-warning); font-weight: 600; }
.dfPcDateNote.dfPcTone-danger { color: var(--df-danger); font-weight: 600; }
.dfPcDateNote.dfPcDateChip { padding: 1px 8px; border-radius: 10px; }
.dfPcDateNote.dfPcDateChip.dfPcTone-danger { background: var(--df-danger-soft); }
.dfPcLinks { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--df-font-size-xs); }
.dfPcLink { color: var(--df-text); text-decoration: underline; }
.dfPcChip { flex: 0 0 92px; text-align: center; padding: 2px 8px; border-radius: 10px; font-size: var(--df-font-size-xs); font-weight: 600; }
.dfPcChip.dfPcTone-success { color: var(--df-success); background: var(--df-success-soft); }
.dfPcChip.dfPcTone-warning { color: var(--df-warning); background: var(--df-warning-soft); }
.dfPcChip.dfPcTone-danger { color: var(--df-danger); background: var(--df-danger-soft); }
.dfPcChip.dfPcTone-muted { color: var(--df-text-muted); background: var(--df-surface-sunken); }

.netBlast-impactTab { display: flex; height: 100%; min-height: 0; box-sizing: border-box; }
.netBlast-topoHost { flex: 1; min-width: 0; min-height: 0; }
.netBlast-impactSide { flex: 0 0 380px; min-width: 380px; display: flex; flex-direction: column; border-left: 1px solid var(--df-border); min-height: 0; }
.netBlast-impactSide .netBlast-gridHost { flex: 1; }
.netBlast-stateDot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.netBlast-stateDot.is-down { background: var(--df-danger); }
.netBlast-stateDot.is-degraded { background: var(--df-warning); }

/* ---- Spec to shortlist stepper + footer (recruit_spec_to_shortlist.js) ----
   The stepper's own .dfc-stepper root has no width/flex-grow, so inside the flex header row it
   shrank to its content's minimum instead of spreading across the popout, packing the five
   steps' labels on top of each other. Stretching it to the host's full width lets its items
   (flex: 1 1 0 in dfc.css) divide that width evenly; wrapping long titles is a second line of
   defence at narrow widths rather than a silent clip. */
#recS2sStepperHost { width: 100%; }
#recS2sStepperHost .dfc-stepper { flex: 1 1 auto; width: 100%; min-width: 0; }
#recS2sStepperHost .dfc-stepper-title { white-space: normal; overflow: visible; text-overflow: initial; line-height: 1.25; }
#recS2sFooterHost .dfFormButton, #recS2sFooterHost .dfFormButtonGrey { display: inline-flex; }
.recS2sReqLayout { display: flex; align-items: flex-start; gap: var(--df-space-4); }
.recS2sReqSpecPane { flex: 1 1 45%; min-width: 0; }
.recS2sReqRightPane { flex: 1 1 55%; min-width: 0; }
.recS2sReqPaneLabel { font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); margin-bottom: var(--df-space-2); }
.recS2sReqSpecBody {
	height: 480px; overflow: auto; box-sizing: border-box; border: 1px solid var(--df-border); border-radius: var(--df-radius);
	background: var(--df-surface-sunken); padding: var(--df-space-3); white-space: pre-wrap; font-size: var(--df-font-size);
	color: var(--df-text); line-height: 1.5;
}
.recS2sReqSpecEmpty { color: var(--df-text-muted); }
.recS2sReqExtractRow { display: flex; align-items: center; gap: var(--df-space-3); margin-bottom: var(--df-space-4); flex-wrap: wrap; }
.recS2sReqEmpty { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.recS2sChipGroup { margin-bottom: var(--df-space-4); }
.recS2sChipGroupHeader { font-size: var(--df-font-size); font-weight: 600; color: var(--df-text); margin-bottom: var(--df-space-2); }
.recS2sChips { display: flex; flex-wrap: wrap; gap: var(--df-space-2); }
.recS2sChipGroupEmptyMsg { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.recS2sChip {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px;
	border: 1px solid var(--df-border); background: var(--df-surface);
}
/* Must-have is a priority, not an error: the normal chip background, picked out only by a
   2px accent rule on the left edge rather than the danger-coloured fill a pink chip implied. */
.recS2sChip.is-mandatory { border-left: 2px solid var(--df-accent); }
.recS2sChipName { font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text); white-space: nowrap; }
.recS2sChipSelect {
	font-size: var(--df-font-size-xs); color: var(--df-text-muted); background: transparent; border: none;
	border-radius: var(--df-radius-sm); padding: 2px 2px; cursor: pointer;
}
.recS2sChipSelect:hover, .recS2sChipSelect:focus { background: var(--df-surface); color: var(--df-text); }
.recS2sChipDelete {
	display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
	border: none; background: transparent; color: var(--df-text-muted); cursor: pointer; font-size: var(--df-font-size-xs);
}
.recS2sChipDelete:hover { background: var(--df-danger-soft); color: var(--df-danger); }

/* Onboarding workspace: queue tiles, readiness bar and case view (domain_onboarding_workspace.js) */
.onbwTiles { display: flex; gap: var(--df-space-3); flex-wrap: wrap; padding: var(--df-space-3) var(--df-space-4) 0; }
.onbwTile { flex: 1 1 200px; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3) var(--df-space-4); cursor: pointer; text-align: left; font: inherit; color: var(--df-text); }
.onbwTile:hover { background: var(--df-surface-sunken); }
.onbwTileLabel { font-size: var(--df-font-size-xs); color: var(--df-text-muted); font-weight: 600; }
.dfc-toolbar__item.dfToolbarButton.onbwFilterOn { background: rgba(46, 63, 167, 1); }
.dfc-toolbar__item.dfToolbarButton.onbwFilterOn span, .dfc-toolbar__item.dfToolbarButton.onbwFilterOn:hover span { color: #fff; }
.onbwTileValue { font-size: 26px; font-variant-numeric: tabular-nums; margin-top: var(--df-space-1); }
.onbwTileValue.isHot { color: var(--df-danger); }
.onbwBar { display: inline-block; vertical-align: middle; width: 70px; height: 8px; border-radius: 4px; background: var(--df-border); overflow: hidden; margin-right: var(--df-space-2); }
.onbwBarFill { display: block; height: 100%; background: var(--df-success); }
.onbwBarFill.isLow { background: var(--df-warning); }
.onbwCase { padding: var(--df-space-4); display: flex; flex-direction: column; gap: var(--df-space-4); color: var(--df-text); }
.onbwCaseHead { display: flex; gap: var(--df-space-4); flex-wrap: wrap; align-items: center; }
.onbwCaseHead label { display: flex; flex-direction: column; font-size: var(--df-font-size-xs); color: var(--df-text-muted); gap: var(--df-space-1); }
.onbwGroup { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); }
.onbwGroupTitle { padding: var(--df-space-2) var(--df-space-4); font-weight: 600; border-bottom: 1px solid var(--df-border); background: var(--df-surface-sunken); }
.onbwItem { display: flex; gap: var(--df-space-3); align-items: center; padding: var(--df-space-2) var(--df-space-4); border-bottom: 1px solid var(--df-border); flex-wrap: wrap; }
.onbwItem:last-child { border-bottom: none; }
.onbwItemMain { flex: 1 1 280px; min-width: 0; }
.onbwItemDetail { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.onbwChip { display: inline-block; padding: 1px var(--df-space-2); border-radius: 10px; font-size: var(--df-font-size-xs); background: var(--df-surface-sunken); }
.onbwChip.isDone { background: var(--df-success-soft); }
.onbwChip.isBad { background: var(--df-danger-soft); color: var(--df-danger); }
.onbwChip.isAmber { background: var(--df-warning-soft); color: var(--df-warning); }
.onbwActions { display: flex; gap: var(--df-space-2); flex-wrap: wrap; align-items: center; }
.onbwNotes { display: flex; flex-direction: column; gap: var(--df-space-2); }
.onbwNote { border-left: 3px solid var(--df-border); padding: var(--df-space-1) var(--df-space-3); }
.onbwNoteMeta { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }

/* Consultant next action list (PRODREQ-0000305): the rule-driven "Next actions" section in the
   VAC Pipeline drawer (scripts/defined_object_complex_editor_row_type_vacancypipeline.js) and the
   same list for the whole vacancy on the Overview panel
   (scripts/defined_object_complex_editor_row_type_vacancykeydetails.js). */
.vp-na-row { display: flex; flex-direction: column; gap: var(--df-space-1); padding: var(--df-space-2) 0; border-bottom: 1px solid var(--df-border); }
.vp-na-row:last-child { border-bottom: none; }
.vp-na-text { display: flex; flex-direction: column; gap: 2px; }
.vp-na-label { font-weight: 600; font-size: var(--df-font-size); color: var(--df-text); }
.vp-na-reason { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.vp-na-hint { font-size: var(--df-font-size-sm); color: var(--df-text-muted); font-style: italic; }
.vp-na-badge { margin-left: var(--df-space-2); vertical-align: middle; }
.vkd-nasec { margin-top: var(--df-space-4); }
.vkd-nasec h3 { margin: 0 0 var(--df-space-2); font-size: var(--df-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--df-text-muted); }
.vkd-na-empty { color: var(--df-text-muted); font-size: var(--df-font-size-sm); padding: var(--df-space-2) 0; }

/* Vacancy overview cockpit (scripts/defined_object_complex_editor_row_type_vacancykeydetails.js): funnel, trend, next up, credentials. */
.vkd-cpsec { margin: var(--df-space-4) 0; }
.vkd-cp-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: var(--df-space-3) var(--df-space-4); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
.vkd-cp-card h3 { margin: 0 0 var(--df-space-2); font-size: var(--df-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--df-text-muted); }
.vkd-cp-chart { flex: 1 1 auto; min-height: 0; }
.vkd-cp-sec { margin: var(--df-space-1) 0; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.vkd-cp-row { display: flex; justify-content: space-between; gap: var(--df-space-3); padding: var(--df-space-1) 0; border-bottom: 1px solid var(--df-border); cursor: pointer; }
.vkd-cp-row:hover .vkd-cp-title { color: var(--df-accent); }
.vkd-cp-title { font-weight: 600; font-size: var(--df-font-size-sm); color: var(--df-text); min-width: 0; overflow-wrap: anywhere; }
.vkd-cp-sub { font-size: var(--df-font-size-sm); color: var(--df-text-muted); text-align: right; }
.vkd-cp-cred { padding: var(--df-space-1) 0; }
.vkd-cp-credhead { display: flex; justify-content: space-between; gap: var(--df-space-3); margin-bottom: var(--df-space-1); }
.vkd-cp-bar { height: 6px; border-radius: 999px; background: var(--df-surface-sunken); overflow: hidden; }
.vkd-cp-barfill { height: 100%; background: var(--df-accent); }

/* ── Candidate conversation (row type candidateconversation, scripts/defined_object_complex_editor_row_type_candidateconversation.js) ── */
.dfConvo { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); color: var(--df-text); overflow: hidden; }
.dfConvo-head { display: flex; align-items: center; gap: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); border-bottom: 1px solid var(--df-border); }
.dfConvo-title { font-weight: 600; font-size: var(--df-font-size-md); }
.dfConvo-refresh { margin-left: auto; }
.dfConvo-banner { padding: var(--df-space-2) var(--df-space-3); background: var(--df-danger-soft); color: var(--df-danger); font-size: var(--df-font-size-sm); font-weight: 600; }
.dfConvo-threadHost { flex: 1; min-height: 200px; overflow: hidden; }
.dfConvo-threadHost .dfc-chat { height: 100%; }
.dfConvo-threadHost .dfc-chat-composer { display: none; }
.dfConvo-bubbleBody { display: flex; align-items: flex-start; gap: var(--df-space-1); }
.dfConvo-bubbleIcon { margin-top: 2px; font-size: var(--df-font-size-sm); opacity: .7; }
.dfConvo-empty { padding: var(--df-space-4); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfConvo-composer { border-top: 1px solid var(--df-border); padding: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfConvo-composerRow { display: flex; align-items: center; gap: var(--df-space-3); flex-wrap: wrap; }
.dfConvo-seg { display: inline-flex; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); overflow: hidden; }
.dfConvo-segBtn { border: 0; background: var(--df-surface); padding: var(--df-space-1) var(--df-space-3); font-size: var(--df-font-size-sm); color: var(--df-text); cursor: pointer; }
.dfConvo-segBtn.is-on { background: var(--df-accent-soft); color: var(--df-accent); font-weight: 600; }
.dfConvo-number { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfConvo-sandbox { font-size: var(--df-font-size-xs); color: var(--df-warning); }
.dfConvo-windowNote { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfConvo-notConnected { font-size: var(--df-font-size-sm); color: var(--df-text-muted); padding: var(--df-space-2) 0; }
.dfConvo-input { width: 100%; box-sizing: border-box; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: var(--df-space-2); font: inherit; font-size: var(--df-font-size); resize: vertical; }
.dfConvo-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-2); }
.dfConvo-count { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfConvo-templateSelect { width: 100%; box-sizing: border-box; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: var(--df-space-1) var(--df-space-2); font: inherit; font-size: var(--df-font-size); background: var(--df-surface); color: var(--df-text); }
.dfConvo-varRow { display: flex; flex-wrap: wrap; gap: var(--df-space-2); }
.dfConvo-varLabel { display: flex; flex-direction: column; gap: 2px; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfConvo-varInput { border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: var(--df-space-1); font: inherit; font-size: var(--df-font-size-sm); }
.dfConvo-preview { border: 1px dashed var(--df-border); border-radius: var(--df-radius-sm); padding: var(--df-space-2); font-size: var(--df-font-size-sm); background: var(--df-surface-sunken); }
.dfConvo-send { align-self: flex-end; }

/* ── Candidate conversation drawer context (row type vacancypipeline, "Message" popout) ── */
.dfConvoPopout { display: flex; height: 100%; }
.dfConvoPopout-main { flex: 1; min-width: 0; }
.dfConvoPopout-ctx { flex: 0 0 280px; }
.dfConvoCtx, .dfConvoPopout-ctx { padding: var(--df-space-3); border-left: 1px solid var(--df-border); overflow-y: auto; }
.dfConvoCtx h4, .dfConvoPopout-ctx h4 { margin: 0 0 var(--df-space-2); font-size: var(--df-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--df-text-muted); }
.dfConvoCtx-kv { display: grid; grid-template-columns: 1fr auto; gap: 5px var(--df-space-3); font-size: var(--df-font-size-sm); margin-bottom: var(--df-space-4); }
.dfConvoCtx-k { color: var(--df-text-muted); }
.dfConvoCtx-v { font-weight: 600; text-align: right; }

/* Recruitment: My next actions */
.dfRecNa-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--df-space-4); margin-bottom: var(--df-space-4); }
.dfRecNa-tile { min-height: 76px; }
.dfRecNa-grid { height: calc(100vh - 260px); min-height: 320px; width: 100%; }
.dfRecNa-empty { padding: var(--df-space-6, 32px) var(--df-space-4); text-align: center; color: var(--df-text-muted); font-size: var(--df-font-size-lg); }
.dfRecNa-overdue { display: inline-flex; align-items: center; gap: var(--df-space-2); color: var(--df-danger); font-weight: 600; }
.dfRecNa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--df-danger); display: inline-block; }
.dfRecNa-ok { display: inline-flex; align-items: center; gap: var(--df-space-2); color: var(--df-text-muted); }
.dfRecNa-dot--neutral { background: var(--df-text-muted); }

/* Angel holding cockpit (domain_angel_holding_cockpit.js) */
.angel-cockpit { font-family: inherit; color: var(--df-text); padding: var(--df-space-4) var(--df-space-4) 72px; width: 100%; max-width: none; background: var(--df-surface-sunken); min-height: 100%; box-sizing: border-box; }
.angel-cockpit * { box-sizing: border-box; }
.angel-cockpit .ac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-4); margin-bottom: var(--df-space-4); }
.angel-cockpit .ac-co { display: flex; gap: var(--df-space-3); align-items: flex-start; }
.angel-cockpit .ac-mono { width: 46px; height: 46px; border-radius: var(--df-radius); background: var(--df-accent); color: var(--df-surface); display: inline-flex; align-items: center; justify-content: center; font-size: var(--df-font-size-lg); font-weight: 600; flex-shrink: 0; }
.angel-cockpit .ac-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.angel-cockpit .ac-title { font-size: var(--df-font-size-xl); font-weight: 600; margin: 0; padding: 0; text-transform: none; color: var(--df-text); }
.angel-cockpit .ac-sub { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-top: 3px; }
.angel-cockpit .ac-btns { display: inline-flex; align-items: center; flex-shrink: 0; }
.angel-cockpit .ac-btns .lat-form { width: auto; }
.angel-cockpit .ac-actions { display: inline-flex; align-items: center; gap: var(--df-space-3); }
.angel-cockpit .ac-dash { width: 100%; }
.angel-cockpit .ac-tile { height: 100%; }
.angel-cockpit .ac-tile > div { overflow: auto; }
.angel-cockpit .ac-formhost { width: 100%; }
.angel-cockpit .ac-strong { font-weight: 600; }
.angel-cockpit .ac-note { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: 10px; }
.angel-cockpit .ac-empty { font-size: var(--df-font-size); color: var(--df-text-muted); padding: 10px 0; }
.angel-cockpit .ac-link { font-size: var(--df-font-size-sm); color: var(--df-accent); cursor: pointer; }
.angel-cockpit .ac-link:hover { text-decoration: underline; }
.angel-cockpit .ac-chart { height: 220px; position: relative; margin-bottom: var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-grey-50); }
.angel-cockpit .ac-table { width: 100%; font-size: var(--df-font-size-sm); border-collapse: collapse; margin-bottom: var(--df-space-3); }
.angel-cockpit .ac-table th { text-align: left; font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--df-grey-400); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--df-grey-300); }
.angel-cockpit .ac-table td { padding: var(--df-space-2); border-bottom: 1px solid var(--df-border); }
.angel-cockpit .ac-table td.num, .angel-cockpit .ac-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.angel-cockpit .ac-seis-empty { font-size: var(--df-font-size); color: var(--df-text-muted); display: flex; align-items: center; gap: 10px; }
.angel-cockpit .ac-clock { background: var(--df-grey-50); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: 14px var(--df-space-4); }
.angel-cockpit .ac-clock-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.angel-cockpit .ac-clock-label { font-size: var(--df-font-size); font-weight: 500; }
.angel-cockpit .ac-clock-remain { font-size: var(--df-font-size-sm); color: var(--df-warning); font-weight: 600; }
.angel-cockpit .ac-clock-remain.ok { color: var(--df-success); }
.angel-cockpit .ac-clock-ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.angel-cockpit .ac-miles { display: flex; flex-direction: column; gap: 9px; }
.angel-cockpit .ac-mile { display: flex; align-items: center; gap: 10px; font-size: var(--df-font-size); }
.angel-cockpit .ac-mile-mark { flex-shrink: 0; font-size: var(--df-font-size-md); }
.angel-cockpit .ac-mile-mark--done { color: var(--df-success); }
.angel-cockpit .ac-mile-mark--prog { color: var(--df-warning); }
.angel-cockpit .ac-mile-mark--todo { color: var(--df-grey-400); }
.angel-cockpit .ac-mile-meta { margin-left: auto; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.angel-cockpit .ac-doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--df-border); font-size: var(--df-font-size); }
.angel-cockpit .ac-doc-row:first-child { border-top: 0; padding-top: 2px; }
.angel-cockpit .ac-doc-click { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.angel-cockpit .ac-doc-click:hover .ac-doc-name { color: var(--df-accent); }
.angel-cockpit .ac-doc-ico { width: 16px; text-align: center; color: var(--df-grey-400); flex-shrink: 0; }
.angel-cockpit .ac-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.angel-cockpit .ac-docdel { display: none; border: 0; background: transparent; color: var(--df-danger); cursor: pointer; font-size: var(--df-font-size); line-height: 1; padding: 2px 6px; border-radius: var(--df-radius-sm); flex-shrink: 0; }
.angel-cockpit .ac-docdel:hover { background: var(--df-danger-soft); }
.angel-cockpit.ac-docs-editing .ac-docdel { display: inline-flex; }
.angel-cockpit .ac-savebar { display: none; position: sticky; bottom: 0; background: var(--df-surface); border-top: 1px solid var(--df-grey-300); padding: var(--df-space-3) 0; margin-top: var(--df-space-2); align-items: center; justify-content: space-between; gap: var(--df-space-3); z-index: 5; }
.angel-cockpit.ac-editing .ac-savebar { display: flex; }
.angel-cockpit .ac-savebar-note { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.ac-scheme-pills { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.ac-scheme-pill { display: inline-block; font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: 0.03em; padding: 1px 7px; border-radius: 14px; background: var(--df-success-soft); color: var(--df-success); }
.ac-popbody { padding: 20px; }
.ac-poplabel { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--df-text-muted); font-weight: 600; margin: var(--df-space-3) 0 var(--df-space-2); }
.ac-mile-edit { display: grid; grid-template-columns: 1fr auto; gap: var(--df-space-2); align-items: end; margin-bottom: var(--df-space-2); }

/* ── Health on the Network map and the site planner Logical mode (PRODREQ-0000352): outline, ring and dot styles, no fills ── */
.dfLmap-link--health-ok { stroke: var(--df-success); }
.dfLmap-link--health-degraded { stroke: var(--df-warning); }
.dfLmap-link--health-down { stroke: var(--df-danger); }
.dfLmap-link--health-unknown { stroke: var(--df-text-muted); stroke-dasharray: 10 6; }
.dfLmap-siteAlert { fill: none; stroke: var(--df-danger); stroke-opacity: 1; }
.dfLmap-healthDot, .dfSpLogical-healthDot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--df-text-muted); background: none; box-sizing: border-box; flex: none; vertical-align: middle; }
.dfLmap-healthDot--ok, .dfSpLogical-healthDot--ok { border-color: var(--df-success); }
.dfLmap-healthDot--degraded, .dfSpLogical-healthDot--degraded { border-color: var(--df-warning); }
.dfLmap-healthDot--down, .dfSpLogical-healthDot--down { border-color: var(--df-danger); }
.dfLmap-healthDot--unknown, .dfSpLogical-healthDot--unknown { border-style: dashed; }
.dfLmap-swatch--health-ok, .dfLmap-swatch--health-degraded, .dfLmap-swatch--health-down, .dfLmap-swatch--health-unknown { width: 10px; height: 10px; border-radius: 999px; background: none; border: 2px solid var(--df-text-muted); box-sizing: border-box; }
.dfLmap-swatch--health-ok { border-color: var(--df-success); }
.dfLmap-swatch--health-degraded { border-color: var(--df-warning); }
.dfLmap-swatch--health-down { border-color: var(--df-danger); }
.dfLmap-swatch--health-unknown { border-style: dashed; }
.dfLmap-alertRingSwatch { width: 14px; height: 14px; border: 3px solid var(--df-danger); border-radius: 999px; box-sizing: border-box; }
.dfLmap-svcHealth { display: flex; align-items: center; gap: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius); font-weight: 600; }
.dfLmap-svcHealth--degraded { border-color: var(--df-warning); }
.dfLmap-svcHealth--down { border-color: var(--df-danger); }
.dfLmap-svcHealth--ok { border-color: var(--df-success); }
.dfLmap-unhealthy { display: flex; align-items: center; gap: var(--df-space-2); font-size: var(--df-font-size-sm); }
.dfLmap-alerts { list-style: none; margin: var(--df-space-1) 0 var(--df-space-2) var(--df-space-4); padding: 0; display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfLmap-alert { display: flex; flex-direction: column; font-size: var(--df-font-size-sm); }
.dfLmap-alertHead { font-weight: 600; text-transform: capitalize; }
.dfSpLogical-arc--health-ok { stroke: var(--df-success); }
.dfSpLogical-arc--health-degraded { stroke: var(--df-warning); }
.dfSpLogical-arc--health-down { stroke: var(--df-danger); }
.dfSpLogical-arc--health-unknown { stroke: var(--df-text-muted); stroke-dasharray: 5 4; }
.dfSpLogical-head--health-ok path { fill: var(--df-success); }
.dfSpLogical-head--health-degraded path { fill: var(--df-warning); }
.dfSpLogical-head--health-down path { fill: var(--df-danger); }
.dfSpLogical-badge--health-ok circle, .dfSpLogical-badge--health-degraded circle, .dfSpLogical-badge--health-down circle, .dfSpLogical-badge--health-unknown circle { fill: var(--df-surface); stroke-width: 3; }
.dfSpLogical-badge--health-ok circle { stroke: var(--df-success); }
.dfSpLogical-badge--health-degraded circle { stroke: var(--df-warning); }
.dfSpLogical-badge--health-down circle { stroke: var(--df-danger); }
.dfSpLogical-badge--health-ok text, .dfSpLogical-badge--health-degraded text, .dfSpLogical-badge--health-down text, .dfSpLogical-badge--health-unknown text { fill: var(--df-text); }
.dfPlanner-rack.dfSpLogical-alertRack rect { stroke: var(--df-danger); stroke-width: 3; }
.dfSpLogical-alertRackSwatch { width: 14px; height: 10px; border: 3px solid var(--df-danger); box-sizing: border-box; }
.dfSpLogical-hopTitle .dfSpLogical-healthDot { margin-right: var(--df-space-1); }

/* Product objectives: progress bar with a marker at the expected value */
.dfOkrProgress { display: flex; align-items: center; gap: var(--df-space-2); width: 100%; }
.dfOkrBar { position: relative; flex: 1; height: 8px; border-radius: var(--df-radius-sm); background: var(--df-border); }
.dfOkrBar > span { display: block; height: 100%; border-radius: var(--df-radius-sm); background: var(--df-accent); }
.dfOkrBar-mark { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--df-text); }
.dfOkrProgress-value { min-width: 36px; text-align: right; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfOkrHint { padding: var(--df-space-2) var(--df-space-4); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }

/* Device configuration history panel (scripts/network_config_view.js) */
.netCfg { display: flex; height: 100%; min-height: 0; background: var(--df-surface); color: var(--df-text); font-size: var(--df-font-size); }
.netCfgList { width: 420px; flex: none; border-right: 1px solid var(--df-border); min-height: 0; }
.netCfgMain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.netCfgBar { display: flex; align-items: center; gap: var(--df-space-2); padding: 0 var(--df-space-2); border-bottom: 1px solid var(--df-border); }
.netCfgToolbar { flex: 1; min-width: 0; }
.netCfgFind { width: 240px; padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); font-size: var(--df-font-size); }
.netCfgSummary { padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netCfgBody { flex: 1; min-height: 0; overflow: auto; }
.netCfgEmpty { padding: var(--df-space-4); color: var(--df-text-muted); }
.netCfgCode, .netCfgDiff { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--df-font-size-sm); line-height: 1.5; min-width: max-content; }
.netCfgLine, .netCfgDiffSide { display: flex; white-space: pre; }
.netCfgLine--hit { background: var(--df-warning-soft); }
.netCfgNo { flex: none; width: 52px; padding-right: var(--df-space-2); text-align: right; color: var(--df-grey-400); user-select: none; }
.netCfgText { flex: 1; padding-left: var(--df-space-2); }
.netCfgMark { background: var(--df-warning-soft); color: inherit; outline: 1px solid var(--df-warning); }
.netCfgDiffRow { display: flex; }
.netCfgDiffSide { flex: 1 1 50%; min-width: 0; }
.netCfgDiffSide:first-child { border-right: 1px solid var(--df-border); }
.netCfgDiffSide--del { background: var(--df-danger-soft); }
.netCfgDiffSide--add { background: var(--df-success-soft); }
.netCfgDiffSide--empty { background: var(--df-surface-sunken); }
.netCfgFold { display: block; width: 100%; padding: var(--df-space-1) var(--df-space-3); border: 0; border-top: 1px solid var(--df-border); border-bottom: 1px solid var(--df-border); background: var(--df-surface-sunken); color: var(--df-accent); font-size: var(--df-font-size-sm); text-align: left; cursor: pointer; }
.netCfgBadge { display: inline-block; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-xs); }
.netCfgBadge--changed { border-color: var(--df-warning); color: var(--df-warning); }
.netCfgBadge--latest { border-color: var(--df-success); color: var(--df-success); }

/* Space & Power applications (scripts/sp_*.js). Light cards and tables on --df-surface;
   status is shown with a soft-tint badge or a left-border accent, never a dark fill. */

/* Page shells */
.dfSp-page { height: calc(100vh - 150px); overflow-y: auto; padding: var(--df-space-4); box-sizing: border-box; background: var(--df-surface-sunken); color: var(--df-text); font-size: var(--df-font-size); }
.dfSp-view, .dfSp-wiz, .dfSp-adm, .dfSp-rq, .dfSp-rv { display: flex; flex-direction: column; gap: var(--df-space-3); min-height: 100%; }
.dfSp-pad { padding: var(--df-space-3); display: flex; gap: var(--df-space-3); align-items: flex-start; }

/* Tabs */
.dfSp-tabs { display: flex; gap: var(--df-space-1); border-bottom: 1px solid var(--df-border); }
.dfSp-tab { padding: var(--df-space-2) var(--df-space-3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--df-text-muted); font-size: var(--df-font-size); cursor: pointer; }
.dfSp-tab:hover { color: var(--df-text); }
.dfSp-tab.is-active { color: var(--df-accent); border-bottom-color: var(--df-accent); font-weight: 600; }
.dfSp-count { color: var(--df-text-muted); font-size: var(--df-font-size-xs); margin-left: var(--df-space-1); }

/* Cards, collapsible sections */
.dfSp-card { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); }
.dfSp-card + .dfSp-card { margin-top: var(--df-space-3); }
.dfSp-cardTitle { display: flex; align-items: center; gap: var(--df-space-2); font-weight: 600; color: var(--df-text); margin-bottom: var(--df-space-2); }
.dfSp-empty { color: var(--df-text-muted); text-align: center; }
.dfSp-section { border: 1px solid var(--df-border); border-radius: var(--df-radius); margin-bottom: var(--df-space-3); background: var(--df-surface); }
.dfSp-section > summary { cursor: pointer; padding: var(--df-space-2) var(--df-space-3); font-weight: 600; color: var(--df-text); }
.dfSp-section > .dfSp-card { border: 0; border-top: 1px solid var(--df-border); border-radius: 0; margin-top: 0; }
.dfSp-sectionTitle { display: flex; align-items: center; gap: var(--df-space-2); font-weight: 600; color: var(--df-text); margin: var(--df-space-2) 0; }
.dfSp-sectionBody { padding: 0 var(--df-space-3) var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-2); }

/* Key/value facts */
.dfSp-k { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.dfSp-facts { display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfSp-facts > div { display: flex; justify-content: space-between; align-items: center; gap: var(--df-space-2); padding: var(--df-space-1) 0; border-bottom: 1px solid var(--df-border); }
.dfSp-statusBlocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--df-space-3); margin-bottom: var(--df-space-3); }
.dfSp-statusBlocks > div { display: flex; flex-direction: column; gap: 2px; }
.dfSp-siteCard { display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfSp-siteRow { display: flex; gap: var(--df-space-4); flex-wrap: wrap; }
.dfSp-siteFacts { display: flex; flex-direction: column; gap: var(--df-space-1); min-width: 220px; }
.dfSp-siteFacts > div { display: flex; justify-content: space-between; gap: var(--df-space-2); }
.dfSp-yes { color: var(--df-success); display: inline-flex; align-items: center; gap: var(--df-space-1); }
.dfSp-no { color: var(--df-text-muted); display: inline-flex; align-items: center; gap: var(--df-space-1); }

/* Chips and status badges: soft tint background, coloured text, no dark fill */
.dfSp-chip { display: inline-block; padding: 1px var(--df-space-2); border-radius: 999px; font-size: var(--df-font-size-xs); font-weight: 600; background: var(--df-surface-sunken); color: var(--df-text-muted); }
.dfSp-chip--accent, .dfSp-status--accent { background: var(--df-accent-soft); color: var(--df-accent); }
.dfSp-chip--success, .dfSp-status--success { background: var(--df-success-soft); color: var(--df-success); }
.dfSp-chip--warning, .dfSp-status--warning { background: var(--df-warning-soft); color: var(--df-warning); }
.dfSp-chip--danger, .dfSp-status--danger { background: var(--df-danger-soft); color: var(--df-danger); }
.dfSp-chip--muted, .dfSp-status--muted { background: var(--df-surface-sunken); color: var(--df-text-muted); }
.dfSp-chip--info, .dfSp-status--info { background: var(--df-accent-soft); color: var(--df-accent); }
.dfSp-status { display: inline-flex; align-items: center; gap: var(--df-space-1); padding: 1px var(--df-space-2); border-radius: 999px; font-size: var(--df-font-size-xs); font-weight: 600; background: var(--df-surface-sunken); color: var(--df-text-muted); }

/* EBRAG rag strip: a letter badge outlined in its tone, not filled */
.dfSp-ragStrip { display: flex; gap: var(--df-space-3); flex-wrap: wrap; }
.dfSp-ragCell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dfSp-ragHead { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfSp-rag { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 var(--df-space-1); border-radius: var(--df-radius-sm); border: 1px solid var(--df-border); font-size: var(--df-font-size-xs); font-weight: 700; color: var(--df-text-muted); background: var(--df-surface); }
.dfSp-rag--G { border-color: var(--df-success); color: var(--df-success); }
.dfSp-rag--A { border-color: var(--df-warning); color: var(--df-warning); }
.dfSp-rag--R { border-color: var(--df-danger); color: var(--df-danger); }
.dfSp-rag--B { border-color: var(--df-grey-700); color: var(--df-grey-700); }
.dfSp-rag--E { border-color: var(--df-critical); color: var(--df-critical); }
.dfSp-rag--none { border-style: dashed; color: var(--df-text-muted); }

/* Info / warning blocks: left-border accent + soft background, no icon fills */
.dfSp-info { display: flex; align-items: flex-start; gap: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-left: 3px solid var(--df-accent); border-radius: var(--df-radius-sm); background: var(--df-accent-soft); color: var(--df-text); margin-bottom: var(--df-space-2); }
.dfSp-info--warn { border-left-color: var(--df-warning); background: var(--df-warning-soft); }
.dfSp-info--ok { border-left-color: var(--df-success); background: var(--df-success-soft); }
.dfSp-warn { padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-left: 3px solid var(--df-danger); border-radius: var(--df-radius-sm); background: var(--df-danger-soft); color: var(--df-text); margin-bottom: var(--df-space-2); }
.dfSp-warn--soft { border-left-color: var(--df-warning); background: var(--df-warning-soft); }
.dfSp-warnTitle { display: flex; align-items: center; gap: var(--df-space-1); font-weight: 600; color: var(--df-danger); margin-bottom: var(--df-space-1); }
.dfSp-warnText { color: var(--df-warning); }
.dfSp-returned { display: flex; align-items: flex-start; gap: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-left: 3px solid var(--df-warning); border-radius: var(--df-radius-sm); background: var(--df-warning-soft); color: var(--df-text); margin-bottom: var(--df-space-2); }

/* Buttons and icon actions */
.dfSp-btnPrimary { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-surface); }
.dfSp-btnDanger { background: var(--df-danger); border-color: var(--df-danger); color: var(--df-surface); }
.dfSp-iconBtn { color: var(--df-text-muted); cursor: pointer; padding: 0 2px; }
.dfSp-iconBtn:hover { color: var(--df-accent); }
.dfSp-iconBtn.dfSp-danger { color: var(--df-danger); }
.dfSp-danger { color: var(--df-danger); }

/* Forms */
.dfSp-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--df-space-2); font-size: var(--df-font-size); color: var(--df-text); }
.dfSp-field input, .dfSp-field select, .dfSp-field textarea { padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); font-size: var(--df-font-size); }
.dfSp-check { display: flex; align-items: center; gap: var(--df-space-1); font-size: var(--df-font-size); color: var(--df-text); }
.dfSp-textarea { width: 100%; padding: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); font-size: var(--df-font-size); box-sizing: border-box; }
.dfSp-reqMark { color: var(--df-danger); }
.dfSp-formHost { padding: var(--df-space-2) 0; }
.dfSp-rvFields { display: flex; flex-direction: column; gap: var(--df-space-2); margin-bottom: var(--df-space-2); }

/* Filters and search */
.dfSp-filters { display: flex; align-items: flex-end; gap: var(--df-space-3); flex-wrap: wrap; margin-bottom: var(--df-space-2); }
.dfSp-filter { display: flex; flex-direction: column; gap: 2px; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfSp-filter select { padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); }
.dfSp-search { display: flex; align-items: center; gap: var(--df-space-1); padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text-muted); }
.dfSp-search input { border: 0; outline: 0; background: none; color: var(--df-text); font-size: var(--df-font-size); }

/* Grids */
.dfSp-grid { height: 420px; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.dfSp-gridTall { height: 600px; }
.dfSp-grid2 { display: flex; gap: var(--df-space-3); align-items: flex-start; }
.dfSp-grid2 > div { flex: 1 1 50%; min-width: 0; }

/* Tables */
.dfSp-table { width: 100%; border-collapse: collapse; font-size: var(--df-font-size); color: var(--df-text); }
.dfSp-table th, .dfSp-table td { padding: var(--df-space-1) var(--df-space-2); border-bottom: 1px solid var(--df-border); text-align: left; }
.dfSp-table th { color: var(--df-text-muted); font-size: var(--df-font-size-xs); font-weight: 600; }
.dfSp-table tr.is-off { color: var(--df-text-muted); }
.dfSp-tableSm th, .dfSp-tableSm td { padding: 2px var(--df-space-2); font-size: var(--df-font-size-sm); }
.dfSp-nowrap { white-space: nowrap; }
.dfSp-center { text-align: center; }
.dfSp-subRow td { border-bottom: 1px solid var(--df-border); padding: 2px var(--df-space-2) var(--df-space-1) var(--df-space-4); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfSp-steps .dfSp-stepIcon { color: var(--df-text-muted); margin-right: var(--df-space-1); }
.dfSp-overdue { color: var(--df-danger); font-weight: 600; }

/* Generic text and links */
.dfSp-muted { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfSp-link { color: var(--df-accent); cursor: pointer; text-decoration: none; }
.dfSp-link:hover { text-decoration: underline; }
.dfSp-spacer { flex: 1 1 auto; }
.dfSp-blockers { color: var(--df-warning); }

/* Rows of inline action icons */
.dfSp-rowActs { display: inline-flex; gap: var(--df-space-2); color: var(--df-text-muted); }

/* Lists */
.dfSp-listSplit { display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfSp-conflictList { margin: 0; padding-left: 18px; color: var(--df-text); font-size: var(--df-font-size-sm); }

/* Admin: stages & approvers */
.dfSp-adm { display: flex; gap: var(--df-space-3); align-items: flex-start; }
.dfSp-admStages { flex: 0 0 280px; display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfSp-admDetail { flex: 1 1 auto; min-width: 0; }
.dfSp-stageItem { display: flex; gap: var(--df-space-2); align-items: center; padding: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); cursor: pointer; }
.dfSp-stageItem.is-active { border-color: var(--df-accent); background: var(--df-accent-soft); }
.dfSp-stageItem.is-off { opacity: 0.6; }
.dfSp-stageOrder { flex: 0 0 24px; height: 24px; border-radius: 999px; border: 1px solid var(--df-border); display: flex; align-items: center; justify-content: center; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }

/* Milestones */
.dfSp-miles { display: flex; align-items: center; gap: var(--df-space-2); margin-bottom: var(--df-space-3); }
.dfSp-mile { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 auto; text-align: center; }
.dfSp-mileDot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--df-border); background: var(--df-surface); }
.dfSp-mile.is-current .dfSp-mileDot { border-color: var(--df-accent); }
.dfSp-mile.is-done .dfSp-mileDot { border-color: var(--df-success); background: var(--df-success-soft); }
.dfSp-mile.is-rejected .dfSp-mileDot { border-color: var(--df-danger); background: var(--df-danger-soft); }
.dfSp-mileLabel { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }

/* Power feeds table */
.dfSp-power { }
.dfSp-powerBody { display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfSp-powerFeeds { display: flex; align-items: center; gap: var(--df-space-2); }
.dfSp-feed { display: inline-flex; align-items: center; padding: 0 var(--df-space-1); border-radius: var(--df-radius-sm); border: 1px solid var(--df-border); color: var(--df-text); font-size: var(--df-font-size-sm); }
.dfSp-feed.is-off { color: var(--df-text-muted); border-style: dashed; }

/* Timeline (notes / history) */
.dfSp-timeline { display: flex; flex-direction: column; gap: var(--df-space-2); border-left: 1px solid var(--df-border); padding-left: var(--df-space-3); }
.dfSp-tl { position: relative; }
.dfSp-tl.is-internal { color: var(--df-text-muted); }
.dfSp-tlDot { position: absolute; left: calc(-1 * var(--df-space-3) - 4px); top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--df-accent); }
.dfSp-note { padding: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); margin-bottom: var(--df-space-2); }
.dfSp-noteHead { display: flex; justify-content: space-between; gap: var(--df-space-2); margin-bottom: 2px; font-size: var(--df-font-size-xs); }

/* Attachments */
.dfSp-attView { display: flex; gap: var(--df-space-3); height: 100%; min-height: 360px; }
.dfSp-attSideList { flex: 0 0 280px; overflow-y: auto; border-right: 1px solid var(--df-border); padding-right: var(--df-space-2); }
.dfSp-attGroup { margin-bottom: var(--df-space-3); }
.dfSp-attGroupTitle { font-weight: 600; color: var(--df-text); margin-bottom: var(--df-space-1); font-size: var(--df-font-size-sm); }
.dfSp-attItem { display: flex; align-items: flex-start; gap: var(--df-space-2); padding: var(--df-space-1) var(--df-space-2); border-radius: var(--df-radius-sm); cursor: pointer; }
.dfSp-attItem.is-active { background: var(--df-accent-soft); }
.dfSp-attItem:hover { background: var(--df-surface-sunken); }
.dfSp-attName { color: var(--df-text); }
.dfSp-attMain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfSp-attPreview { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dfSp-attPreview iframe, .dfSp-attPreview img { flex: 1 1 auto; width: 100%; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); }
.dfSp-previewTitle { font-weight: 600; color: var(--df-text); margin-bottom: var(--df-space-1); }
.dfSp-att { display: flex; gap: var(--df-space-3); align-items: flex-start; }
.dfSp-attSide { flex: 0 0 320px; display: flex; flex-direction: column; gap: var(--df-space-2); }

/* Wizard shell */
.dfSp-wizHead { display: flex; align-items: center; gap: var(--df-space-3); padding-bottom: var(--df-space-2); border-bottom: 1px solid var(--df-border); }
.dfSp-wizStepTitle { font-weight: 600; font-size: var(--df-font-size-lg); color: var(--df-text); }
.dfSp-wizStepper { flex: 1 1 auto; }
.dfSp-saveState { font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfSp-saved { color: var(--df-success); }
.dfSp-unsaved { color: var(--df-warning); }
.dfSp-wizBody { flex: 1 1 auto; overflow-y: auto; padding: var(--df-space-3) 0; }
.dfSp-wizFoot { display: flex; align-items: center; gap: var(--df-space-2); padding-top: var(--df-space-2); border-top: 1px solid var(--df-border); }
.dfSp-findLink { margin-top: var(--df-space-2); }

/* Contacts step */
.dfSp-contacts { display: flex; gap: var(--df-space-3); align-items: flex-start; }
.dfSp-contactRoles { flex: 1 1 45%; min-width: 0; }
.dfSp-dir { flex: 1 1 55%; min-width: 0; }
.dfSp-dirHead { display: flex; align-items: center; gap: var(--df-space-2); margin-bottom: var(--df-space-2); }
.dfSp-dirTable tr { cursor: pointer; }
.dfSp-dirTable tr.is-picked { background: var(--df-accent-soft); }
.dfSp-pager { display: flex; align-items: center; gap: var(--df-space-2); margin-top: var(--df-space-2); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfSp-dirMail { display: flex; gap: var(--df-space-2); align-items: center; margin-top: var(--df-space-2); }
.dfSp-roleTable tr.is-submitter { background: var(--df-surface-sunken); }
.dfSp-roleSel { padding: 2px var(--df-space-1); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); }

/* Rack work */
.dfSp-rw { display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfSp-rwHead { display: flex; align-items: center; gap: var(--df-space-2); }
.dfSp-rwTable tr:hover { background: var(--df-surface-sunken); }
.dfSp-block { border: 1px solid var(--df-border); border-radius: var(--df-radius); margin-bottom: var(--df-space-3); background: var(--df-surface); }
.dfSp-blockHead { display: flex; align-items: center; gap: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); border-bottom: 1px solid var(--df-border); font-weight: 600; }
.dfSp-blockBody { padding: var(--df-space-3); display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfSp-blockMain { display: flex; flex-direction: column; gap: var(--df-space-2); }
.dfSp-blockCards { border-top: 1px solid var(--df-border); padding-top: var(--df-space-2); }
.dfSp-slots { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dfSp-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfSp-slot.is-planned { border-style: dashed; border-color: var(--df-accent); color: var(--df-accent); }
.dfSp-cardRow { display: flex; gap: var(--df-space-2); align-items: flex-start; margin-bottom: var(--df-space-2); }
.dfSp-cardForm { flex: 1 1 auto; min-width: 0; }
.dfSp-lineEd { display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfSp-matrix { display: flex; gap: var(--df-space-2); flex-wrap: wrap; margin-bottom: var(--df-space-3); }
.dfSp-mx { display: flex; align-items: center; gap: var(--df-space-1); padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfSp-mx.is-on { border-color: var(--df-success); color: var(--df-success); background: var(--df-success-soft); }
.dfSp-help { padding: var(--df-space-3); color: var(--df-text); font-size: var(--df-font-size); }
.dfSp-eqView { border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: var(--df-space-2); margin-bottom: var(--df-space-2); }
.dfSp-eqHead { font-weight: 600; color: var(--df-text); display: flex; align-items: center; gap: var(--df-space-2); }
.dfSp-lineView { margin-bottom: var(--df-space-2); }
.dfSp-lineView > summary { cursor: pointer; color: var(--df-text); }
.dfSp-req { margin-top: var(--df-space-2); }
.dfSp-req > summary { cursor: pointer; color: var(--df-text-muted); font-size: var(--df-font-size-sm); }

/* Review / submit step and review workspace */
.dfSp-review { display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfSp-submitBar { display: flex; align-items: center; gap: var(--df-space-3); padding-top: var(--df-space-3); border-top: 1px solid var(--df-border); }
.dfSp-rvHead { display: flex; align-items: center; gap: var(--df-space-2); padding-bottom: var(--df-space-2); border-bottom: 1px solid var(--df-border); }
.dfSp-rvGrid { display: flex; gap: var(--df-space-3); align-items: flex-start; }
.dfSp-rvLeft { flex: 1 1 60%; min-width: 0; }
.dfSp-rvRight { flex: 1 1 40%; min-width: 0; }
.dfSp-lineReview { display: flex; align-items: center; gap: var(--df-space-2); margin-top: var(--df-space-1); flex-wrap: wrap; }
.dfSp-decide { }
.dfSp-decideBtns { display: flex; gap: var(--df-space-2); margin-top: var(--df-space-3); flex-wrap: wrap; }

/* Room plan / rack elevation views */
.dfSp-plan { display: flex; flex-direction: column; gap: var(--df-space-2); height: 100%; min-height: 0; }
.dfSp-planRooms { flex: 0 0 auto; }
.dfSp-planGrid { display: flex; gap: var(--df-space-3); flex: 1 1 auto; min-height: 0; }
.dfSp-planLeft { flex: 1 1 55%; min-width: 0; min-height: 0; }
.dfSp-planRight { flex: 1 1 45%; min-width: 0; min-height: 0; }
.dfSp-planEmpty { padding: var(--df-space-4); color: var(--df-text-muted); text-align: center; }
.dfSp-planNew { padding: var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface-sunken); margin-top: var(--df-space-2); }

/* Discovery runs (scripts/network_discovery_runs.js) */
.ndRuns-gridHost { height: 100%; }
.ndRuns-body { height: 100%; overflow: auto; padding: var(--df-space-4); display: flex; flex-direction: column; gap: var(--df-space-4); box-sizing: border-box; }
.ndRuns-sec { border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); padding: var(--df-space-3); }
.ndRuns-sec h3 { margin: 0 0 var(--df-space-2); font-size: var(--df-font-size); font-weight: 600; color: var(--df-text); }
.ndRuns-note { margin: var(--df-space-2) 0 0; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.ndRuns-line { margin: var(--df-space-2) 0; font-size: var(--df-font-size-sm); color: var(--df-text); }
.ndRuns-chart { height: 220px; }
.ndRuns-errGrid { height: 260px; }
.ndRuns-waiting { display: inline-flex; align-items: center; gap: var(--df-space-2); padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-warning); border-radius: var(--df-radius-sm); color: var(--df-text); font-size: var(--df-font-size-sm); }
.ndRuns-progress { height: 10px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); overflow: hidden; }
.ndRuns-progressBar { height: 100%; background: var(--df-accent); transition: width 0.4s ease; }
.ndRuns-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--df-space-2); margin-top: var(--df-space-2); }
.ndRuns-tile { border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: var(--df-space-2) var(--df-space-3); background: var(--df-surface); }
.ndRuns-tileValue { font-size: var(--df-font-size-md); font-weight: 600; color: var(--df-text); }
.ndRuns-tileLabel { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.ndRuns-badge { display: inline-block; padding: 0 var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); color: var(--df-text); }
.ndRuns-badge--running { border-color: var(--df-accent); }
.ndRuns-badge--complete { border-color: var(--df-success); }
.ndRuns-badge--partial { border-color: var(--df-warning); }
.ndRuns-badge--failed { border-color: var(--df-danger); }
.ndRuns-dot { display: inline-block; width: 10px; height: 10px; margin-right: var(--df-space-2); border-radius: 50%; border: 2px solid var(--df-grey-400); background: var(--df-surface); vertical-align: middle; }
.ndRuns-dot--healthy { border-color: var(--df-success); background: var(--df-success); }
.ndRuns-dot--degraded { border-color: var(--df-warning); background: var(--df-warning); }
.ndRuns-dot--silent { border-color: var(--df-danger); background: var(--df-danger); }
.ndRuns-dot--revoked { border-color: var(--df-danger); }
.ndRuns-healthText { font-size: var(--df-font-size-sm); color: var(--df-text); }
.ndRuns-healthText--none { color: var(--df-text-muted); }
.ndRuns-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--df-space-1) var(--df-space-4); margin: 0; font-size: var(--df-font-size-sm); }
.ndRuns-facts dt { color: var(--df-text-muted); }
.ndRuns-facts dd { margin: 0; color: var(--df-text); }
.ndRuns-chips { display: flex; flex-wrap: wrap; gap: var(--df-space-2); margin-bottom: var(--df-space-2); }
.ndRuns-chip { padding: var(--df-space-1) var(--df-space-3); border: 1px solid var(--df-border); border-radius: 999px; background: var(--df-surface); color: var(--df-text); font-size: var(--df-font-size-sm); cursor: pointer; }
.ndRuns-chip--on { border-color: var(--df-accent); color: var(--df-accent); }
.ndRuns-link { padding: 0; border: 0; background: none; color: var(--df-accent); font-size: var(--df-font-size-sm); cursor: pointer; text-decoration: underline; }

/* Derive service associations (card #7825): review panel and the association diagram. */
.dfAssoc-panel { padding: var(--df-space-4); display: flex; flex-direction: column; gap: var(--df-space-3); }
.dfAssoc-eyebrow { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAssoc-title { font-weight: 600; font-size: var(--df-font-size-md); color: var(--df-text); }
.dfAssoc-meta, .dfAssoc-note { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin: 0; }
.dfAssoc-evidence { border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); padding: var(--df-space-3); font-size: var(--df-font-size-sm); color: var(--df-text); }
.dfAssoc-legend { display: flex; align-items: center; gap: var(--df-space-2); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfAssoc-key { display: inline-block; width: 28px; height: 0; border-top: 2px solid var(--df-text-muted); margin-left: var(--df-space-3); }
.dfAssoc-key:first-child { margin-left: 0; }
.dfAssoc-key--dashed { border-top-style: dashed; border-top-color: var(--df-accent); }
.dfAssoc-svg { display: block; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.dfAssoc-box { fill: var(--df-surface); stroke: var(--df-text-muted); stroke-width: 1.5px; }
.dfAssoc-box--service { stroke: var(--df-accent); stroke-width: 2px; }
.dfAssoc-box--proposed { stroke: var(--df-accent); stroke-dasharray: 5 4; }
.dfAssoc-box.is-current { stroke-width: 3px; }
.dfAssoc-line { stroke: var(--df-text-muted); stroke-width: 2px; }
.dfAssoc-line--proposed { stroke: var(--df-accent); stroke-dasharray: 6 5; }
.dfAssoc-label { font-size: 12px; fill: var(--df-text); }
.dfAssoc-type { font-size: 10px; fill: var(--df-text-muted); }
.dfAssoc-badgeBox { fill: var(--df-surface); stroke-width: 1.5px; }
.dfAssoc-badgeBox--high { stroke: var(--df-success); }
.dfAssoc-badgeBox--medium { stroke: var(--df-warning); }
.dfAssoc-badgeBox--low { stroke: var(--df-danger); }
.dfAssoc-badgeText { font-size: 10px; fill: var(--df-text); }
.dfAssoc-badge { display: inline-block; padding: 0 var(--df-space-2); border-radius: var(--df-radius); border: 1px solid var(--df-border); background: var(--df-surface); color: var(--df-text); font-size: var(--df-font-size-sm); }
.dfAssoc-badge--high { border-color: var(--df-success); }
.dfAssoc-badge--medium { border-color: var(--df-warning); }
.dfAssoc-badge--low { border-color: var(--df-danger); }

/* Change calendar (scripts/network_maint_calendar.js, card #7822) */
.netMaint-main { height: 100%; display: flex; flex-direction: column; padding: var(--df-space-3); box-sizing: border-box; gap: var(--df-space-2); }
.netMaint-calendar { flex: 1 1 auto; min-height: 0; }
.netMaint-unsupported, .netMaint-note { border: 1px solid var(--df-warning); border-radius: var(--df-radius); background: var(--df-surface); color: var(--df-text); padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-sm); }
.netMaint-note { border-color: var(--df-border); color: var(--df-text-muted); }
.netMaint-empty { padding: var(--df-space-4); color: var(--df-text-muted); font-size: var(--df-font-size); }
.netMaint-side { height: 100%; display: flex; flex-direction: column; }
.netMaint-tabs { flex: 0 0 40px; }
.netMaint-panel { flex: 1 1 auto; min-height: 0; }
.netMaint-gridHost { height: 100%; }
.netMaintTabbar .dfcTab, .netMaintTabbar .dhx_tab { text-transform: none; }
.netMaint-card { border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); padding: 2px var(--df-space-2); font-size: var(--df-font-size-sm); overflow: hidden; }
.netMaint-card--window { border-color: var(--df-success); border-width: 2px; }
.netMaint-card--freeze { border-color: var(--df-danger); border-width: 2px; }
.netMaint-card--change { border-color: var(--df-border); }
.netMaint-cardTitle { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.netMaint-cardScope { color: var(--df-text-muted); font-size: var(--df-font-size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.netMaint-badges { display: flex; flex-wrap: wrap; gap: var(--df-space-1); margin-top: 2px; }
.netMaint-badge { border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); color: var(--df-text); padding: 0 var(--df-space-1); font-size: var(--df-font-size-xs); line-height: 16px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.netMaint-badge--risk1 { border-color: var(--df-critical); }
.netMaint-badge--risk2 { border-color: var(--df-danger); }
.netMaint-badge--risk3 { border-color: var(--df-warning); }
.netMaint-badge--risk4 { border-color: var(--df-success); }
.netMaint-badge--clash { border-color: var(--df-danger); color: var(--df-danger); font-weight: 600; }
.netMaint-badge--exception { border-color: var(--df-warning); color: var(--df-warning); font-weight: 600; }

/* Reclaim plan panel (scripts/dc_reclaim.js) */
.dcReclaim { display: flex; flex-direction: column; gap: var(--df-space-2); padding: var(--df-space-2); color: var(--df-text); font-size: var(--df-font-size); }
.dcReclaim-status { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dcReclaim-tiles { display: flex; gap: var(--df-space-3); flex-wrap: wrap; }
.dcReclaim-tile { min-width: 130px; padding: var(--df-space-2) var(--df-space-4); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); }
.dcReclaim-tileValue { font-size: var(--df-font-size-xl); font-weight: 600; color: var(--df-text); }
.dcReclaim-tileLabel { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dcReclaim-note { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dcReclaim-tabs { min-height: 480px; }
.dcReclaim-tabBody { padding: var(--df-space-3); background: var(--df-surface); overflow: auto; }
.dcReclaim-muted { padding: var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text-muted); }
.dcReclaim-chart { height: 240px; margin-bottom: var(--df-space-3); }
.dcReclaim-room { margin-bottom: var(--df-space-4); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.dcReclaim-roomTitle { padding: var(--df-space-2) var(--df-space-3); font-weight: 600; border-bottom: 1px solid var(--df-border); }
.dcReclaim-roomBody { padding: var(--df-space-2); }

/* ── Decommission check panel (scripts/network_decom_panel.js) ──────────── */
.dfDecom { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.dfDecom-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--df-space-3); gap: var(--df-space-3); }
.dfDecom-empty { margin: 0; padding: var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size); }
.dfDecom-banner { display: flex; align-items: center; gap: var(--df-space-3); padding: var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); }
.dfDecom-badge { padding: 2px var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); font-weight: 600; font-size: var(--df-font-size-sm); background: var(--df-surface); }
.dfDecom-summary { color: var(--df-text); font-size: var(--df-font-size); }
.dfDecom-clear { border-color: var(--df-success); }
.dfDecom-clear .dfDecom-badge { border-color: var(--df-success); color: var(--df-success); }
.dfDecom-warn { border-color: var(--df-warning); }
.dfDecom-warn .dfDecom-badge { border-color: var(--df-warning); color: var(--df-warning); }
.dfDecom-blocked { border-color: var(--df-danger); }
.dfDecom-blocked .dfDecom-badge { border-color: var(--df-danger); color: var(--df-danger); }
.dfDecom-overridden { border-color: var(--df-accent); }
.dfDecom-overridden .dfDecom-badge { border-color: var(--df-accent); color: var(--df-accent); }
.dfDecom-tiles { display: flex; flex-wrap: wrap; gap: var(--df-space-3); }
.dfDecom-tile { display: flex; flex-direction: column; gap: 2px; min-width: 140px; padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.dfDecom-tile-n { font-size: var(--df-font-size-xl); font-weight: 700; color: var(--df-text); }
.dfDecom-tile-l { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfDecom-source { margin: 0; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfDecom-grid { flex: 1; min-height: 160px; }
.dfDecom-topoHost { width: 100%; height: calc(100vh - 140px); }


/* Product > Portal: preview of the customer portal cards. Tokens only, light theme. */
.dfPmPortal { height: calc(100vh - 150px); box-sizing: border-box; overflow: auto; padding: var(--df-space-4); }
.dfPmPortal-message { text-align: center; padding: calc(var(--df-space-4) * 2) var(--df-space-4); color: var(--df-text-muted); }
.dfPmPortal-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-3); padding: var(--df-space-2) var(--df-space-3); margin-bottom: var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface-sunken); color: var(--df-text); font-size: var(--df-font-size); }
.dfPmPortal-strip--warn { background: var(--df-warning-soft); border-color: var(--df-warning); }
.dfPmPortal-tabs { height: 40px; margin-bottom: var(--df-space-3); }
.dfPmPortal-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--df-space-4); margin-bottom: var(--df-space-4); }
.dfPmPortal-board > .dfPmPortal-message { grid-column: 1 / -1; }
.dfPmPortal-card { display: flex; flex-direction: column; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); box-shadow: var(--df-shadow); overflow: hidden; cursor: pointer; }
.dfPmPortal-card:hover, .dfPmPortal-card:focus { border-color: var(--df-accent); outline: none; }
.dfPmPortal-image { height: 140px; display: flex; align-items: center; justify-content: center; background: var(--df-grey-100); color: var(--df-grey-400); font-size: 32px; }
.dfPmPortal-image img { width: 100%; height: 100%; object-fit: cover; }
.dfPmPortal-body { display: flex; flex-direction: column; gap: var(--df-space-2); padding: var(--df-space-3); }
.dfPmPortal-title { font-size: 16px; font-weight: 600; color: var(--df-text); }
.dfPmPortal-desc { font-size: var(--df-font-size); color: var(--df-grey-600); }
.dfPmPortal-muted { color: var(--df-text-muted); font-size: var(--df-font-size); }
.dfPmPortal-badges { display: flex; flex-wrap: wrap; gap: var(--df-space-1); }
.dfPmPortal-badge { display: inline-block; font-size: var(--df-font-size-xs); padding: 0 var(--df-space-2); border-radius: 999px; background: var(--df-accent-soft); color: var(--df-accent); }
.dfPmPortal-badge--public { background: var(--df-success-soft); color: var(--df-success); }
.dfPmPortal-badge--warn { background: var(--df-warning-soft); color: var(--df-warning); }
.dfPmPortal-votes { display: flex; flex-wrap: wrap; gap: var(--df-space-1); }
.dfPmPortal-vote { font-size: var(--df-font-size-sm); padding: var(--df-space-1) var(--df-space-2); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); color: var(--df-grey-600); background: var(--df-grey-50); cursor: pointer; }
.dfPmPortal-counts { display: flex; flex-wrap: wrap; gap: var(--df-space-3); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfPmPortal-counts b { color: var(--df-text); }
.dfPmPortal-heading { font-size: 16px; font-weight: 600; margin: var(--df-space-4) 0 var(--df-space-2); color: var(--df-text); }
.dfPmPortal-grid { height: 360px; border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
.dfPmPortal-form { display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-4); }
/* Device evidence panel and screen (scripts/network_evidence.js) */
.netEvid { padding: var(--df-space-3); color: var(--df-text); font-size: var(--df-font-size); background: var(--df-surface); }
.netEvidBar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--df-space-3); }
.netEvidFilter { display: inline-flex; align-items: center; gap: var(--df-space-2); cursor: pointer; }
.netEvidAxis, .netEvidNone, .netEvidNote { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.netEvidNote { padding: var(--df-space-3); }
.netEvidRow { padding: var(--df-space-2) 0; border-bottom: 1px solid var(--df-border); }
.netEvidHead { display: flex; align-items: center; gap: var(--df-space-3); }
.netEvidLabel { width: 160px; font-weight: 600; }
.netEvidValue { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netEvidDiffers { font-size: var(--df-font-size-sm); color: var(--df-warning); }
.netEvidEmpty { padding: var(--df-space-3); color: var(--df-text-muted); }
.netEvidBadge { display: inline-block; padding: 0 var(--df-space-2); border: 1px solid var(--df-text-muted); border-radius: var(--df-radius); background: var(--df-surface); color: var(--df-text-muted); font-size: var(--df-font-size-sm); line-height: 20px; white-space: nowrap; }
.netEvidBadge--high { border-color: var(--df-success); color: var(--df-success); }
.netEvidBadge--medium { border-color: var(--df-warning); color: var(--df-warning); }
.netEvidBadge--low { border-color: var(--df-text-muted); color: var(--df-text-muted); }
.netEvidTime { margin: var(--df-space-2) 0 0 160px; padding-right: var(--df-space-4); }
.netEvidTrack { position: relative; height: 14px; margin: 0 var(--df-space-2); }
.netEvidLine { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--df-border); }
.netEvidDot { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; box-sizing: border-box; border: 2px solid var(--df-accent); border-radius: 50%; background: var(--df-surface); }
.netEvidDot--differs { border-color: var(--df-warning); }
.netEvidCaps { display: flex; flex-wrap: wrap; gap: var(--df-space-1) var(--df-space-3); margin-top: var(--df-space-1); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netEvidCap--differs { color: var(--df-warning); }
.netEvidChart { height: 100%; padding: var(--df-space-2); background: var(--df-surface); }

/* Network data quality (site panel and estate screen) */
.netDq-root { display: flex; flex-direction: column; gap: var(--df-space-3); height: 100%; overflow: auto; font-size: var(--df-font-size); color: var(--df-text); }
.netDq-progress { min-height: 16px; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netDq-empty { padding: var(--df-space-4); color: var(--df-text-muted); font-size: var(--df-font-size); }
.netDq-tiles { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: var(--df-space-3); }
.netDq-tile { display: flex; flex-direction: column; gap: var(--df-space-1); padding: var(--df-space-3); text-align: left; font: inherit; color: var(--df-text); background: var(--df-surface); border: 2px solid var(--df-border); border-radius: var(--df-radius); cursor: pointer; }
.netDq-tile--good { border-color: var(--df-success); }
.netDq-tile--fair { border-color: var(--df-warning); }
.netDq-tile--poor { border-color: var(--df-danger); }
.netDq-tile--on { box-shadow: var(--df-shadow); background: var(--df-surface-sunken); }
.netDq-tile--none { cursor: default; background: var(--df-surface-sunken); }
.netDq-tileLabel { font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); }
.netDq-tileScore { font-size: var(--df-font-size-2xl); font-weight: 600; line-height: 1.1; }
.netDq-tileNote { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netDq-tileParts { display: flex; flex-direction: column; gap: 2px; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.netDq-tileParts b { color: var(--df-text); font-weight: 600; }
.netDq-lower { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--df-space-4); min-height: 320px; }
.netDq-chart { min-height: 320px; border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.netDq-gaps { border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); padding: var(--df-space-3); overflow: auto; max-height: 360px; }
.netDq-gapsHead { display: flex; justify-content: space-between; gap: var(--df-space-3); font-weight: 600; margin-bottom: var(--df-space-2); }
.netDq-gapsWhen { font-weight: 400; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netDq-gapList { margin: 0; padding: 0; list-style: none; counter-reset: netDqGap; }
.netDq-gap { counter-increment: netDqGap; display: flex; justify-content: space-between; gap: var(--df-space-3); padding: var(--df-space-2) 0; border-bottom: 1px solid var(--df-border); }
.netDq-gap::before { content: counter(netDqGap) "."; color: var(--df-text-muted); min-width: 22px; }
.netDq-gapTitle { flex: 1; }
.netDq-gapDetail { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.netDq-estateChart { height: 100%; }
.netDq-chip { display: inline-block; min-width: 40px; padding: 1px var(--df-space-2); text-align: center; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); background: var(--df-surface); font-size: var(--df-font-size-sm); }
.netDq-chip--good { border-color: var(--df-success); }
.netDq-chip--fair { border-color: var(--df-warning); }
.netDq-chip--poor { border-color: var(--df-danger); }
.netDq-chip--none { color: var(--df-text-muted); }

/* Angel my portfolio (scripts/domain_angel_my_portfolio.js). Root: #angelMyPortfolio.
   Tokens only; the old private palette is gone. domain_angel_add_investment.js builds its
   form as a Lattice form in the popout now, so it carries no styles of its own here. */
#angelMyPortfolio { --space-1: var(--df-space-1); --space-2: var(--df-space-2); --space-3: var(--df-space-3); --space-4: var(--df-space-4); --space-5: 20px; --space-6: 24px; --text-secondary: var(--df-text-muted); --text-primary: var(--df-text); }
#angelMyPortfolio, #angelMyPortfolio *, #angelMyPortfolio *::before, #angelMyPortfolio *::after { box-sizing: border-box; }
#angelMyPortfolio { margin: 0; padding: 0; font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.5; color: var(--df-text); background: var(--df-surface-sunken); height: 100%; overflow: auto; }
#angelMyPortfolio button { font-family: inherit; cursor: pointer; }
#angelMyPortfolio table { border-collapse: collapse; }
#angelMyPortfolio a { color: inherit; text-decoration: none; }
#angelMyPortfolio.amp-page { padding: var(--df-space-4) var(--df-space-4) 24px; }
#angelMyPortfolio .amp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-4); margin-bottom: var(--df-space-3); flex-wrap: wrap; }
#angelMyPortfolio .amp-meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#angelMyPortfolio .amp-actions .lat-form { width: auto; }
#angelMyPortfolio #ampTabbar { margin-bottom: var(--df-space-3); }
#angelMyPortfolio .amp-view { display: none; }
#angelMyPortfolio .amp-view.is-active { display: block; }
#angelMyPortfolio .amp-kpis, #angelMyPortfolio .amp-dash { width: 100%; margin-bottom: var(--df-space-3); }
#angelMyPortfolio .amp-tile { height: 100%; }
#angelMyPortfolio .amp-tile > div { overflow: auto; }
#angelMyPortfolio .amp-tile.is-hidden { display: none; }
#angelMyPortfolio .amp-kpi { height: 100%; }
#angelMyPortfolio .amp-kpi > div:first-child { margin: 0 !important; height: calc(100% - 24px); }
#angelMyPortfolio .amp-kpi > div:first-child > div { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--df-space-2) !important; }
#angelMyPortfolio .amp-kpi > div:first-child > div > div:first-child { font-size: var(--df-font-size-2xl) !important; }
#angelMyPortfolio .amp-kpi-sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-align: center; margin-top: var(--df-space-1); }
#angelMyPortfolio .amp-kpi-sub--pos { color: var(--df-success); }
#angelMyPortfolio .amp-kpi-sub--warn { color: var(--df-warning); }
#angelMyPortfolio .amp-chart, #angelMyPortfolio .amp-grid { width: 100%; position: relative; }
#angelMyPortfolio .amp-h260 { height: 260px; }
#angelMyPortfolio .amp-h280 { height: 280px; }
#angelMyPortfolio .amp-h300 { height: 300px; }
#angelMyPortfolio .amp-h360 { height: 360px; }
#angelMyPortfolio .amp-h480 { height: 480px; }
#angelMyPortfolio .amp-chart-sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-bottom: var(--df-space-1); }
#angelMyPortfolio .amp-formhost { width: 100%; margin-bottom: var(--df-space-3); }
#angelMyPortfolio .amp-formhost--inline { width: auto; margin: 0; }
#angelMyPortfolio .amp-btnhost { display: inline-flex; align-items: center; }
#angelMyPortfolio .amp-btnhost .lat-form { width: auto; }
#angelMyPortfolio .amp-btnhost--end { display: flex; justify-content: flex-end; margin-top: var(--df-space-3); }
#angelMyPortfolio .amp-empty { font-size: var(--df-font-size); color: var(--df-text-muted); padding: 10px 0; }
#angelMyPortfolio .amp-line { display: flex; justify-content: space-between; gap: var(--df-space-3); font-size: var(--df-font-size); padding: 6px 0 2px; }
#angelMyPortfolio .amp-line-l { color: var(--df-text); }
#angelMyPortfolio .amp-line-v { font-weight: 600; text-align: right; }
#angelMyPortfolio .amp-detail { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin: 2px 0 var(--df-space-2); }
.amp-pos { color: var(--df-success); font-weight: 600; }
.amp-neg { color: var(--df-danger); font-weight: 600; }
.amp-warn { color: var(--df-warning); }
.amp-muted { color: var(--df-text-muted); }
.amp-co { display: flex; align-items: center; gap: 10px; }
.amp-co-b { min-width: 0; }
.amp-co-n { font-size: var(--df-font-size); font-weight: 500; line-height: 1.3; }
.amp-co-m { font-size: var(--df-font-size-xs); color: var(--df-text-muted); line-height: 1.3; }
.amp-av { width: 28px; height: 28px; border-radius: 50%; color: var(--df-surface); font-size: var(--df-font-size-sm); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--df-grey-500); }
.amp-av--0 { background: var(--df-accent); }
.amp-av--1 { background: var(--df-success); }
.amp-av--2 { background: var(--df-warning); }
.amp-av--3 { background: var(--df-danger); }
.amp-av--4 { background: var(--df-grey-500); }
.amp-av--5 { background: var(--df-grey-400); }
.amp-av--6 { background: var(--df-grey-600); }
.amp-pill { display: inline-block; font-size: var(--df-font-size-xs); font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--df-grey-100); color: var(--df-text-muted); white-space: nowrap; }
.amp-pill--active { background: var(--df-success-soft); color: var(--df-success); }
.amp-pill--watchlist { background: var(--df-accent-soft); color: var(--df-accent); }
.amp-pill--exited { background: var(--df-grey-100); color: var(--df-text); }
.amp-pill--writeoff { background: var(--df-danger-soft); color: var(--df-danger); }
.amp-pill--dormant { background: var(--df-warning-soft); color: var(--df-warning); }
.amp-scheme { display: inline-block; font-size: var(--df-font-size-xs); font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--df-success-soft); color: var(--df-success); margin: 0 4px 2px 0; }
.amp-health { display: inline-block; font-weight: 600; font-size: var(--df-font-size-xs); padding: 1px 8px; border-radius: 999px; background: var(--df-grey-100); color: var(--df-text-muted); min-width: 34px; text-align: center; }
.amp-health--strong { background: var(--df-success-soft); color: var(--df-success); }
.amp-health--moderate { background: var(--df-warning-soft); color: var(--df-warning); }
.amp-health--weak { background: var(--df-danger-soft); color: var(--df-danger); }
.amp-banded { position: relative; }
.amp-band { position: absolute; inset: 0; z-index: 5; border-radius: var(--df-radius-lg); pointer-events: auto; }
.amp-band::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(45deg, var(--df-warning-soft) 0, var(--df-warning-soft) 14px, transparent 14px, transparent 28px); opacity: 0.6; }
.amp-band-badge { position: absolute; top: 10px; right: 12px; font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--df-warning); background: var(--df-warning-soft); border: 1px solid var(--df-warning); padding: 3px 9px; border-radius: 999px; }
.amp-info { padding: 20px 22px; font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.65; color: var(--df-text); }
.amp-info p { margin: 0 0 12px; }
.amp-info p:last-child { margin: 0; }

/* Angel profile (scripts/domain_angel_profile.js). Root: #angelProfile. Tokens only;
   sections are Lattice forms, so this file is now just page chrome: header, the summary
   card, tab visibility, the certification banner and the advisor live preview. */
#angelProfile, #angelProfile *, #angelProfile *::before, #angelProfile *::after { box-sizing: border-box; }
#angelProfile { margin: 0; padding: 0; font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.5; color: var(--df-text); background: var(--df-surface-sunken); height: 100%; overflow: auto; }
#angelProfile button { font-family: inherit; cursor: pointer; }
#angelProfile a { color: inherit; text-decoration: none; }
#angelProfile .ap-page { padding: var(--df-space-4) var(--df-space-4) 24px; max-width: 1280px; }

#angelProfile .ap-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-4); margin-bottom: var(--df-space-4); }
#angelProfile .ap-header__title { font-size: var(--df-font-size-xl); font-weight: 600; margin: 0 0 4px; }
#angelProfile .ap-header__meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }

#angelProfile .ap-card { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: var(--df-space-4); display: flex; align-items: center; gap: var(--df-space-4); margin-bottom: var(--df-space-4); flex-wrap: wrap; }
#angelProfile .ap-card__avatar { flex-shrink: 0; }
#angelProfile .ap-card__avatar .lat-form { width: auto; }
#angelProfile .ap-card__id { flex: 1; min-width: 200px; }
#angelProfile .ap-card__name-row { display: flex; align-items: center; gap: var(--df-space-2); flex-wrap: wrap; margin-bottom: 6px; }
#angelProfile .ap-card__name { font-size: var(--df-font-size-xl); font-weight: 600; }
#angelProfile .ap-card__meta { display: flex; flex-wrap: wrap; gap: 4px var(--df-space-4); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#angelProfile .ap-card__stats { flex-shrink: 0; min-width: 260px; }
#angelProfile .ap-card__save { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
#angelProfile .ap-card__save .lat-form { width: auto; }
#angelProfile .ap-save-state { font-size: var(--df-font-size-xs); color: var(--df-grey-400); }
#angelProfile .ap-save-state--dirty { color: var(--df-warning); font-weight: 500; }

#angelProfile .ap-tabbar { margin-bottom: var(--df-space-4); }
#angelProfile .ap-view { display: none; }
#angelProfile .ap-view.is-active { display: block; }
#angelProfile .ap-view .lat-form { width: 100%; }

#angelProfile .ap-banner { display: flex; align-items: flex-start; gap: var(--df-space-2); background: var(--df-success-soft); border: 1px solid var(--df-success); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-3); margin-bottom: var(--df-space-3); }
#angelProfile .ap-banner__check { color: var(--df-success); font-weight: 700; line-height: 1.45; }
#angelProfile .ap-banner__title { font-size: var(--df-font-size); font-weight: 600; color: var(--df-success); }
#angelProfile .ap-banner__sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: 1px; }
#angelProfile .ap-banner__action { margin-left: auto; align-self: center; }
#angelProfile .ap-banner__action .lat-form { width: auto; }
#angelProfile .ap-banner--warn { background: var(--df-warning-soft); border-color: var(--df-warning); }
#angelProfile .ap-banner--warn .ap-banner__check, #angelProfile .ap-banner--warn .ap-banner__title { color: var(--df-warning); }
#angelProfile .ap-banner--danger { background: var(--df-danger-soft); border-color: var(--df-danger); }
#angelProfile .ap-banner--danger .ap-banner__check, #angelProfile .ap-banner--danger .ap-banner__title { color: var(--df-danger); }

#angelProfile .ap-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-3); margin: 0 0 var(--df-space-3); }
#angelProfile .ap-section-head__title { font-size: var(--df-font-size-lg); font-weight: 600; }
#angelProfile .ap-section-head__sub { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-top: 2px; max-width: 60ch; }

#angelProfile .ap-preview { position: sticky; top: var(--df-space-4); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: var(--df-space-4); }
#angelProfile .ap-preview__eyebrow { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); font-weight: 600; margin-bottom: var(--df-space-2); }
#angelProfile .ap-pv-head { display: flex; gap: var(--df-space-3); margin-bottom: var(--df-space-4); }
#angelProfile .ap-pv-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--df-accent); color: var(--df-surface); font-weight: 600; font-size: var(--df-font-size-lg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#angelProfile .ap-pv-name { font-size: var(--df-font-size-lg); font-weight: 600; }
#angelProfile .ap-pv-role { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin: 2px 0 6px; }
#angelProfile .ap-pv-meta { display: flex; flex-wrap: wrap; gap: 4px var(--df-space-2); font-size: var(--df-font-size-xs); color: var(--df-text-muted); align-items: center; }
#angelProfile .ap-pv-section { margin-bottom: var(--df-space-4); }
#angelProfile .ap-pv-section:last-child { margin-bottom: 0; }
#angelProfile .ap-pv-label { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-grey-400); font-weight: 600; margin-bottom: 6px; }
#angelProfile .ap-pv-bio { font-size: var(--df-font-size-sm); color: var(--df-text-muted); line-height: 1.55; margin: 0; }
#angelProfile .ap-pv-tags { display: flex; flex-wrap: wrap; gap: 5px; }
#angelProfile .ap-pv-tiers { display: flex; flex-direction: column; gap: 6px; }
#angelProfile .ap-pv-tier { display: flex; align-items: baseline; justify-content: space-between; gap: var(--df-space-2); padding: var(--df-space-2) 10px; border: 1px solid var(--df-border); border-radius: var(--df-radius); }
#angelProfile .ap-pv-tier__name { font-size: var(--df-font-size-sm); font-weight: 600; }
#angelProfile .ap-pv-tier__note { font-size: var(--df-font-size-xs); color: var(--df-grey-400); margin-left: 4px; font-weight: 400; }
#angelProfile .ap-pv-tier__price { font-size: var(--df-font-size-md); font-weight: 600; white-space: nowrap; }
#angelProfile .ap-pv-avail { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#angelProfile .ap-pv-divider { border: 0; border-top: 1px solid var(--df-border); margin: var(--df-space-3) 0; }
#angelProfile .ap-pv-cta { width: 100%; justify-content: center; }

@media (max-width: 720px) {
  #angelProfile .ap-card { flex-wrap: wrap; align-items: flex-start; }
}

/* Investor self-certification popout (angelOpenComplianceWizard). Root: .angelCompliance.
   Rendered at body level (outside #angelProfile) in makePopout's slide-out. */
.angelCompliance { padding: var(--df-space-4) var(--df-space-5) var(--df-space-5); font-family: inherit; color: var(--df-text); font-size: var(--df-font-size-md); line-height: 1.5; }
.angelCompliance *, .angelCompliance *::before, .angelCompliance *::after { box-sizing: border-box; }
.angelCompliance .ac-intro { font-size: var(--df-font-size); color: var(--df-text-muted); margin: 0 0 var(--df-space-4); }
.angelCompliance .ac-catdesc { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-top: var(--df-space-2); line-height: 1.45; }
.angelCompliance .ac-catdesc:empty { display: none; }
.angelCompliance .ac-sechead { font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--df-grey-400); margin: var(--df-space-4) 0 6px; }
.angelCompliance .ac-qintro { font-size: var(--df-font-size); color: var(--df-text-muted); margin: 0 0 var(--df-space-2); line-height: 1.5; }
.angelCompliance .ac-qtext { font-size: var(--df-font-size); color: var(--df-text); margin-bottom: var(--df-space-2); }
.angelCompliance .ac-qtext b { font-weight: 600; }
.angelCompliance .ac-note { color: var(--df-text-muted); font-weight: 400; }
.angelCompliance .ac-warn { padding: var(--df-space-2) var(--df-space-3); border-radius: var(--df-radius); background: var(--df-warning-soft); border: 1px solid var(--df-warning); font-size: var(--df-font-size-sm); color: var(--df-warning); margin-top: var(--df-space-3); }
.angelCompliance .ac-decltext { font-size: var(--df-font-size); color: var(--df-text); margin-bottom: var(--df-space-2); }
.angelCompliance .ac-declnest { margin: 0 0 var(--df-space-3); font-size: var(--df-font-size-sm); color: var(--df-text-muted); line-height: 1.5; }
.angelCompliance .ac-declnest b { color: var(--df-text); font-weight: 600; }

/* Off-platform deals (scripts/domain_angel_offplatform_view.js, scripts/domain_angel_offplatform.js).
   Root: #angelOffPlatform. Tokens only; the cockpit and the six-step upload wizard share this
   sheet. The topbar (view tabs, theme toggle) and the wizard's intel-captured panels are always
   hidden (angelOffPlatformDeals never shows them); the sidebar/cover/notes blocks are unused —
   kept only because the prototype's full CSS was ported wholesale. */
#angelOffPlatform * { box-sizing: border-box; margin: 0; padding: 0; }
#angelOffPlatform { scroll-behavior: smooth; }
#angelOffPlatform {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--df-text);
    background: var(--df-surface-sunken);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
#angelOffPlatform .cover {
    background: var(--df-grey-900);
    color: var(--df-surface);
    padding: 24px 0;
  }
#angelOffPlatform .cover-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
#angelOffPlatform .cover-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
#angelOffPlatform .cover-logo {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--df-surface);
  }
#angelOffPlatform .cover-tagline {
    font-family: inherit;
    font-style: italic;
    font-size: 13px;
    color: var(--df-grey-300);
    letter-spacing: 0.01em;
  }
#angelOffPlatform .cover-meta {
    text-align: right;
    font-size: 12px;
    color: var(--df-grey-300);
    line-height: 1.6;
  }
#angelOffPlatform .cover-meta strong {
    color: var(--df-surface);
    font-weight: 500;
  }
#angelOffPlatform .intro {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 32px 16px;
  }
#angelOffPlatform .intro-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--df-grey-400);
    margin-bottom: 12px;
    font-weight: 500;
  }
#angelOffPlatform .intro-title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    max-width: 720px;
    line-height: 1.2;
  }
#angelOffPlatform .intro-lede {
    font-size: 16px;
    line-height: 1.6;
    color: var(--df-text-muted);
    max-width: 680px;
    margin-bottom: 8px;
  }
#angelOffPlatform .app {
    max-width: 1280px;
    margin: 32px auto 0;
    padding: 0 32px 48px;
  }
#angelOffPlatform .app-frame {
    display: grid;
    grid-template-columns: 240px 1fr;
    background: var(--df-surface);
    border: 0.5px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    overflow: hidden;
    min-height: 720px;
  }
#angelOffPlatform .sidebar {
    background: var(--df-grey-900);
    color: var(--df-surface);
  }
#angelOffPlatform .sidebar-header {
    padding: 18px 20px;
    border-bottom: 0.5px solid var(--df-border);
  }
#angelOffPlatform .sidebar-logo {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
#angelOffPlatform .nav-section { padding: 16px 12px 8px; }
#angelOffPlatform .nav-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--df-grey-300);
    padding: 0 8px 8px;
    font-weight: 500;
  }
#angelOffPlatform .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--df-radius);
    color: var(--df-grey-300);
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
    user-select: none;
  }
#angelOffPlatform .nav-item:hover {
    background: var(--df-grey-800);
    color: var(--df-surface);
  }
#angelOffPlatform .nav-item.active {
    background: var(--df-grey-800);
    color: var(--df-surface);
  }
#angelOffPlatform .nav-item-icon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    flex-shrink: 0;
  }
#angelOffPlatform .main { display: flex; flex-direction: column; }
#angelOffPlatform .topbar {
    display: none;
  }
#angelOffPlatform .view-tabs { display: flex; gap: 4px; }
#angelOffPlatform .view-tab {
    padding: 6px 12px;
    border-radius: var(--df-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--df-text-muted);
    background: transparent;
    border: 0.5px solid transparent;
    font-family: inherit;
    transition: all 0.15s;
  }
#angelOffPlatform .view-tab:hover { color: var(--df-text); }
#angelOffPlatform .view-tab.active {
    background: var(--df-grey-100);
    color: var(--df-text);
  }
#angelOffPlatform .topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }
#angelOffPlatform .icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 0.5px solid var(--df-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--df-text-muted);
    transition: all 0.15s;
  }
#angelOffPlatform .icon-btn:hover {
    background: var(--df-grey-100);
    color: var(--df-text);
  }
#angelOffPlatform .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--df-accent-soft);
    color: var(--df-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
  }
#angelOffPlatform .content { padding: 28px; }
#angelOffPlatform .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
  }
#angelOffPlatform .page-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
#angelOffPlatform .page-subtitle {
    font-size: 13px;
    color: var(--df-text-muted);
  }
#angelOffPlatform .btn {
    padding: 8px 14px;
    background: var(--df-surface);
    color: var(--df-text);
    border: 0.5px solid var(--df-border);
    border-radius: var(--df-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
#angelOffPlatform .btn:hover {
    background: var(--df-grey-100);
    border-color: var(--df-grey-300);
  }
#angelOffPlatform .btn:active { transform: scale(0.98); }
#angelOffPlatform .btn-primary {
    background: var(--df-text);
    color: var(--df-surface);
    border-color: var(--df-text);
  }
#angelOffPlatform .btn-primary:hover { opacity: 0.9; background: var(--df-text); }
#angelOffPlatform .btn-sm { padding: 4px 10px; font-size: 12px; }
#angelOffPlatform .metric-grid {
    margin-bottom: 24px;
  }
#angelOffPlatform .metric-value-muted {
    font-size: 13px;
    color: var(--df-text-muted);
    font-weight: 400;
  }
/* KPI strip tiles (offPlatformRenderKpis / df_lattice_dashboard), same shape as #angelMyPortfolio .amp-kpi */
#angelOffPlatform .offplat-kpi { height: 100%; }
#angelOffPlatform .offplat-kpi > div:first-child { margin: 0 !important; height: calc(100% - 24px); }
#angelOffPlatform .offplat-kpi > div:first-child > div { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--df-space-2) !important; }
#angelOffPlatform .offplat-kpi > div:first-child > div > div:first-child { font-size: var(--df-font-size-2xl) !important; }
#angelOffPlatform .offplat-kpi-sub {
    font-size: var(--df-font-size-xs);
    color: var(--df-text-muted);
    text-align: center;
    margin-top: var(--df-space-1);
  }
#angelOffPlatform .stage-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
#angelOffPlatform .stage-chip {
    padding: 6px 12px;
    border-radius: var(--df-radius);
    font-size: 13px;
    background: transparent;
    border: 0.5px solid var(--df-border);
    color: var(--df-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
  }
#angelOffPlatform .stage-chip.active {
    background: var(--df-text);
    color: var(--df-surface);
    border-color: var(--df-text);
  }
#angelOffPlatform .stage-chip:not(.active):hover {
    background: var(--df-grey-100);
    color: var(--df-text);
  }
#angelOffPlatform .sort-control {
    margin-left: auto;
    font-size: 12px;
    color: var(--df-text-muted);
  }
#angelOffPlatform .deal-card {
    background: var(--df-surface);
    border: 0.5px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    padding: 18px 22px;
    margin-bottom: 12px;
    transition: border-color 0.15s;
  }
#angelOffPlatform .deal-card:hover { border-color: var(--df-border); }
#angelOffPlatform .deal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }
#angelOffPlatform .deal-meta { flex: 1; min-width: 0; }
#angelOffPlatform .deal-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
#angelOffPlatform .deal-title {
    font-size: 16px;
    font-weight: 500;
  }
#angelOffPlatform .pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--df-radius-sm);
    font-weight: 500;
    white-space: nowrap;
  }
#angelOffPlatform .pill-amber { background: var(--df-warning-soft);  color: var(--df-warning); }
#angelOffPlatform .pill-red { background: var(--df-danger-soft);    color: var(--df-danger); }
#angelOffPlatform .pill-teal { background: var(--df-success-soft);   color: var(--df-success); }
#angelOffPlatform .pill-purple { background: var(--df-accent-soft); color: var(--df-accent); }
#angelOffPlatform .pill-gray { background: var(--df-grey-100);     color: var(--df-text-muted); }
#angelOffPlatform .deal-summary {
    font-size: 13px;
    color: var(--df-text-muted);
  }
#angelOffPlatform .deal-score {
    text-align: right;
    flex-shrink: 0;
  }
#angelOffPlatform .deal-score-label {
    font-size: 11px;
    color: var(--df-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    font-weight: 500;
  }
#angelOffPlatform .deal-score-value {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
  }
#angelOffPlatform .deal-signals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
#angelOffPlatform .signal-card {
    background: var(--df-grey-100);
    border-radius: var(--df-radius);
    padding: 10px 12px;
  }
#angelOffPlatform .signal-label {
    font-size: 11px;
    color: var(--df-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    font-weight: 500;
  }
#angelOffPlatform .signal-value {
    font-size: 13px;
    font-weight: 500;
  }
#angelOffPlatform .signal-warn { color: var(--df-warning); }
#angelOffPlatform .signal-danger { color: var(--df-danger); }
#angelOffPlatform .signal-success { color: var(--df-success); }
#angelOffPlatform .signal-info { color: var(--df-accent); }
#angelOffPlatform .deal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 0.5px solid var(--df-border);
    flex-wrap: wrap;
  }
#angelOffPlatform .deal-next { font-size: 13px; }
#angelOffPlatform .deal-next-label { color: var(--df-text-muted); }
#angelOffPlatform .deal-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
#angelOffPlatform .show-more { text-align: center; margin-top: 16px; }
#angelOffPlatform .flow-stepper {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
#angelOffPlatform .step-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--df-surface);
    border: 0.5px solid var(--df-border);
    border-radius: var(--df-radius);
    font-size: 13px;
    cursor: pointer;
    color: var(--df-text-muted);
    transition: all 0.15s;
    font-family: inherit;
  }
#angelOffPlatform .step-pill:hover {
    border-color: var(--df-grey-300);
    color: var(--df-text);
  }
#angelOffPlatform .step-pill.active {
    background: var(--df-text);
    color: var(--df-surface);
    border-color: var(--df-text);
  }
#angelOffPlatform .step-pill .step-num { font-weight: 500; opacity: 0.6; }
#angelOffPlatform .step-pill.active .step-num { opacity: 1; }
#angelOffPlatform .flow-stage {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 760px;
    gap: 20px;
  }
#angelOffPlatform .flow-panel {
    background: var(--df-surface);
    border: 0.5px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    padding: 22px 24px;
  }
#angelOffPlatform .flow-panel-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--df-text-muted);
    margin-bottom: 6px;
    font-weight: 500;
  }
#angelOffPlatform .flow-panel-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }
#angelOffPlatform .flow-panel-intel { display: none; }
#angelOffPlatform .flow-panel-intel .flow-panel-label { color: var(--df-accent); opacity: 0.7; }
#angelOffPlatform .flow-panel-intel .flow-panel-title { color: var(--df-accent); }
#angelOffPlatform .intel-list { list-style: none; padding: 0; }
#angelOffPlatform .intel-list li {
    font-size: 13px;
    color: var(--df-accent);
    padding: 8px 0;
    border-top: 0.5px solid var(--df-border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
#angelOffPlatform .intel-list li:first-child { border-top: none; }
#angelOffPlatform .intel-list li::before {
    content: "→";
    flex-shrink: 0;
    opacity: 0.6;
    margin-top: 1px;
  }
#angelOffPlatform .mock-upload {
    border: 1.5px dashed var(--df-border);
    border-radius: var(--df-radius);
    padding: 32px 16px;
    text-align: center;
    color: var(--df-text-muted);
    font-size: 13px;
    background: var(--df-grey-50);
  }
#angelOffPlatform .mock-upload-icon {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
  }
#angelOffPlatform .mock-upload-filename { font-size: 11px; }
#angelOffPlatform .mock-upload-help { font-size: 13px; color: var(--df-text-muted); margin-top: 16px; line-height: 1.5; }
#angelOffPlatform .conviction-block { margin-bottom: 16px; }
#angelOffPlatform .conviction-heading { font-size: 12px; color: var(--df-text-muted); font-weight: 500; margin-bottom: 8px; }
#angelOffPlatform .conviction-hint { font-size: 12px; color: var(--df-text-muted); margin-left: 8px; }
#angelOffPlatform .offplat-empty { text-align: center; color: var(--df-grey-400); padding: 48px 0; }
#angelOffPlatform .offplat-empty--compact { padding: 32px 0; }
#angelOffPlatform .offplat-hint { font-size: 13px; color: var(--df-text-muted); margin-bottom: 12px; }
#angelOffPlatform .offplat-muted { color: var(--df-grey-400); }
#angelOffPlatform .offplat-ch-area { margin-top: 16px; }
#angelOffPlatform .offplat-ch-retry { margin-top: 10px; }
#angelOffPlatform .offplat-ch-manual { margin-top: 10px; }
#angelOffPlatform .offplat-ch-hint { margin-top: 6px; }
#angelOffPlatform .offplat-finish-btn { margin-top: 16px; }
#angelOffPlatform .flow-nav { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
#offPlatformHost { height: 100%; }
#angelOffPlatform .mock-form { display: flex; flex-direction: column; gap: 12px; }
#angelOffPlatform .mock-field { display: flex; flex-direction: column; gap: 4px; }
#angelOffPlatform .mock-field-label {
    font-size: 12px;
    color: var(--df-text-muted);
    font-weight: 500;
  }
#angelOffPlatform .mock-field-value {
    font-size: 13px;
    padding: 8px 10px;
    background: var(--df-grey-50);
    border: 0.5px solid var(--df-border);
    border-radius: var(--df-radius-sm);
  }
#angelOffPlatform .mock-field-value-extracted::after {
    content: " · auto-detected";
    color: var(--df-accent);
    font-size: 11px;
  }
#angelOffPlatform .check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-top: 0.5px solid var(--df-border);
    font-size: 13px;
  }
#angelOffPlatform .check-row:first-child { border-top: none; padding-top: 0; }
#angelOffPlatform .check-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
  }
#angelOffPlatform .check-pass { background: var(--df-success-soft);  color: var(--df-success); }
#angelOffPlatform .check-flag { background: var(--df-warning-soft); color: var(--df-warning); }
#angelOffPlatform .check-source {
    font-size: 11px;
    color: var(--df-text-muted);
    margin-top: 2px;
  }
#angelOffPlatform .memo-section { margin-bottom: 16px; }
#angelOffPlatform .memo-section-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--df-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
#angelOffPlatform .memo-section-body {
    font-size: 13px;
    line-height: 1.6;
  }
#angelOffPlatform .conviction-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }
#angelOffPlatform .conviction-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--df-border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--df-text-muted);
    transition: all 0.15s;
    font-family: inherit;
  }
#angelOffPlatform .conviction-dot.filled {
    background: var(--df-accent);
    border-color: var(--df-accent);
    color: var(--df-surface);
  }
#angelOffPlatform .invite-options { display: flex; flex-direction: column; gap: 10px; }
#angelOffPlatform .invite-option {
    border: 0.5px solid var(--df-border);
    border-radius: var(--df-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s;
  }
#angelOffPlatform .invite-option:hover {
    border-color: var(--df-grey-300);
    background: var(--df-grey-50);
  }
#angelOffPlatform .invite-option.recommended {
    border-color: var(--df-accent);
    border-width: 1.5px;
  }
#angelOffPlatform .invite-option-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
#angelOffPlatform .invite-option-desc {
    font-size: 12px;
    color: var(--df-text-muted);
    line-height: 1.5;
  }
#angelOffPlatform .recommended-badge {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--df-accent-soft);
    color: var(--df-accent);
    border-radius: var(--df-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
  }
#angelOffPlatform .notes {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px 64px;
  }
#angelOffPlatform .notes-section {
    background: var(--df-surface);
    border: 0.5px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    padding: 32px;
    margin-bottom: 16px;
  }
#angelOffPlatform .notes-section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--df-grey-400);
    margin-bottom: 8px;
    font-weight: 500;
  }
#angelOffPlatform .notes-section-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }
#angelOffPlatform .notes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
  }
#angelOffPlatform .note-item h4 {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
  }
#angelOffPlatform .note-item p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--df-text-muted);
  }
#angelOffPlatform .notes-prose p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--df-text-muted);
    max-width: 720px;
    margin-bottom: 14px;
  }
#angelOffPlatform .notes-prose p:last-child { margin-bottom: 0; }
#angelOffPlatform .notes-prose strong {
    color: var(--df-text);
    font-weight: 500;
  }
#angelOffPlatform .doc-footer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 32px 40px;
    border-top: 0.5px solid var(--df-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--df-grey-400);
    gap: 16px;
    flex-wrap: wrap;
  }
#angelOffPlatform .doc-footer-tagline {
    font-family: inherit;
    font-style: italic;
  }
#angelOffPlatform .hidden { display: none !important; }
@media (max-width: 960px) {
#angelOffPlatform .app-frame { grid-template-columns: 1fr; }
#angelOffPlatform .sidebar { display: none; }
#angelOffPlatform .metric-grid { grid-template-columns: repeat(2, 1fr); }
#angelOffPlatform .deal-signals { grid-template-columns: 1fr; }
#angelOffPlatform .deal-header { flex-direction: column; }
#angelOffPlatform .deal-score { text-align: left; }
#angelOffPlatform .notes-grid { grid-template-columns: 1fr; }
#angelOffPlatform .intro-title { font-size: 24px; }

}
@media (max-width: 600px) {
#angelOffPlatform .cover-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
#angelOffPlatform .cover-meta { text-align: left; }
#angelOffPlatform .intro, #angelOffPlatform .app, #angelOffPlatform .notes { padding-left: 20px; padding-right: 20px; }
#angelOffPlatform .content { padding: 20px; }
#angelOffPlatform .notes-section { padding: 24px; }

}

#angelOffPlatform { height: 100%; overflow: auto; }

/* Allocation pools (network_allocations.js): block map, number grid, bar, facts. */
.netAlloc-detailHost, .netAlloc-detail { height: 100%; }
.netAlloc-panelHost { min-height: 600px; height: 100%; }
.netAlloc-panel { height: 100%; min-height: 600px; }
.netAlloc-facts { padding: var(--df-space-2) var(--df-space-3); }
.netAlloc-title { font-size: var(--df-font-size-md); font-weight: 600; color: var(--df-text); }
.netAlloc-line { margin-top: var(--df-space-1); font-size: var(--df-font-size); color: var(--df-text-muted); display: flex; align-items: center; flex-wrap: wrap; gap: var(--df-space-1); }
.netAlloc-empty { padding: var(--df-space-4); font-size: var(--df-font-size); color: var(--df-text-muted); }
.netAlloc-formNote { font-size: var(--df-font-size); color: var(--df-text); }
.netAlloc-mapWrap { padding: var(--df-space-2) var(--df-space-3); }
.netAlloc-map { height: 100%; overflow: auto; }
.netAlloc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-3); margin-bottom: var(--df-space-2); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netAlloc-key { display: inline-flex; align-items: center; gap: var(--df-space-1); }
.netAlloc-key .netAlloc-cell { width: 12px; height: 12px; aspect-ratio: auto; }
.netAlloc-note { margin-left: auto; }
.netAlloc-blocks, .netAlloc-numbers { display: grid; gap: 2px; }
.netAlloc-blocks .netAlloc-cell { height: 22px; }
.netAlloc-cell { display: block; aspect-ratio: 1; min-height: 6px; border-radius: 2px; box-sizing: border-box; border: 1px solid var(--df-border); background: var(--df-surface); }
.netAlloc-cell--free { background: var(--df-surface); }
.netAlloc-cell--allocated { background: var(--df-accent); border-color: var(--df-accent); }
.netAlloc-cell--reserved { background: var(--df-warning-soft); border-color: var(--df-warning); outline: 1px solid var(--df-warning); outline-offset: -2px; }
.netAlloc-cell--partial { background: var(--df-accent-soft); border: 1px dashed var(--df-accent); }
.netAlloc-cell.is-next { outline: 2px solid var(--df-success); outline-offset: 1px; position: relative; z-index: 1; }
.netAlloc-hover { margin-top: var(--df-space-2); min-height: 18px; font-size: var(--df-font-size-sm); color: var(--df-text); }
.netAlloc-bar { display: inline-flex; align-items: center; gap: var(--df-space-2); vertical-align: middle; }
.netAlloc-bar.is-none { color: var(--df-text-muted); }
.netAlloc-barTrack { display: inline-block; width: 80px; height: 10px; border-radius: 5px; border: 1px solid var(--df-border); background: var(--df-surface); overflow: hidden; }
.netAlloc-barTrack.is-over { border-color: var(--df-warning); }
.netAlloc-barFill { display: block; height: 100%; background: var(--df-accent); }
.netAlloc-barTrack.is-over .netAlloc-barFill { background: var(--df-warning); }
.netAlloc-barText { font-size: var(--df-font-size-sm); color: var(--df-text); }

/* Migration plan panel on NWMIGRATION (netMig_panel, PRODREQ-0000358) */
.netMig { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: auto; }
.netMig-pane { display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-3); box-sizing: border-box; min-height: 100%; }
.netMig-empty, .netMig-note { margin: 0; padding: var(--df-space-2) var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size); }
.netMig-head { margin: 0; color: var(--df-text); font-size: var(--df-font-size); font-weight: 600; }
.netMig-tiles { display: flex; flex-wrap: wrap; gap: var(--df-space-3); }
.netMig-tile { display: flex; flex-direction: column; gap: 2px; min-width: 140px; padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.netMig-tile-n { font-size: var(--df-font-size-xl); font-weight: 700; color: var(--df-text); }
.netMig-tile-l { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netMig-grid { height: 320px; }
.netMig-stranded { height: 160px; }
.netMig-tl { height: 280px; display: flex; flex-direction: column; }
.netMig-chart { height: 260px; }
.netMig-legend { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.netMig-wavelist { display: flex; flex-direction: column; gap: var(--df-space-2); }
.netMig-wave { display: flex; align-items: center; gap: var(--df-space-3); padding: var(--df-space-2) var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.netMig-wave-main { display: flex; flex-direction: column; min-width: 240px; }
.netMig-wave-name { font-weight: 600; color: var(--df-text); }
.netMig-wave-meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netMig-wave-state { display: flex; flex: 1; flex-wrap: wrap; gap: var(--df-space-2); }
.netMig-wave-btns { display: flex; gap: var(--df-space-2); }
.netMig-badge { padding: 2px var(--df-space-3); border: 1px solid var(--df-success); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-sm); color: var(--df-text); }
.netMig-badge-off { border-color: var(--df-border); color: var(--df-text-muted); }

/* ── scripts/domain_angel_new_dashboard.js (prefix #angelNewDash) ──────────── */
#angelNewDash {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--df-text);
  background: var(--df-surface-sunken);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#angelNewDash, #angelNewDash *, #angelNewDash *::before, #angelNewDash *::after { box-sizing: border-box; }
#angelNewDash button { font-family: inherit; cursor: pointer; }
#angelNewDash table { border-collapse: collapse; }
#angelNewDash a { color: inherit; text-decoration: none; }
/* PAGE HEADER */
#angelNewDash .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--df-space-4);
  margin-bottom: var(--df-space-4);
}
#angelNewDash .page-header__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
#angelNewDash .page-header__meta {
  font-size: 12px;
  color: var(--df-text-muted);
}
/* BUTTONS */
#angelNewDash .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--df-radius);
  border: 1px solid var(--df-border);
  background: var(--df-surface);
  color: var(--df-text);
  cursor: pointer;
  white-space: nowrap;
}
#angelNewDash .btn:hover {
  background: var(--df-grey-100);
  border-color: var(--df-grey-300);
}
#angelNewDash .btn--primary {
  background: var(--df-accent);
  color: var(--df-surface);
  border-color: var(--df-accent);
}
#angelNewDash .btn--primary:hover {
  background: var(--df-accent);
  border-color: var(--df-accent);
  opacity: 0.9;
}
#angelNewDash .btn--small {
  font-size: 12px;
  padding: 5px 10px;
}
/* PANELS */
#angelNewDash .panel__link {
  font-size: 12px;
  color: var(--df-accent);
  cursor: pointer;
  white-space: nowrap;
}
#angelNewDash .panel__link:hover { text-decoration: underline; }
#angelNewDash .panel__link::after { content: ' →'; }
/* FOUNDER LEADS TABLE */
#angelNewDash .leads-table {
  width: 100%;
  font-size: 13px;
}
#angelNewDash .leads-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--df-grey-400);
  font-weight: 500;
  padding: 8px var(--df-space-3);
  border-bottom: 1px solid var(--df-border);
  background: var(--df-grey-50);
}
#angelNewDash .leads-table tbody td {
  padding: 14px var(--df-space-3);
  border-bottom: 1px solid var(--df-border);
  vertical-align: middle;
}
#angelNewDash .leads-table tbody tr:last-child td { border-bottom: 0; }
#angelNewDash .leads-table tbody tr:hover { background: var(--df-grey-50); cursor: pointer; }
#angelNewDash .lead-company {
  display: flex;
  align-items: center;
  gap: 10px;
}
#angelNewDash .lead-logo {
  width: 32px; height: 32px;
  border-radius: var(--df-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--df-surface);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
#angelNewDash .lead-name {
  font-weight: 600;
  font-size: 13px;
}
#angelNewDash .lead-sub {
  font-size: 11px;
  color: var(--df-text-muted);
  margin-top: 1px;
}
#angelNewDash .fit-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
#angelNewDash .fit-bar__track { width: 80px; }
#angelNewDash .fit-bar__value {
  font-size: 11px;
  color: var(--df-text-muted);
  font-weight: 500;
  min-width: 28px;
}
/* SYNDICATES PANEL */
#angelNewDash .syndicate-card {
  padding: var(--df-space-3) 0;
  border-top: 1px solid var(--df-border);
}
#angelNewDash .syndicate-card:first-child { border-top: 0; padding-top: 0; }
#angelNewDash .syndicate-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
#angelNewDash .syndicate-card__name {
  font-size: 13px;
  font-weight: 600;
}
#angelNewDash .syndicate-card__meta {
  font-size: 11px;
  color: var(--df-text-muted);
  line-height: 1.5;
}
#angelNewDash .syndicate-card__bar { margin-top: var(--df-space-2); }
/* MY PORTFOLIO MINI-TABLE */
#angelNewDash .mini-portfolio {
  width: 100%;
  font-size: 12px;
}
#angelNewDash .mini-portfolio thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--df-grey-400);
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 1px solid var(--df-border);
}
#angelNewDash .mini-portfolio thead th:last-child { text-align: right; }
#angelNewDash .mini-portfolio tbody td {
  padding: 10px 0;
  border-bottom: 1px solid var(--df-border);
  vertical-align: middle;
}
#angelNewDash .mini-portfolio tbody tr:last-child td { border-bottom: 0; }
#angelNewDash .mini-portfolio td:last-child { text-align: right; }
#angelNewDash .portfolio-co {
  display: flex;
  align-items: center;
  gap: 8px;
}
#angelNewDash .portfolio-co__logo {
  width: 24px; height: 24px;
  border-radius: var(--df-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--df-surface);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
#angelNewDash .portfolio-co__name {
  font-weight: 600;
  font-size: 12px;
}
#angelNewDash .portfolio-co__sub {
  font-size: 11px;
  color: var(--df-text-muted);
}
#angelNewDash .portfolio-num {
  font-weight: 600;
  font-size: 12px;
}
#angelNewDash .portfolio-num__sub {
  font-size: 11px;
  color: var(--df-text-muted);
  font-weight: 400;
  margin-top: 1px;
}
#angelNewDash .signal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
}
#angelNewDash .signal__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
#angelNewDash .signal--positive { color: var(--df-success); }
#angelNewDash .signal--positive .signal__dot { background: var(--df-success); }
#angelNewDash .signal--cautious { color: var(--df-warning); }
#angelNewDash .signal--cautious .signal__dot { background: var(--df-warning); }
#angelNewDash .signal--concerned { color: var(--df-danger); }
#angelNewDash .signal--concerned .signal__dot { background: var(--df-danger); }
#angelNewDash .legend-row {
  display: flex;
  align-items: center;
  gap: var(--df-space-4);
  margin-top: var(--df-space-3);
  padding-top: var(--df-space-3);
  border-top: 1px solid var(--df-border);
  font-size: 11px;
  color: var(--df-text-muted);
}
#angelNewDash .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#angelNewDash .legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
/* RECENT ACTIVITY */
#angelNewDash .activity-grid {
  display: grid;
  grid-template-columns: 1fr;
}
#angelNewDash .activity-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--df-space-3);
  padding: 7px 0;
  border-top: 1px solid var(--df-border);
}
#angelNewDash .activity-row:first-child { border-top: 0; }
#angelNewDash .activity-row__text {
  font-size: 12px;
  color: var(--df-text-muted);
  line-height: 1.5;
  flex: 1;
  min-width: 0;
}
#angelNewDash .activity-row__text strong {
  color: var(--df-text);
  font-weight: 600;
}
#angelNewDash .activity-row__time {
  font-size: 11px;
  color: var(--df-grey-400);
  white-space: nowrap;
  flex-shrink: 0;
}
/* "WHAT NEEDS YOU TODAY": action queue panel */
#angelNewDash .needs-panel {
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-lg);
  overflow: hidden;
  margin-bottom: var(--df-space-4);
}
#angelNewDash .needs-panel__head {
  padding: var(--df-space-3) 20px;
  border-bottom: 1px solid var(--df-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--df-space-3);
  background: var(--df-grey-50);
}
#angelNewDash .needs-panel__title-group {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
}
#angelNewDash .needs-panel__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
#angelNewDash .needs-panel__count {
  font-size: 12px;
  color: var(--df-text-muted);
}
#angelNewDash .needs-panel__count strong {
  color: var(--df-text);
  font-weight: 600;
}
#angelNewDash .needs-panel__filters {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--df-grey-100);
  border-radius: var(--df-radius);
}
#angelNewDash .filter-tab {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--df-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 500;
}
#angelNewDash .filter-tab--active {
  background: var(--df-surface);
  color: var(--df-text);
  box-shadow: var(--df-shadow);
}
#angelNewDash .needs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#angelNewDash .needs-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--df-space-3);
  padding: var(--df-space-3) 20px;
  border-bottom: 1px solid var(--df-border);
  align-items: center;
  position: relative;
  transition: background 120ms ease;
}
#angelNewDash .needs-item:last-child { border-bottom: 0; }
#angelNewDash .needs-item:hover { background: var(--df-grey-50); }
#angelNewDash .needs-item__rail {
  align-self: stretch;
  border-radius: 2px;
  margin: -2px 0;
}
#angelNewDash .rail--critical { background: var(--df-danger); }
#angelNewDash .rail--high { background: var(--df-warning); }
#angelNewDash .rail--medium { background: var(--df-accent); }
#angelNewDash .rail--low { background: var(--df-grey-400); opacity: 0.4; }
#angelNewDash .needs-item__body { min-width: 0; }
#angelNewDash .needs-item__head {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  margin-bottom: 3px;
  flex-wrap: wrap;
}
#angelNewDash .needs-item__type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--df-grey-400);
  font-weight: 600;
}
#angelNewDash .needs-item__deadline {
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#angelNewDash .deadline--critical { color: var(--df-danger); }
#angelNewDash .deadline--high { color: var(--df-warning); }
#angelNewDash .deadline--medium { color: var(--df-accent); }
#angelNewDash .deadline--low { color: var(--df-grey-400); }
#angelNewDash .needs-item__deadline::before {
  content: '●';
  font-size: 11px;
}
#angelNewDash .needs-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--df-text);
  margin-bottom: 3px;
  line-height: 1.4;
}
#angelNewDash .needs-item__title strong { font-weight: 700; }
#angelNewDash .needs-item__meta {
  font-size: 12px;
  color: var(--df-text-muted);
  line-height: 1.5;
}
#angelNewDash .needs-item__why {
  font-size: 12px;
  color: var(--df-text-muted);
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--df-grey-100);
  padding: 3px 8px;
  border-radius: var(--df-radius-sm);
}
#angelNewDash .needs-item__why-label {
  color: var(--df-grey-400);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
#angelNewDash .needs-item__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#angelNewDash .icon-btn {
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  color: var(--df-grey-400);
  border-radius: var(--df-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
#angelNewDash .icon-btn:hover {
  background: var(--df-grey-100);
  color: var(--df-text);
}
#angelNewDash .btn--success-soft {
  background: var(--df-success-soft);
  color: var(--df-success);
  border-color: transparent;
}
#angelNewDash .btn--success-soft:hover {
  background: var(--df-success-soft);
  border-color: transparent;
}
/* Dashboard tiles and live-data additions */
#angelNewDash .page-header { padding: var(--df-space-2) 24px 0; flex-shrink: 0; }
#angelNewDash .angelDash-tiles { flex: 1; min-height: 0; padding: 0 24px 24px; }
#angelNewDash .angelDash-kpi { height: 100%; }
#angelNewDash .angelDash-kpi > div:first-child { margin: 0 !important; height: calc(100% - 24px); }
#angelNewDash .angelDash-kpi > div:first-child > div { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--df-space-2) !important; }
#angelNewDash .angelDash-kpi > div:first-child > div > div:first-child { font-size: var(--df-font-size-2xl) !important; }
#angelNewDash .angelDash-kpi-sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-align: center; }
#angelNewDash .lead-logo--saas { background: var(--df-accent); }
#angelNewDash .lead-logo--cleantech { background: var(--df-success); }
#angelNewDash .lead-logo--consumer { background: var(--df-warning); }
#angelNewDash .lead-logo--medtech { background: var(--df-danger); }
#angelNewDash .lead-logo--enterprise { background: var(--df-grey-600); }
#angelNewDash .portfolio-co__logo--0 { background: var(--df-accent); }
#angelNewDash .portfolio-co__logo--1 { background: var(--df-success); }
#angelNewDash .portfolio-co__logo--2 { background: var(--df-warning); }
#angelNewDash .portfolio-co__logo--3 { background: var(--df-danger); }
#angelNewDash .portfolio-co__logo--4 { background: var(--df-grey-600); }
#angelNewDash .portfolio-empty { text-align: center; padding: 24px 0; color: var(--df-grey-400); }
#angelNewDash .legend-dot--positive { background: var(--df-success); }
#angelNewDash .legend-dot--cautious { background: var(--df-warning); }
#angelNewDash .legend-dot--concerned { background: var(--df-danger); }
#angelNewDash .panel__link { margin-left: var(--df-space-3); }
#angelNewDash .angelDash-tile { height: 100%; }
#angelNewDash .angelDash-tile > div { overflow: auto; padding: var(--df-space-3) var(--df-space-4) !important; }
#angelNewDash .angelDash-tile > div > div:first-child { margin-bottom: var(--df-space-2) !important; }
#angelNewDash .angelDash-tile > div > div:first-child > div:first-child { font-size: var(--df-font-size-lg) !important; }
#angelNewDash .leads-table td, #angelNewDash .leads-table th { white-space: nowrap; }

/* ── scripts/domain_angel_network.js (prefix angelNet) ──────────────────── */
.angelNet { height: 100%; overflow-y: auto; padding: var(--df-space-4); background: var(--df-surface); font-size: var(--df-font-size); color: var(--df-text); }
.angelNet-kpis { height: 156px; margin-bottom: var(--df-space-4); flex-shrink: 0; }
.angelNet-kpi { height: 100%; }
.angelNet-kpi > div:first-child { margin: 0 !important; height: calc(100% - 24px); }
.angelNet-kpi > div:first-child > div { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--df-space-2) !important; }
.angelNet-kpi > div:first-child > div > div:first-child { font-size: var(--df-font-size-2xl) !important; }
.angelNet-kpi-sub { font-size: var(--df-font-size-xs); color: var(--df-grey-400); text-align: center; }
.angelNet-count { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-bottom: var(--df-space-3); }
.angelNet-head { display: flex; align-items: center; padding: var(--df-space-2) var(--df-space-3); font-size: var(--df-font-size-xs); font-weight: 600; color: var(--df-grey-400); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--df-border); }
.angelNet-row { display: flex; align-items: center; padding: var(--df-space-3); border-bottom: 1px solid var(--df-grey-100); cursor: pointer; }
.angelNet-row:hover { background: var(--df-grey-50); }
.angelNet-col-name { flex: 3; min-width: 0; }
.angelNet-col-type { flex: 1; text-align: center; }
.angelNet-col-status { flex: 1; text-align: center; }
.angelNet-col-loc { flex: 2; }
.angelNet-col-added { flex: 1; text-align: center; }
.angelNet-col-open { width: 80px; text-align: right; }
.angelNet-who { display: flex; align-items: center; gap: 10px; }
.angelNet-whotext { min-width: 0; }
.angelNet-avatar { width: 36px; height: 36px; border-radius: var(--df-radius); color: var(--df-surface); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--df-font-size); flex-shrink: 0; }
.angelNet-avatar-0 { background: var(--df-accent); }
.angelNet-avatar-1 { background: var(--df-success); }
.angelNet-avatar-2 { background: var(--df-warning); }
.angelNet-avatar-3 { background: var(--df-danger); }
.angelNet-avatar-4 { background: var(--df-grey-600); }
.angelNet-avatar-5 { background: var(--df-grey-400); }
.angelNet-name { font-size: var(--df-font-size); font-weight: 600; color: var(--df-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.angelNet-notes { font-size: var(--df-font-size-xs); color: var(--df-grey-400); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.angelNet-cell { font-size: var(--df-font-size-sm); color: var(--df-grey-700); font-weight: 500; }
.angelNet-col-loc.angelNet-cell { font-weight: 400; }
.angelNet-added { font-size: var(--df-font-size-sm); color: var(--df-grey-400); }
.angelNet-open { padding: 4px var(--df-space-3); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); font-size: var(--df-font-size-xs); font-weight: 500; color: var(--df-grey-700); background: var(--df-surface); }
.angelNet-empty { text-align: center; color: var(--df-grey-400); padding: 40px 0; }

/* ── scripts/domain_angel_syndicate.js (prefix #angelSyndicate; .synp is the same sheet for the
   syndicate panels in defined_object_complex_editor_row_type_synd*.js) ─────────────── */
/* Names the panel files still use, mapped onto the --df-* tokens. */
#angelSyndicate, .synp {
  --muted: var(--df-grey-400);
  --ink-soft: var(--df-text-muted);
  --syndicate: var(--df-accent);
  --syndicate-fill: var(--df-accent-soft);
  --gold-bright: var(--df-warning);
  --founder: var(--df-success);
  --founder-fill: var(--df-success-soft);
}
#angelSyndicate,
.synp{
  font-family: inherit; background:var(--df-surface-sunken); color:var(--df-text); font-size: 14px; line-height:1.5;
  height:100%; overflow:auto; padding:20px 24px 56px; -webkit-font-smoothing:antialiased;
}
#angelSyndicate :where(*:not(.lat-form):not(.lat-form *)),
.synp :where(*:not(.lat-form):not(.lat-form *)){box-sizing:border-box;margin:0;padding:0}
#angelSyndicate button,
.synp button{font-family: inherit;cursor:pointer}
#angelSyndicate .mono,
.synp .mono{font-variant-numeric:tabular-nums}
#angelSyndicate .pagehead,
.synp .pagehead{margin-bottom:20px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
#angelSyndicate .pagehead .ph-tx,
.synp .pagehead .ph-tx{flex:1;min-width:320px}
#angelSyndicate .pagehead h1,
.synp .pagehead h1{font-weight:600;font-size: 20px;letter-spacing:-.01em;line-height:1.2}
#angelSyndicate .pagehead h1 em,
.synp .pagehead h1 em{font-style:normal;color:var(--df-text)}
#angelSyndicate .pagehead p,
.synp .pagehead p{color:var(--df-text-muted);max-width:78ch;margin-top:6px;font-size: 14px}
#angelSyndicate .eyebrow,
.synp .eyebrow{font-size: 11px;text-transform:uppercase;letter-spacing:.1em;color:var(--df-accent);font-weight:600;margin-bottom:8px}
#angelSyndicate .flag,
.synp .flag{display:flex;gap:9px;align-items:flex-start;background:var(--df-accent-soft);border:1px solid var(--df-accent-soft);border-radius:var(--df-radius);padding:10px 13px;font-size: 12px;color:var(--df-text-muted);margin:12px 0}
#angelSyndicate .flag svg,
.synp .flag svg{width:15px;height:15px;flex-shrink:0;stroke:var(--df-accent);stroke-width:1.9;margin-top:2px}
#angelSyndicate .flag b,
.synp .flag b{color:var(--df-text);font-weight:600}
#angelSyndicate .flag .pl,
.synp .flag .pl{font-size: 11px;text-transform:uppercase;letter-spacing:.08em;color:var(--df-accent);font-weight:600;display:block;margin-bottom:2px}
#angelSyndicate .card,
.synp .card{background:var(--df-surface);border:1px solid var(--df-border);border-radius:var(--df-radius-lg)}
#angelSyndicate .grid,
.synp .grid{display:grid;gap:12px}
#angelSyndicate .kpis,
.synp .kpis{grid-template-columns:repeat(4,1fr);margin-bottom:20px}
#angelSyndicate .kpis.five,
.synp .kpis.five{grid-template-columns:repeat(5,1fr)}
#angelSyndicate .krv .ytd-suf,
.synp .krv .ytd-suf{font-size: 11px;color:var(--df-grey-400);font-weight:500}
#angelSyndicate .kpi,
.synp .kpi{padding:16px 18px;background:var(--df-surface);border:1px solid var(--df-border);border-radius:var(--df-radius-lg);min-height:128px;display:flex;flex-direction:column}
#angelSyndicate .kpi .lab,
.synp .kpi .lab{font-size: 11px;text-transform:uppercase;letter-spacing:.06em;color:var(--df-grey-400);margin-bottom:12px;font-weight:500}
#angelSyndicate .kpi-rows,
.synp .kpi-rows{margin-top:auto;display:flex;flex-direction:column;gap:8px}
#angelSyndicate .kr,
.synp .kr{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#angelSyndicate .kr+.kr,
.synp .kr+.kr{padding-top:8px;border-top:1px solid var(--df-border)}
#angelSyndicate .krl,
.synp .krl{font-size: 11px;text-transform:uppercase;letter-spacing:.06em;color:var(--df-grey-400);font-weight:500}
#angelSyndicate .krv,
.synp .krv{font-size: 20px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
#angelSyndicate .krv small,
.synp .krv small{font-size: 11px;color:var(--df-grey-400);font-weight:500}
#angelSyndicate .krv.up,
.synp .krv.up{color:var(--df-success)}
#angelSyndicate .krv.dn,
.synp .krv.dn{color:var(--df-danger)}
#angelSyndicate .krv.ytd,
.synp .krv.ytd{font-size: 16px}
#angelSyndicate .twocol,
.synp .twocol{grid-template-columns:1fr 1fr;align-items:start}
#angelSyndicate .sec-h,
.synp .sec-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--df-border)}
#angelSyndicate .sec-h h3,
.synp .sec-h h3{font-size: 14px;font-weight:600}
#angelSyndicate .sec-h .ct,
.synp .sec-h .ct{margin-left:auto;font-size: 11px;color:var(--df-grey-400)}
#angelSyndicate .sec-b,
.synp .sec-b{padding:6px 18px 16px}
#angelSyndicate .alert,
.synp .alert{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--df-border);align-items:flex-start}
#angelSyndicate .alert:last-child,
.synp .alert:last-child{border-bottom:none}
#angelSyndicate .alert .ic,
.synp .alert .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-weight:600;font-size: 11px}
#angelSyndicate .ic.g,
.synp .ic.g{background:var(--df-accent-soft);color:var(--df-accent)}
#angelSyndicate .ic.a,
.synp .ic.a{background:var(--df-warning-soft);color:var(--df-warning)}
#angelSyndicate .ic.r,
.synp .ic.r{background:var(--df-success-soft);color:var(--df-success)}
#angelSyndicate .ic.f,
.synp .ic.f{background:var(--df-success-soft);color:var(--df-success)}
#angelSyndicate .alert .tx,
.synp .alert .tx{flex:1;font-size: 13px;line-height:1.45}
#angelSyndicate .alert .tx b,
.synp .alert .tx b{font-weight:600}
#angelSyndicate .alert .tx span,
.synp .alert .tx span{color:var(--df-grey-400);font-size: 12px;display:block;margin-top:2px}
#angelSyndicate .alert .go,
.synp .alert .go{font-size: 12px;color:var(--df-text);font-weight:500;border:1px solid var(--df-border);background:var(--df-surface);border-radius:var(--df-radius);padding:6px 12px;align-self:center;white-space:nowrap}
#angelSyndicate .alert .go:hover,
.synp .alert .go:hover{background:var(--df-grey-100)}
#angelSyndicate .fb-action,
.synp .fb-action{font-size: 12px;color:var(--df-accent);font-weight:500;background:var(--df-accent-soft);border:none;border-radius:var(--df-radius);padding:6px 11px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#angelSyndicate .fb-action svg,
.synp .fb-action svg{width:12px;height:12px;stroke-width:2.2}
#angelSyndicate .board-lab,
.synp .board-lab{font-size: 11px;text-transform:uppercase;letter-spacing:.1em;color:var(--df-grey-400);font-weight:600;margin:0 0 11px}
#angelSyndicate .board,
.synp .board{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;margin-bottom:24px}
#angelSyndicate .board.row2,
.synp .board.row2{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
#angelSyndicate .col,
.synp .col{flex:0 0 236px;display:flex;flex-direction:column}
#angelSyndicate .board.row2 .col,
.synp .board.row2 .col{flex:none}
#angelSyndicate .col-h,
.synp .col-h{display:flex;align-items:center;gap:8px;padding:0 2px 11px}
#angelSyndicate .col-h .dot,
.synp .col-h .dot{width:8px;height:8px;border-radius:50%}
#angelSyndicate .col-h .t,
.synp .col-h .t{font-size: 11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--df-text-muted)}
#angelSyndicate .col-h .c,
.synp .col-h .c{margin-left:auto;font-size: 11px;color:var(--df-grey-400);background:var(--df-grey-100);border-radius:100px;padding:1px 8px;font-weight:600}
#angelSyndicate .col-body,
.synp .col-body{display:flex;flex-direction:column;gap:9px;background:var(--df-grey-100);border-radius:var(--df-radius);padding:9px;min-height:60px;flex:1}
#angelSyndicate .col.drag-over .col-body,
.synp .col.drag-over .col-body{outline:2px dashed var(--df-accent);outline-offset:-2px;background:var(--df-accent-soft)}
#angelSyndicate .deal-card[draggable="true"]:active,
.synp .deal-card[draggable="true"]:active{cursor:grabbing}
#angelSyndicate .gate .col-body,
.synp .gate .col-body{border:1px dashed var(--df-warning);background:var(--df-warning-soft)}
#angelSyndicate .gate .col-h .t,
.synp .gate .col-h .t{color:var(--df-warning)}
#angelSyndicate .deal-card,
.synp .deal-card{background:var(--df-surface);border:1px solid var(--df-border);border-radius:var(--df-radius);padding:12px;text-align:left;width:100%;transition:.13s;border-left:3px solid var(--df-accent)}
#angelSyndicate .deal-card:hover,
.synp .deal-card:hover{border-color:var(--df-accent);transform:translateY(-1px);box-shadow: var(--df-shadow)}
#angelSyndicate .deal-card .nm,
.synp .deal-card .nm{font-weight:600;font-size: 14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#angelSyndicate .deal-card .sec,
.synp .deal-card .sec{font-size: 11px;color:var(--df-grey-400);margin:3px 0 9px}
#angelSyndicate .deal-card .meta,
.synp .deal-card .meta{display:flex;gap:6px;flex-wrap:wrap;font-size: 11px}
#angelSyndicate .deal-card .tag,
.synp .deal-card .tag{background:var(--df-grey-100);border-radius:var(--df-radius-sm);padding:2px 6px;color:var(--df-text-muted);font-weight:500}
#angelSyndicate .deal-card .foot,
.synp .deal-card .foot{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--df-border);font-size: 11px;color:var(--df-grey-400)}
#angelSyndicate .deal-card .spv,
.synp .deal-card .spv{width:18px;height:18px;border-radius:50%;background:var(--df-accent-soft);color:var(--df-accent);display:grid;place-items:center;font-size: 11px;font-weight:600}
#angelSyndicate .release-mini,
.synp .release-mini{margin-top:9px;width:100%;padding:7px;border:1px solid var(--df-warning);background:var(--df-warning-soft);color:var(--df-warning);border-radius:var(--df-radius);font-size: 11px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
#angelSyndicate .release-mini svg,
.synp .release-mini svg{width:13px;height:13px;stroke-width:2}
#angelSyndicate .pill-live,
.synp .pill-live{font-size: 11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--df-success);background:var(--df-success-soft);padding:2px 6px;border-radius:var(--df-radius-sm)}
#angelSyndicate .back,
.synp .back{display:inline-flex;align-items:center;gap:6px;font-size: 12px;color:var(--df-grey-400);border:none;background:none;margin-bottom:14px;font-weight:500}
#angelSyndicate .back svg,
.synp .back svg{width:15px;height:15px;stroke-width:2}
#angelSyndicate .deal-top,
.synp .deal-top{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--df-border);padding-bottom:20px;margin-bottom:20px}
#angelSyndicate .deal-top .id,
.synp .deal-top .id{font-size: 20px;font-weight:600;letter-spacing:-.01em}
#angelSyndicate .deal-top .meta2,
.synp .deal-top .meta2{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap;font-size: 13px;color:var(--df-text-muted)}
#angelSyndicate .deal-top .meta2 b,
.synp .deal-top .meta2 b{color:var(--df-grey-400);font-weight:500;display:block;font-size: 11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
#angelSyndicate .deal-top .actions,
.synp .deal-top .actions{margin-left:auto;display:flex;gap:9px;align-items:center}
#angelSyndicate .btn,
.synp .btn{padding:8px 14px;border-radius:var(--df-radius);font-size: 13px;font-weight:500;border:1px solid var(--df-border);background:var(--df-surface);color:var(--df-text);white-space:nowrap}
#angelSyndicate .btn:hover,
.synp .btn:hover{background:var(--df-grey-100)}
#angelSyndicate .btn.primary,
.synp .btn.primary{background:var(--df-accent);color:var(--df-surface);border-color:var(--df-accent)}
#angelSyndicate .btn.gold,
.synp .btn.gold{background:var(--df-accent);color:var(--df-surface);border-color:var(--df-accent)}
#angelSyndicate .btn svg,
.synp .btn svg{width:14px;height:14px;stroke-width:2;vertical-align:-2px;margin-right:5px}
#angelSyndicate .detail-grid,
.synp .detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
#angelSyndicate .panel,
.synp .panel{background:var(--df-surface);border:1px solid var(--df-border);border-radius:var(--df-radius-lg);margin-bottom:18px}
#angelSyndicate .panel-h,
.synp .panel-h{display:flex;align-items:center;gap:9px;padding:14px 17px;border-bottom:1px solid var(--df-border)}
#angelSyndicate .panel-h h3,
.synp .panel-h h3{font-size: 14px;font-weight:600}
#angelSyndicate .panel-h .src,
.synp .panel-h .src{margin-left:auto;font-size: 11px;color:var(--df-grey-400)}
#angelSyndicate .panel-b,
.synp .panel-b{padding:15px 17px}
#angelSyndicate .dim,
.synp .dim{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--df-border);font-size: 13px}
#angelSyndicate .dim:last-child,
.synp .dim:last-child{border-bottom:none}
#angelSyndicate .dim .dn,
.synp .dim .dn{font-weight:500}
#angelSyndicate .cov,
.synp .cov{font-size: 11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:var(--df-radius-sm)}
#angelSyndicate .cov-Evidenced,
.synp .cov-Evidenced{background:var(--df-success-soft);color:var(--df-success)}
#angelSyndicate .cov-Asserted,
.synp .cov-Asserted{background:var(--df-warning-soft);color:var(--df-warning)}
#angelSyndicate .cov-Missing,
.synp .cov-Missing{background:var(--df-danger-soft);color:var(--df-danger)}
#angelSyndicate .stand,
.synp .stand{font-variant-numeric:tabular-nums;font-size: 12px;color:var(--df-text-muted);min-width:78px;text-align:right}
#angelSyndicate .stand.flr,
.synp .stand.flr{color:var(--df-grey-400);font-style:italic}
#angelSyndicate .int-sum,
.synp .int-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--df-border);border:1px solid var(--df-border);border-radius:var(--df-radius);overflow:hidden;margin-bottom:14px}
#angelSyndicate .int-sum div,
.synp .int-sum div{background:var(--df-surface);padding:11px 12px;text-align:center}
#angelSyndicate .int-sum .v,
.synp .int-sum .v{font-variant-numeric:tabular-nums;font-size: 20px;font-weight:600;color:var(--df-accent)}
#angelSyndicate .int-sum .l,
.synp .int-sum .l{font-size: 11px;text-transform:uppercase;letter-spacing:.06em;color:var(--df-grey-400);margin-top:3px}
#angelSyndicate .fill,
.synp .fill{height:8px;border-radius:4px;background:var(--df-grey-100);overflow:hidden;margin:4px 0 3px}
#angelSyndicate .fill i,
.synp .fill i{display:block;height:100%;background:var(--df-accent)}
#angelSyndicate .ang-row,
.synp .ang-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--df-border)}
#angelSyndicate .ang-row:last-child,
.synp .ang-row:last-child{border-bottom:none}
#angelSyndicate .ang-row .av,
.synp .ang-row .av{width:28px;height:28px;border-radius:7px;background:var(--df-accent-soft);color:var(--df-accent);display:grid;place-items:center;font-weight:600;font-size: 11px;flex-shrink:0}
#angelSyndicate .ang-row .nm,
.synp .ang-row .nm{font-weight:500;font-size: 13px}
#angelSyndicate .ang-row .nm small,
.synp .ang-row .nm small{display:block;color:var(--df-grey-400);font-weight:400;font-size: 11px}
#angelSyndicate .ang-row .amt,
.synp .ang-row .amt{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;font-size: 13px}
#angelSyndicate .st,
.synp .st{font-size: 11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:var(--df-radius-sm)}
#angelSyndicate .st-committed,
.synp .st-committed{background:var(--df-success-soft);color:var(--df-success)}
#angelSyndicate .st-interest,
.synp .st-interest{background:var(--df-warning-soft);color:var(--df-warning)}
#angelSyndicate .st-viewed,
.synp .st-viewed{background:var(--df-grey-100);color:var(--df-grey-400)}
#angelSyndicate .proxy,
.synp .proxy{font-size: 11px;color:var(--df-warning);background:var(--df-warning-soft);border-radius:var(--df-radius-sm);padding:1px 6px;font-weight:600;margin-left:6px}
#angelSyndicate .conv,
.synp .conv{position:relative;padding-left:22px}
#angelSyndicate .conv::before,
.synp .conv::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:1.5px;background:var(--df-border)}
#angelSyndicate .conv-i,
.synp .conv-i{position:relative;padding:0 0 16px}
#angelSyndicate .conv-i:last-child,
.synp .conv-i:last-child{padding-bottom:0}
#angelSyndicate .conv-i::before,
.synp .conv-i::before{content:'';position:absolute;left:-18px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--df-accent);border:2px solid var(--df-surface)}
#angelSyndicate .conv-i.upcoming::before,
.synp .conv-i.upcoming::before{background:var(--df-surface);border-color:var(--df-warning)}
#angelSyndicate .conv-i .when,
.synp .conv-i .when{font-size: 11px;color:var(--df-grey-400);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
#angelSyndicate .conv-i .ttl,
.synp .conv-i .ttl{font-weight:600;font-size: 13px;margin:2px 0 3px}
#angelSyndicate .conv-i .note,
.synp .conv-i .note{font-size: 12px;color:var(--df-text-muted);line-height:1.5}
#angelSyndicate .conv-i .by,
.synp .conv-i .by{font-size: 11px;color:var(--df-grey-400);margin-top:4px}
#angelSyndicate .form-row,
.synp .form-row{margin-bottom:11px}
#angelSyndicate .form-row label,
.synp .form-row label{display:block;font-size: 11px;text-transform:uppercase;letter-spacing:.06em;color:var(--df-grey-400);font-weight:500;margin-bottom:5px}
#angelSyndicate .form-row select,
.synp .form-row select,
#angelSyndicate .form-row input,
.synp .form-row input,
#angelSyndicate .form-row textarea,
.synp .form-row textarea{width:100%;font-family: inherit;font-size: 13px;padding:8px 11px;border:1px solid var(--df-border);border-radius:var(--df-radius);background:var(--df-surface);color:var(--df-text)}
#angelSyndicate .form-row textarea,
.synp .form-row textarea{resize:vertical;min-height:52px}
#angelSyndicate .req-note,
.synp .req-note{font-size: 11px;color:var(--df-warning);margin-top:4px}
#angelSyndicate .tbl-wrap,
.synp .tbl-wrap{overflow-x:auto}
#angelSyndicate table,
.synp table{width:100%;border-collapse:collapse;font-size: 13px;min-width:760px}
#angelSyndicate thead th,
.synp thead th{text-align:left;font-size: 11px;text-transform:uppercase;letter-spacing:.06em;color:var(--df-grey-400);font-weight:500;padding:10px 13px;border-bottom:1px solid var(--df-border);background:var(--df-grey-50);white-space:nowrap}
#angelSyndicate thead th.r,
.synp thead th.r{text-align:right}
#angelSyndicate tbody td.r,
.synp tbody td.r{text-align:right;font-variant-numeric:tabular-nums}
#angelSyndicate tbody td,
.synp tbody td{padding:11px 13px;border-bottom:1px solid var(--df-border);white-space:nowrap}
#angelSyndicate tbody td.wrap,
.synp tbody td.wrap{white-space:normal;min-width:240px}
#angelSyndicate tbody tr:hover,
.synp tbody tr:hover{background:var(--df-grey-50)}
#angelSyndicate tbody tr.expandable,
.synp tbody tr.expandable{cursor:pointer}
#angelSyndicate .tname,
.synp .tname{font-weight:600;display:flex;align-items:center;gap:8px}
#angelSyndicate .tname .cav,
.synp .tname .cav{width:24px;height:24px;border-radius:var(--df-radius-sm);background:var(--df-success-soft);color:var(--df-success);display:grid;place-items:center;font-size: 11px;font-weight:600;flex-shrink:0}
#angelSyndicate .moic,
.synp .moic{font-weight:600}
#angelSyndicate .moic.up,
.synp .moic.up{color:var(--df-success)}
#angelSyndicate .moic.dn,
.synp .moic.dn{color:var(--df-danger)}
#angelSyndicate .sub-row td,
.synp .sub-row td{background:var(--df-grey-50);padding:0}
#angelSyndicate .sub-inner,
.synp .sub-inner{padding:8px 14px 14px 52px}
#angelSyndicate .sub-ang,
.synp .sub-ang{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--df-border);font-size: 12px}
#angelSyndicate .sub-ang:last-child,
.synp .sub-ang:last-child{border-bottom:none}
#angelSyndicate .sub-ang .sa,
.synp .sub-ang .sa{width:22px;height:22px;border-radius:5px;background:var(--df-accent-soft);color:var(--df-accent);display:grid;place-items:center;font-size: 11px;font-weight:600}
#angelSyndicate .sub-ang .samt,
.synp .sub-ang .samt{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
#angelSyndicate .heat,
.synp .heat{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
#angelSyndicate .heat.engaged,
.synp .heat.engaged{background:var(--df-success)}
#angelSyndicate .heat.cooling,
.synp .heat.cooling{background:var(--df-warning)}
#angelSyndicate .heat.dormant,
.synp .heat.dormant{background:var(--df-grey-400)}
#angelSyndicate .powder,
.synp .powder{font-variant-numeric:tabular-nums}
#angelSyndicate .badge-sm,
.synp .badge-sm{font-size: 11px;background:var(--df-grey-100);border:1px solid var(--df-border);border-radius:var(--df-radius-sm);padding:1px 6px;color:var(--df-text-muted);margin-right:3px;display:inline-block}
#angelSyndicate .hnwi,
.synp .hnwi{font-size: 11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:2px 7px;border-radius:var(--df-radius-sm);display:inline-flex;align-items:center;gap:4px}
#angelSyndicate .hnwi svg,
.synp .hnwi svg{width:10px;height:10px;stroke-width:2.5}
#angelSyndicate .hnwi.signed,
.synp .hnwi.signed{background:var(--df-success-soft);color:var(--df-success)}
#angelSyndicate .hnwi.pending,
.synp .hnwi.pending{background:var(--df-warning-soft);color:var(--df-warning)}
#angelSyndicate .comms-grid,
.synp .comms-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;align-items:start}
#angelSyndicate .aud,
.synp .aud{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--df-border);font-size: 13px}
#angelSyndicate .aud:last-child,
.synp .aud:last-child{border-bottom:none}
#angelSyndicate .aud input,
.synp .aud input{width:15px;height:15px;accent-color:var(--df-accent)}
#angelSyndicate .aud .ac,
.synp .aud .ac{margin-left:auto;font-size: 11px;color:var(--df-grey-400)}
#angelSyndicate .compose textarea,
.synp .compose textarea{width:100%;min-height:110px;border:1px solid var(--df-border);border-radius:var(--df-radius);padding:12px;font-family: inherit;font-size: 14px;resize:vertical;background:var(--df-surface);color:var(--df-text)}
#angelSyndicate .thread,
.synp .thread{padding:11px 0;border-bottom:1px solid var(--df-border)}
#angelSyndicate .thread:last-child,
.synp .thread:last-child{border-bottom:none}
#angelSyndicate .thread .h,
.synp .thread .h{display:flex;align-items:center;gap:8px;font-size: 13px;font-weight:600}
#angelSyndicate .thread .h .tm,
.synp .thread .h .tm{margin-left:auto;color:var(--df-grey-400);font-weight:400;font-size: 11px}
#angelSyndicate .thread .pv,
.synp .thread .pv{font-size: 12px;color:var(--df-text-muted);margin-top:4px}
#angelSyndicate .anti,
.synp .anti{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--df-border);font-size: 13px}
#angelSyndicate .anti:last-child,
.synp .anti:last-child{border-bottom:none}
#angelSyndicate .anti .delta,
.synp .anti .delta{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--df-warning)}
#angelSyndicate .dr-head,
.synp .dr-head{font-size: 11px;text-transform:uppercase;letter-spacing:.08em;color:var(--df-grey-400);font-weight:600;margin-bottom:9px;display:flex;justify-content:space-between;align-items:baseline}
#angelSyndicate .dr-head span,
.synp .dr-head span{font-weight:400;text-transform:none;letter-spacing:0;font-style:italic;font-size: 11px}
#angelSyndicate .dr-folder,
.synp .dr-folder{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--df-border);font-size: 13px}
#angelSyndicate .dr-folder:last-of-type,
.synp .dr-folder:last-of-type{border-bottom:none}
#angelSyndicate .dr-folder svg,
.synp .dr-folder svg{width:15px;height:15px;stroke:var(--df-accent);stroke-width:1.8}
#angelSyndicate .dr-folder .ct2,
.synp .dr-folder .ct2{margin-left:auto;font-size: 11px;color:var(--df-grey-400)}
#angelSyndicate .rep-row,
.synp .rep-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--df-border)}
#angelSyndicate .rep-row:last-child,
.synp .rep-row:last-child{border-bottom:none}
#angelSyndicate .rep-ic,
.synp .rep-ic{width:28px;height:28px;border-radius:7px;background:var(--df-grey-100);display:grid;place-items:center;flex-shrink:0}
#angelSyndicate .rep-ic svg,
.synp .rep-ic svg{width:15px;height:15px;stroke:var(--df-text-muted);stroke-width:1.8}
#angelSyndicate .rep-tx,
.synp .rep-tx{flex:1;font-size: 13px}
#angelSyndicate .rep-tx b,
.synp .rep-tx b{font-weight:600;display:block}
#angelSyndicate .rep-tx span,
.synp .rep-tx span{font-size: 11px;color:var(--df-grey-400)}
#angelSyndicate .rep-view,
.synp .rep-view{font-size: 12px;font-weight:500;color:var(--df-accent);background:var(--df-accent-soft);border:none;border-radius:var(--df-radius);padding:6px 11px}
#angelSyndicate .rep-lock,
.synp .rep-lock{font-size: 11px;color:var(--df-grey-400);font-style:italic}
#angelSyndicate .role-pill,
.synp .role-pill{font-size: 11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:var(--df-radius-sm);background:var(--df-accent-soft);color:var(--df-accent)}
#angelSyndicate .role-pill.lead,
.synp .role-pill.lead{background:var(--df-text);color:var(--df-surface)}
#angelSyndicate .attach,
.synp .attach{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
#angelSyndicate .attach select,
.synp .attach select{flex:1;min-width:120px;font-family: inherit;font-size: 13px;padding:9px 11px;border:1px solid var(--df-border);border-radius:var(--df-radius);background:var(--df-surface);color:var(--df-text)}
#angelSyndicate .drop,
.synp .drop{border:1.5px dashed var(--df-border);border-radius:var(--df-radius);padding:26px;text-align:center;color:var(--df-grey-400);font-size: 13px;background:var(--df-grey-50);margin-bottom:14px}
#angelSyndicate .drop b,
.synp .drop b{color:var(--df-accent)}
#angelSyndicate .drop .lk,
.synp .drop .lk{color:var(--df-accent);font-weight:600;cursor:pointer;text-decoration:underline}
#angelSyndicate .map-tbl,
.synp .map-tbl{font-size: 12px;width:100%;border-collapse:collapse;min-width:0}
#angelSyndicate .map-tbl td,
.synp .map-tbl td{padding:7px 6px;border-bottom:1px solid var(--df-border)}
#angelSyndicate .map-tbl .x,
.synp .map-tbl .x{color:var(--df-accent);text-align:center;width:30px}
#angelSyndicate .map-tbl .f,
.synp .map-tbl .f{color:var(--df-grey-400)}
#angelSyndicate .profile-cover,
.synp .profile-cover{position:relative;height:148px;background:linear-gradient(115deg,var(--df-text),var(--df-accent) 70%,var(--df-success));display:flex;align-items:flex-start;justify-content:flex-end;padding:13px;border-radius:var(--df-radius-lg) var(--df-radius-lg) 0 0}
#angelSyndicate .cover-upload,
.synp .cover-upload{display:inline-flex;align-items:center;gap:6px;font-size: 12px;font-weight:500;color:var(--df-surface);background:var(--df-grey-800);border:1px solid var(--df-grey-600);border-radius:var(--df-radius);padding:7px 12px}
#angelSyndicate .cover-upload svg,
.synp .cover-upload svg{width:14px;height:14px;stroke-width:2}
#angelSyndicate .cover-hint,
.synp .cover-hint{position:absolute;right:14px;bottom:11px;font-size: 11px;color:var(--df-surface)}
#angelSyndicate .profile-av-wrap,
.synp .profile-av-wrap{position:absolute;left:20px;bottom:-28px;display:flex;align-items:flex-end;gap:8px}
#angelSyndicate .profile-av,
.synp .profile-av{width:76px;height:76px;border-radius:16px;background:var(--df-surface);border:3px solid var(--df-surface);display:grid;place-items:center;font-size: 24px;color:var(--df-accent);font-weight:600;box-shadow: var(--df-shadow)}
#angelSyndicate .av-upload,
.synp .av-upload{font-size: 11px;font-weight:500;color:var(--df-accent);background:var(--df-surface);border:1px solid var(--df-border);border-radius:var(--df-radius-sm);padding:4px 9px;margin-bottom:4px}
#angelSyndicate .brand-body,
.synp .brand-body{padding:44px 18px 16px}
#angelSyndicate .brand-grid,
.synp .brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
#angelSyndicate .favicon-row,
.synp .favicon-row{display:flex;align-items:center;gap:10px}
#angelSyndicate .favicon-prev,
.synp .favicon-prev{width:38px;height:38px;border-radius:var(--df-radius);background:var(--df-accent);color:var(--df-surface);display:grid;place-items:center;font-size: 11px;font-weight:600;flex-shrink:0}
#angelSyndicate .mini-upload,
.synp .mini-upload{font-size: 12px;font-weight:500;color:var(--df-accent);background:var(--df-accent-soft);border:none;border-radius:var(--df-radius);padding:7px 11px;display:inline-flex;align-items:center;gap:6px}
#angelSyndicate .mini-upload svg,
.synp .mini-upload svg{width:13px;height:13px;stroke-width:2}
#angelSyndicate .modal-h,
.synp .modal-h{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--df-border);border-radius:var(--df-radius-lg) var(--df-radius-lg) 0 0}
#angelSyndicate .modal-h .mav,
.synp .modal-h .mav{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-weight:600;font-size: 13px;flex-shrink:0}
#angelSyndicate .modal-h .mt,
.synp .modal-h .mt{flex:1}
#angelSyndicate .modal-h .mt h3,
.synp .modal-h .mt h3{font-weight:600;font-size: 20px;line-height:1.2}
#angelSyndicate .modal-h .mt p,
.synp .modal-h .mt p{font-size: 12px;color:var(--df-grey-400);margin-top:3px}
#angelSyndicate .modal-b,
.synp .modal-b{padding:18px 20px;max-height:64vh;overflow-y:auto}
#angelSyndicate .modal-f,
.synp .modal-f{display:flex;gap:9px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--df-border);background:var(--df-grey-50);border-radius:0 0 var(--df-radius-lg) var(--df-radius-lg)}
#angelSyndicate .mini-grid,
.synp .mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--df-border);border:1px solid var(--df-border);border-radius:var(--df-radius);overflow:hidden;margin-bottom:13px}
#angelSyndicate .mini-grid div,
.synp .mini-grid div{background:var(--df-surface);padding:10px 8px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;font-size: 14px}
#angelSyndicate .mini-grid b,
.synp .mini-grid b{display:block;font-weight:500;font-size: 11px;text-transform:uppercase;letter-spacing:.06em;color:var(--df-grey-400);margin-bottom:4px}
#angelSyndicate .m-one,
.synp .m-one{font-size: 13px;color:var(--df-text-muted);line-height:1.5;margin-bottom:13px}
#angelSyndicate .m-fit,
.synp .m-fit{display:flex;align-items:center;gap:10px;font-size: 12px;margin-bottom:4px}
#angelSyndicate .m-fit .fill,
.synp .m-fit .fill{flex:1}
#angelSyndicate .m-lab,
.synp .m-lab{font-size: 11px;text-transform:uppercase;letter-spacing:.08em;color:var(--df-grey-400);font-weight:600;margin:16px 0 9px}
#angelSyndicate .touch,
.synp .touch{display:flex;gap:8px;flex-wrap:wrap}
#angelSyndicate .touch-opt,
.synp .touch-opt{flex:1;min-width:128px;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border:1px solid var(--df-border);background:var(--df-surface);border-radius:var(--df-radius);font-size: 12px;font-weight:500;color:var(--df-text-muted)}
#angelSyndicate .touch-opt svg,
.synp .touch-opt svg{width:15px;height:15px;stroke-width:1.9}
#angelSyndicate .touch-opt.sel,
.synp .touch-opt.sel{border-color:var(--df-accent);background:var(--df-accent-soft);color:var(--df-accent)}
#angelSyndicate .seg,
.synp .seg{display:flex;gap:6px}
#angelSyndicate .seg-opt,
.synp .seg-opt{flex:1;padding:9px 6px;border:1px solid var(--df-border);background:var(--df-surface);border-radius:var(--df-radius);font-size: 12px;font-weight:500;color:var(--df-text-muted)}
#angelSyndicate .seg-opt.active,
.synp .seg-opt.active{border-color:var(--df-accent);background:var(--df-accent);color:var(--df-surface)}
#angelSyndicate .seg-opt.rej.active,
.synp .seg-opt.rej.active{background:var(--df-danger);border-color:var(--df-danger)}
#angelSyndicate .steps .step,
.synp .steps .step{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--df-border)}
#angelSyndicate .steps .step:last-child,
.synp .steps .step:last-child{border-bottom:none}
#angelSyndicate .step-ic,
.synp .step-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size: 11px;font-weight:600}
#angelSyndicate .step-ic.done,
.synp .step-ic.done{background:var(--df-success-soft);color:var(--df-success)}
#angelSyndicate .step-ic.pend,
.synp .step-ic.pend{background:var(--df-warning-soft);color:var(--df-warning)}
#angelSyndicate .step-ic.info,
.synp .step-ic.info{background:var(--df-accent-soft);color:var(--df-accent)}
#angelSyndicate .step-ic svg,
.synp .step-ic svg{width:14px;height:14px;stroke-width:2.6}
#angelSyndicate .step-tx,
.synp .step-tx{flex:1}
#angelSyndicate .step-tx b,
.synp .step-tx b{font-size: 13px;font-weight:600;display:block}
#angelSyndicate .step-tx span,
.synp .step-tx span{font-size: 12px;color:var(--df-grey-400)}
#angelSyndicate .step-act,
.synp .step-act{font-size: 12px;font-weight:500;color:var(--df-accent);background:var(--df-accent-soft);border:none;border-radius:var(--df-radius);padding:6px 11px;white-space:nowrap;align-self:center}
#angelSyndicate .dot-grey,
.synp .dot-grey{background:var(--df-grey-400)}
#angelSyndicate .dot-accent,
.synp .dot-accent{background:var(--df-accent)}
#angelSyndicate .dot-warning,
.synp .dot-warning{background:var(--df-warning)}
#angelSyndicate .dot-success,
.synp .dot-success{background:var(--df-success)}
#angelSyndicate .dot-danger,
.synp .dot-danger{background:var(--df-danger)}
#angelSyndicate .pill-pitch,
.synp .pill-pitch{color:var(--df-success);background:var(--df-success-soft)}
#angelSyndicate .deal-note,
.synp .deal-note{font-size:11px;color:var(--df-grey-400);margin-top:7px;font-style:italic}
#angelSyndicate .deal-fit,
.synp .deal-fit{font-size:11px;color:var(--df-accent);font-weight:600;margin-top:7px}
#angelSyndicate .board-empty,
.synp .board-empty{font-size:12px;color:var(--df-grey-400);text-align:center;padding:14px 4px;font-style:italic}
#angelSyndicate .hnwi-inline,
.synp .hnwi-inline{vertical-align:middle}
#angelSyndicate .wrap,
.synp .wrap{white-space:normal;color:var(--df-text-muted)}
#angelSyndicate .muted-cell,
.synp .muted-cell{color:var(--df-grey-400)}
#angelSyndicate .sub-ang-meta,
.synp .sub-ang-meta{color:var(--df-grey-400);font-size:12px}
#angelSyndicate .cav-synd,
.synp .cav-synd{background:var(--df-accent-soft);color:var(--df-accent)}
#angelSyndicate .dr-head-gap,
.synp .dr-head-gap{margin-top:16px}
#angelSyndicate .conv-none,
.synp .conv-none{font-size:13px;color:var(--df-grey-400);padding:6px 0}
#angelSyndicate .conv-none b,
.synp .conv-none b{color:var(--df-accent)}
#angelSyndicate .int-line,
.synp .int-line{font-size:13px;display:flex;justify-content:space-between;margin-bottom:2px}
#angelSyndicate .int-pct,
.synp .int-pct{font-size:12px;color:var(--df-grey-400);margin-bottom:14px}
#angelSyndicate .side-text,
.synp .side-text{font-size:13px;line-height:1.55}
#angelSyndicate .side-note,
.synp .side-note{margin:12px 0;font-size:13px;color:var(--df-text-muted)}
#angelSyndicate .side-note-good,
.synp .side-note-good{color:var(--df-success)}
#angelSyndicate .btn-block,
.synp .btn-block{width:100%}
#angelSyndicate .btn-gap,
.synp .btn-gap{margin-top:11px}
#angelSyndicate .btn-row,
.synp .btn-row{display:flex;gap:9px}
#angelSyndicate .btn-row .btn,
.synp .btn-row .btn{flex:0 0 auto}
#angelSyndicate .btn-row-gap,
.synp .btn-row-gap{margin-top:12px}
#angelSyndicate .req-note,
.synp .req-note{font-size:11px;color:var(--df-grey-400);margin-top:4px}
#angelSyndicate .form-gap,
.synp .form-gap{margin-top:12px}
#angelSyndicate .form-hidden,
.synp .form-hidden{display:none}
#angelSyndicate .syn-hidden,
.synp .syn-hidden{display:none}
#angelSyndicate .m-lab-first,
.synp .m-lab-first{margin-top:0}
#angelSyndicate .flag-gap,
.synp .flag-gap{margin-top:14px}
#angelSyndicate .flag-wide,
.synp .flag-wide{max-width:860px}
#angelSyndicate .syn-kpi,
.synp .syn-kpi{height:100%}
#angelSyndicate .syn-kpi > div:first-child,
.synp .syn-kpi > div:first-child{margin:0 !important;height:calc(100% - 24px)}
#angelSyndicate .syn-kpi > div:first-child > div,
.synp .syn-kpi > div:first-child > div{height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 var(--df-space-2) !important}
#angelSyndicate .syn-kpi > div:first-child > div > div:first-child,
.synp .syn-kpi > div:first-child > div > div:first-child{font-size:var(--df-font-size-2xl) !important}
#angelSyndicate .syn-kpi-sub,
.synp .syn-kpi-sub{font-size:var(--df-font-size-xs);color:var(--df-text-muted);text-align:center}
#angelSyndicate .syn-kpi-host,
.synp .syn-kpi-host{margin-bottom:var(--df-space-4)}
#angelSyndicate .syn-tile,
.synp .syn-tile{height:100%}
#angelSyndicate .syn-tile > div,
.synp .syn-tile > div{overflow:auto}
#angelSyndicate .syn-tbl-wide,
.synp .syn-tbl-wide{min-width:880px}
#angelSyndicate .syn-tbl-pf,
.synp .syn-tbl-pf{min-width:920px}
#angelSyndicate .syn-tbl-net,
.synp .syn-tbl-net{min-width:1080px}
#angelSyndicate .sec-h-flush,
.synp .sec-h-flush{margin:18px 0 0;padding-left:0}
#angelSyndicate .bar-list,
.synp .bar-list{display:flex;flex-direction:column;gap:12px}
#angelSyndicate .bar-row,
.synp .bar-row{display:grid;grid-template-columns:150px 1fr 42px;align-items:center;gap:12px;font-size:13px}
#angelSyndicate .bar-n,
.synp .bar-n{text-align:right;font-weight:600}
#angelSyndicate .anti-when,
.synp .anti-when{color:var(--df-grey-400);font-size:12px}
#angelSyndicate .anti-note,
.synp .anti-note{font-size:12px;color:var(--df-grey-400);margin-top:12px;line-height:1.5}
#angelSyndicate .card-brand,
.synp .card-brand{overflow:hidden;margin-bottom:22px}
#angelSyndicate .import-row,
.synp .import-row{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
#angelSyndicate .import-note,
.synp .import-note{font-size:13px;color:var(--df-grey-400)}
#angelSyndicate .import-note b,
.synp .import-note b{color:var(--df-warning)}
#angelSyndicate .syn-pop,
.synp.syn-pop{padding:0;height:100%;overflow:auto;background:var(--df-surface)}
#angelSyndicate .syn-pop .modal-b,
.synp.syn-pop .modal-b{max-height:none}
#angelSyndicate .syn-tile > div,
.synp .syn-tile > div{overflow:auto;padding:var(--df-space-3) var(--df-space-4) !important}
#angelSyndicate .syn-tile > div > div:first-child,
.synp .syn-tile > div > div:first-child{margin-bottom:var(--df-space-2) !important}
#angelSyndicate .syn-tile > div > div:first-child > div:first-child,
.synp .syn-tile > div > div:first-child > div:first-child{font-size:var(--df-font-size-lg) !important}
#angelSyndicate .alert .tx span.hnwi-inline,
.synp .alert .tx span.hnwi-inline{display:inline-block;margin-top:0}

/* ── scripts/domain_angel_syndicate_panels.js (prefix angelSyndPanel) ─────── */
.angelSyndPanel { height: 100%; overflow: auto; }
.angelSyndPanel-empty { padding: 60px 20px; text-align: center; color: var(--df-grey-400); }
.angelSyndPanel-empty i { font-size: 44px; display: block; margin-bottom: 14px; }
.angelSyndPanel-emptyTitle { font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-grey-600); }
.angelSyndPanel-error { padding: 40px; color: var(--df-danger); }
/* Network topology time slider (PRODREQ-0000348): the strip under the canvas and the link states. Tokens only. */
.dfTopo-centre { display: flex; flex-direction: column; gap: var(--df-space-2); min-height: 0; min-width: 0; }
.dfTopo-centre > .dfTopo-canvasWrap { flex: 1 1 auto; }
.dfTopo-time { flex: none; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-4); display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfTopo-time[hidden] { display: none; }
.dfTopo-timeHead { display: flex; align-items: center; gap: var(--df-space-3); font-size: var(--df-font-size-sm); white-space: nowrap; overflow: hidden; }
.dfTopo-timeDate { font-weight: 600; font-size: var(--df-font-size-md); }
.dfTopo-timeBasis { color: var(--df-accent); font-weight: 600; }
.dfTopo-timeSummary { color: var(--df-text-muted); overflow: hidden; text-overflow: ellipsis; }
.dfTopo-timeSpacer { flex: 1; }
.dfTopo-timeKeys { display: flex; gap: var(--df-space-3); color: var(--df-text-muted); font-size: var(--df-font-size-xs); }
.dfTopo-timeKey { display: inline-flex; align-items: center; gap: 4px; }
.dfTopo-timeKey i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--df-text-muted); }
.dfTopo-timeKey--absent i { border-top-style: dashed; opacity: 0.6; }
.dfTopo-timeKey--unknown i { opacity: 0.35; }
.dfTopo-timeKey--observedOnly i { border-top-color: var(--df-accent); }
.dfTopo-timeKey--planned i { border-top: 2px dashed var(--df-accent); }
.dfTopo-timeKey--retiring i { border-top-color: var(--df-danger); }
.dfTopo-timeTrack { position: relative; padding: 14px 24px 30px; }
.dfTopo-timeTrack input[type=range] { width: 100%; margin: 0; accent-color: var(--df-accent); cursor: pointer; }
.dfTopo-timeSide { position: absolute; top: 0; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }
.dfTopo-timeSide--past { left: 24px; }
.dfTopo-timeSide--future { right: 24px; }
.dfTopo-timeTicks { position: absolute; left: 24px; right: 24px; bottom: 0; height: 28px; }
.dfTopo-timeTick { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--df-text-muted); font: inherit; font-size: var(--df-font-size-xs); cursor: pointer; padding: 0 2px; max-width: 160px; }
.dfTopo-timeDot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--df-text-muted); background: var(--df-surface); }
.dfTopo-timeTick.is-run .dfTopo-timeDot { border-color: var(--df-accent); }
.dfTopo-timeTick.is-plan .dfTopo-timeDot { border-color: var(--df-accent); border-style: dashed; }
.dfTopo-timeTick.is-current { color: var(--df-text); font-weight: 600; }
.dfTopo-timeTickLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.dfTopo-timeTick:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 1px; }
.dfTopo-timeEmpty { display: flex; gap: var(--df-space-4); color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfTopo-canvas.is-timeSliced .dfTopo-edge--ts-absent .dfTopo-edgeLine { stroke-dasharray: 6 5; opacity: 0.35; }
.dfTopo-canvas.is-timeSliced .dfTopo-edge--ts-unknown .dfTopo-edgeLine { opacity: 0.25; }
.dfTopo-canvas.is-timeSliced .dfTopo-edge--ts-observedOnly .dfTopo-edgeLine { stroke: var(--df-accent); }
.dfTopo-canvas.is-timeSliced .dfTopo-edge--ts-planned .dfTopo-edgeLine { stroke: var(--df-accent); stroke-dasharray: 6 5; }
.dfTopo-canvas.is-timeSliced .dfTopo-edge--ts-retiring .dfTopo-edgeLine { stroke: var(--df-danger); }
.dfTopo-canvas.is-timeSliced .dfTopo-edge--ts-changed .dfTopo-edgeLine { stroke: var(--df-warning); }
.dfTopo-timeCross { stroke: var(--df-danger); stroke-width: 3; stroke-linecap: round; fill: none; pointer-events: none; }
.dfTopo-pathVerdict { margin: 0 0 var(--df-space-2); font-weight: 600; color: var(--df-success); }
.dfTopo-pathVerdict--broken { color: var(--df-danger); }

/* ── Angel deal tracking (scripts/domain_angel_deal_tracking.js) ───────────
   Cards come from dfcCard in df_lattice_dashboard tiles; buttons are Lattice forms. */
#dealTracking { height: 100%; overflow: auto; background: var(--df-surface-sunken); color: var(--df-text); font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.5; box-sizing: border-box; }
#dealTracking * { box-sizing: border-box; }
#dealTracking .dt-top { padding: var(--df-space-4) var(--df-space-4) 0; background: var(--df-surface); border-bottom: 1px solid var(--df-border); }
#dealTracking .dt-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--df-space-4); }
#dealTracking .dt-eyebrow { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-bottom: 6px; }
#dealTracking .dt-h1 { font-size: var(--df-font-size-2xl); font-weight: 600; margin: 0; padding: 0; text-transform: none; color: var(--df-text); }
#dealTracking .dt-lede { display: flex; align-items: center; gap: var(--df-space-2); flex-wrap: wrap; margin-top: 6px; }
#dealTracking .dt-lede-item { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#dealTracking .dt-tabs { margin: var(--df-space-4) 0 var(--df-space-3); }
#dealTracking .dt-btns { display: inline-flex; align-items: center; flex-shrink: 0; }
#dealTracking .dt-btns .lat-form { width: auto; }
#dealTracking .dt-content { padding: var(--df-space-4); }
#dealTracking .dt-dash { width: 100%; }
#dealTracking .dt-tile { height: 100%; }
#dealTracking .dt-tile > div { overflow: auto; }
#dealTracking .dt-detail { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--df-space-3) var(--df-space-4); }
#dealTracking .dt-detail--two { grid-template-columns: repeat(2, 1fr); }
#dealTracking .dt-detail-item--wide { grid-column: 1 / -1; }
#dealTracking .dt-label { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-bottom: 2px; }
#dealTracking .dt-val { font-size: var(--df-font-size-md); color: var(--df-text); overflow-wrap: anywhere; }
#dealTracking .dt-notes { white-space: pre-wrap; font-size: var(--df-font-size-md); }
#dealTracking .dt-empty { font-size: var(--df-font-size); color: var(--df-text-muted); padding: 10px 0; }
#dealTracking .dt-doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--df-border); font-size: var(--df-font-size); }
#dealTracking .dt-doc-row:first-child { border-top: 0; padding-top: 2px; }
#dealTracking .dt-doc-click { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
#dealTracking .dt-doc-click:hover .dt-doc-name { color: var(--df-accent); }
#dealTracking .dt-doc-ico { width: 16px; text-align: center; color: var(--df-grey-400); flex-shrink: 0; }
#dealTracking .dt-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dealTracking .dt-docdel { display: inline-flex; border: 0; background: transparent; color: var(--df-danger); cursor: pointer; font-size: var(--df-font-size); line-height: 1; padding: 2px 6px; border-radius: var(--df-radius-sm); flex-shrink: 0; }
#dealTracking .dt-docdel:hover { background: var(--df-danger-soft); }
#dealTracking .dt-table { width: 100%; border-collapse: collapse; font-size: var(--df-font-size); }
#dealTracking .dt-table td { padding: var(--df-space-2) 0; border-bottom: 1px solid var(--df-border); }
#dealTracking .dt-table tr:last-child td { border-bottom: 0; }
#dealTracking .dt-label-cell { color: var(--df-text-muted); width: 40%; }
#dealTracking .dt-value-cell { text-align: right; }
#dealTracking .dt-verdict { margin-bottom: var(--df-space-4); }
#dealTracking .dt-funds { border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
#dealTracking .dt-funds-row { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1fr 90px; align-items: center; padding: var(--df-space-2) var(--df-space-4); font-size: var(--df-font-size); background: var(--df-surface); border-bottom: 1px solid var(--df-border); }
#dealTracking .dt-funds-head { font-size: var(--df-font-size-xs); color: var(--df-text-muted); font-weight: 600; background: var(--df-surface-sunken); }
#dealTracking .dt-funds-total { background: var(--df-surface-sunken); font-weight: 600; border-bottom: 0; }
#dealTracking .dt-num { text-align: right; }
#dealTracking .dt-strong { font-weight: 600; }
#dealTracking .dt-meta { font-size: var(--df-font-size); color: var(--df-text-muted); margin-bottom: var(--df-space-3); }
#dealTracking .dt-list { border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
#dealTracking .dt-list-row { display: grid; grid-template-columns: 50px 130px 1fr 150px 130px 100px; align-items: center; gap: var(--df-space-2); padding: var(--df-space-3) var(--df-space-4); border-bottom: 1px solid var(--df-border); font-size: var(--df-font-size); background: var(--df-surface); }
#dealTracking .dt-list-row:last-child { border-bottom: 0; }
#dealTracking .dt-list-row--click { cursor: pointer; }
#dealTracking .dt-list-row--click:hover { background: var(--df-grey-50); }
#dealTracking .dt-list-head { font-size: var(--df-font-size-xs); color: var(--df-text-muted); font-weight: 600; background: var(--df-surface-sunken); }
#dealTracking .dt-id, #dealTracking .dt-muted { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
#dealTracking .dt-sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); margin-top: 2px; }

/* ── Angel pitch decks (scripts/domain_angel_pitch_decks.js) ───────────────
   Deck cards are dfcCard in df_lattice_dashboard tiles, the score is a dfcBadge, buttons are Lattice forms. */
#angelPitchDecks { font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.5; color: var(--df-text); background: var(--df-surface-sunken); height: 100%; overflow: auto; }
#angelPitchDecks *, #angelPitchDecks *::before, #angelPitchDecks *::after { box-sizing: border-box; }
#angelPitchDecks .pd-main { padding: var(--df-space-4) var(--df-space-4) 32px; }
#angelPitchDecks .pd-header { margin-bottom: var(--df-space-4); }
#angelPitchDecks .pd-title { font-size: var(--df-font-size-xl); font-weight: 600; margin: 0 0 4px; padding: 0; text-transform: none; color: var(--df-text); }
#angelPitchDecks .pd-meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#angelPitchDecks .pd-kpis { width: 100%; margin-bottom: var(--df-space-4); }
#angelPitchDecks .pd-kpi { height: 100%; overflow: auto; }
#angelPitchDecks .pd-kpi > div { margin-bottom: 0; }
#angelPitchDecks .pd-kpi__sub { font-size: var(--df-font-size-xs); color: var(--df-text-muted); text-align: center; margin-top: 4px; }
#angelPitchDecks .pd-filter { margin-bottom: var(--df-space-4); }
#angelPitchDecks .pd-btns { display: inline-flex; align-items: center; flex-shrink: 0; }
#angelPitchDecks .pd-btns .lat-form { width: auto; }
#angelPitchDecks .pd-cards { width: 100%; }
#angelPitchDecks .pd-tile { height: 100%; }
#angelPitchDecks .pd-tile > div { overflow: auto; }
#angelPitchDecks .pd-badges { display: inline-flex; align-items: center; gap: var(--df-space-2); flex-wrap: wrap; justify-content: flex-end; }
#angelPitchDecks .pd-card__sub { font-size: var(--df-font-size); color: var(--df-text-muted); }
#angelPitchDecks .pd-card__exec { font-size: var(--df-font-size-sm); color: var(--df-grey-400); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#angelPitchDecks .pd-box { background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: 10px 12px; margin-top: var(--df-space-3); display: flex; gap: var(--df-space-3); align-items: baseline; }
#angelPitchDecks .pd-box__label { font-size: var(--df-font-size-xs); color: var(--df-text-muted); font-weight: 600; }
#angelPitchDecks .pd-box__value { font-size: var(--df-font-size); font-weight: 500; }
#angelPitchDecks .pd-box__value--warn { color: var(--df-warning); }
#angelPitchDecks .pd-box__value--ok { color: var(--df-success); }
#angelPitchDecks .pd-card__readbar { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-3); margin-top: var(--df-space-3); padding-top: var(--df-space-3); border-top: 1px solid var(--df-border); flex-wrap: wrap; }
#angelPitchDecks .pd-card__read { display: flex; align-items: center; gap: 10px; }
#angelPitchDecks .pd-read__label { font-size: var(--df-font-size-xs); color: var(--df-text-muted); font-weight: 600; }
#angelPitchDecks .pd-dots { display: inline-flex; gap: 5px; }
#angelPitchDecks .pd-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--df-accent); cursor: pointer; transition: background 0.12s; }
#angelPitchDecks .pd-dot--on { background: var(--df-accent); }
#angelPitchDecks .pd-empty, #angelPitchDecks .pd-empty-state { text-align: center; color: var(--df-text-muted); padding: 40px 0; }
#angelPitchDecks .pd-empty-state i { font-size: 40px; color: var(--df-grey-300); display: block; margin-bottom: var(--df-space-3); }
#angelPitchDecks .pd-empty-state__title { font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-text); margin-bottom: 4px; }
#angelPitchDecks .pd-empty-state__sub { font-size: var(--df-font-size); color: var(--df-text-muted); margin-bottom: var(--df-space-4); }
#angelPitchDecks .pd-empty-state .pd-btns { display: inline-flex; }

/* ── scripts/domain_founder_console.js (root #founderConsole) ──────────────────
   Tokens only. Every console view is a df_lattice_dashboard of tiles; cards, stat tiles,
   badges and progress bars come from the dfc helpers, buttons and tabs from Lattice and dfc.
   This sheet is the page chrome and the small in-tile lists. */
#founderConsole, #founderConsole *, #founderConsole *::before, #founderConsole *::after { box-sizing: border-box; }
#founderConsole { font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.5; color: var(--df-text); background: var(--df-surface-sunken); height: 100%; overflow: auto; padding: var(--df-space-4) 24px 24px; }
#founderConsole table { border-collapse: collapse; }
#founderConsole .fc-header { margin-bottom: var(--df-space-4); }
#founderConsole .fc-header__crumb { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); font-weight: 500; margin-bottom: 4px; }
#founderConsole .fc-header__title { font-size: var(--df-font-size-xl); font-weight: 600; margin: 0 0 4px; }
#founderConsole .fc-header__meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#founderConsole .fc-tile { height: 100%; overflow: auto; }
#founderConsole .fc-tile > .fc-preview, #founderConsole .fc-tile > .fc-goto, #founderConsole .fc-rollup { height: 100%; }
#founderConsole .fc-goto { cursor: pointer; }
#founderConsole .fc-muted { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#founderConsole .fc-sub { font-size: var(--df-font-size); color: var(--df-text-muted); margin-bottom: var(--df-space-3); }
#founderConsole .fc-hero__bar { margin-bottom: var(--df-space-4); max-width: 420px; }
#founderConsole .fc-link { font-size: var(--df-font-size-sm); color: var(--df-accent); white-space: nowrap; }
#founderConsole .fc-goto:hover .fc-link { text-decoration: underline; }
#founderConsole .fc-btns, #founderConsole .fc-btns.lat-form { flex: 0 0 auto; width: auto; container-type: normal; }
#founderConsole .fc-tabbar { margin-bottom: var(--df-space-4); }
#founderConsole .fc-pane { display: none; }
#founderConsole .fc-pane.is-active { display: block; }
#founderConsole .fc-pane.fc-preview { position: relative; min-height: 120px; }
#founderConsole .fc-empty { text-align: center; color: var(--df-text-muted); font-size: var(--df-font-size); padding: var(--df-space-4); }
#founderConsole .fc-empty__title { font-size: var(--df-font-size-md); font-weight: 600; color: var(--df-text); margin-bottom: 4px; }

#founderConsole .fc-note { display: flex; gap: var(--df-space-2); align-items: flex-start; border-radius: var(--df-radius); padding: var(--df-space-2) var(--df-space-3); margin-bottom: var(--df-space-3); font-size: var(--df-font-size); border: 1px solid var(--df-border); }
#founderConsole .fc-note b { font-weight: 600; }
#founderConsole .fc-note__icon { flex-shrink: 0; line-height: 1.5; }
#founderConsole .fc-note--blue { background: var(--df-accent-soft); border-color: var(--df-accent); }
#founderConsole .fc-note--blue .fc-note__icon { color: var(--df-accent); }
#founderConsole .fc-note--green { background: var(--df-success-soft); border-color: var(--df-success); }
#founderConsole .fc-note--green .fc-note__icon { color: var(--df-success); }
#founderConsole .fc-note--amber { background: var(--df-warning-soft); border-color: var(--df-warning); }
#founderConsole .fc-note--amber .fc-note__icon { color: var(--df-warning); }

#founderConsole .fc-big { font-size: var(--df-font-size-2xl); font-weight: 600; line-height: 1; }
#founderConsole .fc-rollup { position: relative; }
#founderConsole .fc-rollup.fc-goto:hover > div { border-color: var(--df-grey-300); }
#founderConsole .fc-rollup__body { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--df-space-2); }
#founderConsole .fc-rollup__bar { margin-bottom: var(--df-space-2); }
#founderConsole .fc-rollup__line { margin-bottom: var(--df-space-3); }
#founderConsole .fc-rollup__foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--df-space-2); border-top: 1px solid var(--df-border); }

#founderConsole .fc-needs { list-style: none; margin: 0; padding: 0; }
#founderConsole .fc-needs__item { display: grid; grid-template-columns: 8px 1fr auto; gap: var(--df-space-3); padding: var(--df-space-3) 0; border-bottom: 1px solid var(--df-border); align-items: center; }
#founderConsole .fc-needs__item:last-child { border-bottom: 0; }
#founderConsole .fc-needs__item.fc-goto:hover { background: var(--df-surface-sunken); }
#founderConsole .fc-needs__rail { align-self: stretch; border-radius: var(--df-radius-sm); }
#founderConsole .fc-rail--critical { background: var(--df-danger); }
#founderConsole .fc-rail--high { background: var(--df-warning); }
#founderConsole .fc-rail--medium { background: var(--df-accent); }
#founderConsole .fc-needs__head { display: flex; align-items: center; gap: var(--df-space-2); margin-bottom: 3px; flex-wrap: wrap; }
#founderConsole .fc-needs__type { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); font-weight: 600; }
#founderConsole .fc-needs__deadline { font-size: var(--df-font-size-xs); font-weight: 600; }
#founderConsole .fc-deadline--critical { color: var(--df-danger); }
#founderConsole .fc-deadline--high { color: var(--df-warning); }
#founderConsole .fc-deadline--medium { color: var(--df-accent); }
#founderConsole .fc-needs__title { font-size: var(--df-font-size); font-weight: 600; line-height: 1.4; }
#founderConsole .fc-needs__meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }

#founderConsole .fc-kvgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--df-space-3); }
#founderConsole .fc-kv { border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3) var(--df-space-4); background: var(--df-surface-sunken); }
#founderConsole .fc-kv--flag { border-color: var(--df-warning); background: var(--df-warning-soft); }
#founderConsole .fc-kv__label { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-grey-400); margin-bottom: 4px; }
#founderConsole .fc-kv--flag .fc-kv__label { color: var(--df-warning); }
#founderConsole .fc-kv__value { font-size: var(--df-font-size-md); font-weight: 500; }
#founderConsole .fc-kv__value--muted { color: var(--df-grey-400); font-style: italic; font-weight: 400; }

#founderConsole .fc-tbl { width: 100%; font-size: var(--df-font-size); }
#founderConsole .fc-tbl thead th { text-align: left; font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-grey-400); font-weight: 500; padding: var(--df-space-2) var(--df-space-4); border-bottom: 1px solid var(--df-border); background: var(--df-surface-sunken); }
#founderConsole .fc-tbl tbody td { padding: var(--df-space-3) var(--df-space-4); border-bottom: 1px solid var(--df-border); vertical-align: middle; }
#founderConsole .fc-tbl tbody tr:last-child td { border-bottom: 0; }
#founderConsole .fc-tbl tbody tr:hover { background: var(--df-surface-sunken); }
#founderConsole .fc-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--df-surface); font-size: var(--df-font-size-xs); font-weight: 600; flex-shrink: 0; margin-right: var(--df-space-2); vertical-align: middle; }
#founderConsole .fc-avatar--blue { background: var(--df-accent); }
#founderConsole .fc-avatar--sm { background: var(--df-grey-400); width: 22px; height: 22px; }

#founderConsole .fc-steplist { display: flex; flex-direction: column; }
#founderConsole .fc-step { display: flex; align-items: center; gap: var(--df-space-3); padding: var(--df-space-3) 0; border-bottom: 1px solid var(--df-border); font-size: var(--df-font-size); }
#founderConsole .fc-step:last-child { border-bottom: 0; }
#founderConsole .fc-step__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--df-grey-300); }
#founderConsole .fc-step__dot--done { background: var(--df-success); }
#founderConsole .fc-step__dot--active { background: var(--df-warning); }
#founderConsole .fc-step__status { margin-left: auto; font-size: var(--df-font-size-xs); color: var(--df-grey-400); }

#founderConsole .fc-folder { border: 1px solid var(--df-border); border-radius: var(--df-radius); margin-bottom: var(--df-space-3); overflow: hidden; }
#founderConsole .fc-folder__head { display: flex; align-items: center; gap: var(--df-space-3); padding: var(--df-space-3) var(--df-space-4); background: var(--df-surface-sunken); }
#founderConsole .fc-folder__head .fc-muted { margin-left: auto; }
#founderConsole .fc-folder__name { font-weight: 600; font-size: var(--df-font-size); }
#founderConsole .fc-doc { display: flex; align-items: center; gap: var(--df-space-3); padding: var(--df-space-3) var(--df-space-4) var(--df-space-3) 42px; border-top: 1px solid var(--df-border); font-size: var(--df-font-size); }
#founderConsole .fc-doc__meta { margin-left: auto; font-size: var(--df-font-size-xs); color: var(--df-grey-400); }
#founderConsole .fc-doc__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--df-grey-300); }

#founderConsole .fc-match { border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: var(--df-space-4); margin-bottom: var(--df-space-3); display: flex; gap: var(--df-space-4); align-items: flex-start; }
#founderConsole .fc-match:hover { border-color: var(--df-grey-300); }
#founderConsole .fc-match__conf { width: 64px; height: 52px; border-radius: var(--df-radius); background: var(--df-success-soft); color: var(--df-success); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
#founderConsole .fc-match__conf b { font-size: var(--df-font-size-lg); font-weight: 600; line-height: 1; }
#founderConsole .fc-match__conf small { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
#founderConsole .fc-match__main { flex: 1; min-width: 0; }
#founderConsole .fc-match__name { font-weight: 600; font-size: var(--df-font-size-md); display: flex; align-items: center; gap: var(--df-space-2); flex-wrap: wrap; margin-bottom: 3px; }
#founderConsole .fc-match__rationale { font-size: var(--df-font-size-sm); color: var(--df-text-muted); background: var(--df-surface-sunken); border-left: 2px solid var(--df-success); padding: 6px var(--df-space-3); margin-top: var(--df-space-2); border-radius: 0 var(--df-radius-sm) var(--df-radius-sm) 0; }

#founderConsole .fc-kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--df-space-3); }
#founderConsole .fc-kcol { background: var(--df-surface-sunken); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); }
#founderConsole .fc-kcol__head { display: flex; align-items: center; justify-content: space-between; font-size: var(--df-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-text-muted); padding: 0 4px var(--df-space-2); }
#founderConsole .fc-kcol__count { background: var(--df-grey-100); color: var(--df-text-muted); border-radius: 999px; padding: 1px 8px; font-size: var(--df-font-size-xs); }
#founderConsole .fc-kcol__none { padding: 4px; }
#founderConsole .fc-kcard { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3); margin-bottom: var(--df-space-2); }
#founderConsole .fc-kcard:last-child { margin-bottom: 0; }
#founderConsole .fc-kcard__name { font-weight: 600; font-size: var(--df-font-size-sm); display: flex; align-items: center; gap: var(--df-space-2); margin-bottom: 4px; }
#founderConsole .fc-kcard__name .fc-avatar { margin-right: 0; }

#founderConsole .fc-adv { border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: var(--df-space-4); margin-bottom: var(--df-space-3); display: flex; gap: var(--df-space-4); align-items: flex-start; }
#founderConsole .fc-adv:hover { border-color: var(--df-accent); }
#founderConsole .fc-adv__avatar { width: 44px; height: 44px; border-radius: var(--df-radius); background: var(--df-accent); color: var(--df-surface); display: flex; align-items: center; justify-content: center; font-size: var(--df-font-size-lg); font-weight: 600; flex-shrink: 0; }
#founderConsole .fc-adv__main { flex: 1; min-width: 0; }
#founderConsole .fc-adv__name { font-weight: 600; font-size: var(--df-font-size-md); }
#founderConsole .fc-adv__rate { margin-left: auto; text-align: right; flex-shrink: 0; }
#founderConsole .fc-adv__rate b { font-size: var(--df-font-size-lg); font-weight: 600; }
#founderConsole .fc-adv__rate small { display: block; font-size: var(--df-font-size-xs); color: var(--df-text-muted); }

#founderConsole .fc-deck__top { margin-bottom: var(--df-space-3); }
#founderConsole .fc-decks { display: flex; flex-direction: column; gap: var(--df-space-3); }
#founderConsole .fc-deck { border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-3) var(--df-space-4); background: var(--df-surface); }
#founderConsole .fc-deck__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-3); }
#founderConsole .fc-deck__main { min-width: 0; }
#founderConsole .fc-deck__name { font-size: var(--df-font-size-lg); font-weight: 600; }
#founderConsole .fc-deck__sum { margin-top: var(--df-space-2); line-height: 1.5; }
#founderConsole .fc-deck__flags { margin-top: var(--df-space-2); }
#founderConsole .fc-deck__score { text-align: right; flex-shrink: 0; }
#founderConsole .fc-deck .fc-btns { margin-top: var(--df-space-3); }
#founderConsole .fc-score { font-size: var(--df-font-size-2xl); font-weight: 600; line-height: 1; }
#founderConsole .fc-score__total { font-size: var(--df-font-size); color: var(--df-grey-400); font-weight: 400; }
#founderConsole .fc-score--good { color: var(--df-success); }
#founderConsole .fc-score--mid { color: var(--df-warning); }
#founderConsole .fc-score--bad { color: var(--df-danger); }

@media (max-width: 1100px) {
  #founderConsole .fc-kanban { grid-template-columns: repeat(2, 1fr); }
  #founderConsole .fc-kvgrid { grid-template-columns: 1fr; }
}

/* ── scripts/domain_founder_questionnaire.js (root #founderQuestionnaire) ─────
   Tokens only. Each section is a dfcCard; every answer is a Lattice form (.fq-form). */
#founderQuestionnaire, #founderQuestionnaire *, #founderQuestionnaire *::before, #founderQuestionnaire *::after { box-sizing: border-box; }
#founderQuestionnaire { font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.5; color: var(--df-text); background: var(--df-surface-sunken); height: 100%; overflow: auto; padding: var(--df-space-4) 24px 24px; }
#founderQuestionnaire a { color: inherit; text-decoration: none; }
#founderQuestionnaire .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-4); margin-bottom: var(--df-space-3); }
#founderQuestionnaire .page-header__eyebrow { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); font-weight: 600; margin-bottom: 6px; display: inline-flex; align-items: center; gap: var(--df-space-2); }
#founderQuestionnaire .page-header__stagepip { width: 6px; height: 6px; border-radius: 50%; background: var(--df-success); display: inline-block; }
#founderQuestionnaire .page-header__title { font-size: var(--df-font-size-xl); font-weight: 600; margin: 0 0 4px; }
#founderQuestionnaire .page-header__meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#founderQuestionnaire .page-header__actions { flex-shrink: 0; }
#founderQuestionnaire .page-header__actions, #founderQuestionnaire .q-footer__actions { flex: 0 0 auto; container-type: normal; }
#founderQuestionnaire .fq-form .lat-form { width: 100%; }
#founderQuestionnaire .intro { font-size: var(--df-font-size); color: var(--df-text-muted); margin: 0 0 var(--df-space-4); max-width: 760px; line-height: 1.55; }
#founderQuestionnaire .intro strong { color: var(--df-text); font-weight: 600; }

#founderQuestionnaire .fq-coverage { height: 196px; margin-bottom: var(--df-space-4); }
#founderQuestionnaire .fq-tile { height: 100%; }
#founderQuestionnaire .coverage__metric-value { font-size: var(--df-font-size-lg); font-weight: 600; margin-bottom: var(--df-space-2); }
#founderQuestionnaire .coverage__metric-value span { color: var(--df-text-muted); font-weight: 400; }
#founderQuestionnaire .coverage__note { font-size: var(--df-font-size-xs); color: var(--df-grey-400); margin-top: 6px; }
#founderQuestionnaire .coverage__save-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--df-success); font-weight: 500; }
#founderQuestionnaire .coverage__save-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--df-success); }

#founderQuestionnaire .q-body { display: grid; grid-template-columns: 212px 1fr; gap: var(--df-space-4); align-items: start; }
#founderQuestionnaire .rail { position: sticky; top: var(--df-space-4); align-self: start; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: var(--df-space-3); }
#founderQuestionnaire .rail__title { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-grey-400); font-weight: 600; padding: 4px var(--df-space-2) var(--df-space-2); }
#founderQuestionnaire .rail__item { display: grid; grid-template-columns: 1fr auto; gap: var(--df-space-2); align-items: center; padding: 7px var(--df-space-2); border-radius: var(--df-radius-sm); cursor: pointer; font-size: var(--df-font-size-sm); color: var(--df-text-muted); line-height: 1.3; }
#founderQuestionnaire .rail__item:hover, #founderQuestionnaire .rail__item--active { background: var(--df-grey-100); color: var(--df-text); }
#founderQuestionnaire .rail__item--active { font-weight: 600; }
#founderQuestionnaire .rail__num { color: var(--df-grey-400); font-weight: 600; margin-right: 6px; }
#founderQuestionnaire .rail__item--active .rail__num { color: var(--df-text); }
#founderQuestionnaire .rail__count { font-size: var(--df-font-size-xs); color: var(--df-grey-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
#founderQuestionnaire .rail__count--done { color: var(--df-success); }

#founderQuestionnaire .qsection { scroll-margin-top: var(--df-space-4); }
#founderQuestionnaire .qsection__desc { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin: -8px 0 var(--df-space-4); max-width: 640px; }
#founderQuestionnaire .qcard { padding: var(--df-space-4) 0; border-top: 1px solid var(--df-border); }
#founderQuestionnaire .qcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-3); margin-bottom: 4px; }
#founderQuestionnaire .qcard__qnum { font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--df-grey-400); font-variant-numeric: tabular-nums; }
#founderQuestionnaire .qcard__pip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--df-font-size-xs); font-weight: 500; }
#founderQuestionnaire .qcard__pip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
#founderQuestionnaire .qcard__pip--done { color: var(--df-success); }
#founderQuestionnaire .qcard__pip--done::before { background: var(--df-success); }
#founderQuestionnaire .qcard__pip--todo { color: var(--df-grey-400); }
#founderQuestionnaire .qcard__pip--todo::before { background: var(--df-grey-300); }
#founderQuestionnaire .qcard__title { font-size: var(--df-font-size-md); font-weight: 600; line-height: 1.45; margin-bottom: 4px; }
#founderQuestionnaire .qcard__help { font-size: var(--df-font-size-sm); color: var(--df-text-muted); line-height: 1.5; margin-bottom: var(--df-space-3); }
#founderQuestionnaire .qrow { display: flex; gap: var(--df-space-4); align-items: stretch; flex-wrap: wrap; }
#founderQuestionnaire .qrow > .qcard { flex: 1 1 0; min-width: 220px; }
#founderQuestionnaire .fq-revnote { display: none; background: var(--df-accent-soft); border: 1px solid var(--df-accent); border-radius: var(--df-radius-lg); padding: var(--df-space-3) var(--df-space-4); margin: var(--df-space-3) 0; font-size: var(--df-font-size); }

#founderQuestionnaire .upload { border: 1px dashed var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-4); text-align: center; font-size: var(--df-font-size-sm); color: var(--df-text-muted); background: var(--df-surface-sunken); margin-top: var(--df-space-2); }
#founderQuestionnaire .upload strong { color: var(--df-accent); font-weight: 600; }
#founderQuestionnaire .evidence { margin-top: var(--df-space-3); border-top: 1px solid var(--df-border); padding-top: var(--df-space-3); }
#founderQuestionnaire .evidence__body { display: none; margin-top: var(--df-space-2); }
#founderQuestionnaire .evidence.is-open .evidence__body { display: block; }

#founderQuestionnaire .q-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: var(--df-space-4); }
#founderQuestionnaire .q-footer__text { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }

@media (max-width: 920px) {
  #founderQuestionnaire .q-body { grid-template-columns: 1fr; }
  #founderQuestionnaire .rail { position: static; margin-bottom: var(--df-space-4); }
}

/* RAN sector configuration view (scripts/ran_sector_view.js). Colours from --df-* tokens only. */
.rs-view { position: relative; display: flex; flex-direction: column; gap: var(--df-space-3); padding: var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text); }
.rs-view .rsSummary { margin: 0; color: var(--df-text-muted); }
.rs-view .rsBusy { position: absolute; inset: 0; display: none; z-index: 2; }
.rs-view .rsBusy.is-on { display: block; }
.rs-view .rsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--df-space-3); }
.rs-view .rsCard { border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); box-shadow: var(--df-shadow); padding: var(--df-space-3); }
.rs-view .rsCard.has-gap { border-color: var(--df-warning); }
.rs-view .rsHead { display: flex; gap: var(--df-space-3); align-items: center; margin-bottom: var(--df-space-2); }
.rs-view .rsTitle { display: flex; flex-direction: column; gap: var(--df-space-1); align-items: flex-start; min-width: 0; }
.rs-view .rsMeta { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.rs-view .rsBadges { display: flex; flex-wrap: wrap; gap: var(--df-space-1); }
.rs-view .rsBadge { background: var(--df-warning-soft); color: var(--df-warning); border: 1px solid var(--df-warning); border-radius: var(--df-radius-sm); padding: 0 var(--df-space-2); font-size: var(--df-font-size-sm); font-weight: 600; }
.rs-view .rsH { margin: var(--df-space-2) 0 var(--df-space-1); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); }
.rs-view .rsList { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--df-space-1); }
.rs-view .rsNone { color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.rs-view .rsBand { display: flex; flex-wrap: wrap; gap: var(--df-space-1); align-items: center; }
.rs-view .rsBandName { font-weight: 600; margin-right: var(--df-space-1); }
.rs-view .rsItem { font: inherit; font-size: var(--df-font-size-sm); background: var(--df-surface); color: var(--df-accent); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: 2px var(--df-space-2); cursor: pointer; text-align: left; }
.rs-view .rsItem:hover { border-color: var(--df-accent); background: var(--df-accent-soft); }
.rs-view .rsItem:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
.rs-view .rsLooseList { display: flex; flex-wrap: wrap; gap: var(--df-space-1); }
.rs-view .rsError { color: var(--df-danger); background: var(--df-danger-soft); border: 1px solid var(--df-danger); border-radius: var(--df-radius-sm); padding: var(--df-space-2) var(--df-space-3); margin: 0; }
.rs-view .rs { flex: none; }
.rs-view .rsRing { fill: var(--df-surface-sunken); stroke: var(--df-grey-300); stroke-width: 1; }
.rs-view .rsTick { stroke: var(--df-grey-400); stroke-width: 1; }
.rs-view .rsNorth { fill: var(--df-text-muted); font-size: 9px; }
.rs-view .rsWedge { fill: var(--df-accent-soft); stroke: var(--df-accent); stroke-width: 1; }
.rs-view .rsAntenna { stroke: var(--df-text); stroke-width: 2; stroke-linecap: round; }

/* Virtual lens (scripts/network_virtual_lens.js): VMs to port groups and vSwitches, hosts, ToRs and
   the fabric. Five-column SVG; a VM's state is the outline, never a fill. Tokens only, light theme. */
.dfc.dfc-tabbar.netVirtTabbar .dfc-tabbar__label { text-transform: none; }
.netVirt-strip { display: flex; gap: var(--df-space-3); padding: var(--df-space-3) var(--df-space-4); box-sizing: border-box; height: 100%; align-items: stretch; }
.netVirt-tile { display: flex; flex-direction: column; justify-content: center; min-width: 140px; padding: 0 var(--df-space-4); border: 1px solid var(--df-border); border-radius: var(--df-radius); background: var(--df-surface); }
.netVirt-tileN { font-size: var(--df-font-size-xl); font-weight: 600; color: var(--df-text); line-height: 1.2; }
.netVirt-tileL { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netVirt-tabs { height: 100%; }
.netVirt-views { height: 100%; overflow: auto; box-sizing: border-box; background: var(--df-surface); }
.netVirt-view { height: 100%; box-sizing: border-box; }
.netVirt-view[hidden] { display: none; }
.netVirt-viewOverview { display: flex; flex-direction: column; height: auto; min-height: 100%; }
.netVirt-viewGaps { padding: var(--df-space-3); }
.netVirt-scroll { overflow: auto; padding: var(--df-space-3); }
.netVirt-svg { display: block; font-family: inherit; }
.netVirt-colHead { font-size: var(--df-font-size-sm); font-weight: 600; fill: var(--df-text-muted); }
.netVirt-colRule { stroke: var(--df-border); stroke-width: 1; }
.netVirt-group rect { fill: var(--df-surface-sunken); stroke: var(--df-border); }
.netVirt-group text { font-size: var(--df-font-size-xs); fill: var(--df-text-muted); }
.netVirt-edge { fill: none; stroke: var(--df-grey-400); stroke-width: 1.4; }
.netVirt-edge:hover { stroke: var(--df-accent); stroke-width: 2; }
.netVirt-box rect { fill: var(--df-surface); stroke: var(--df-grey-400); stroke-width: 1.2; }
.netVirt-box text { font-size: var(--df-font-size-sm); fill: var(--df-text); pointer-events: none; }
.netVirt-box[data-id] { cursor: pointer; }
.netVirt-box[data-id]:hover rect, .netVirt-box:focus rect { stroke: var(--df-accent); }
.netVirt-host rect, .netVirt-tor rect, .netVirt-fabric rect { stroke: var(--df-grey-600); }
.netVirt-state-running rect { stroke: var(--df-success); stroke-width: 2; }
.netVirt-state-stopped rect { stroke: var(--df-grey-500); stroke-width: 2; }
.netVirt-state-suspended rect { stroke: var(--df-warning); stroke-width: 2; }
.netVirt-state-migrating rect { stroke: var(--df-accent); stroke-width: 2; }
.netVirt-state-failed rect { stroke: var(--df-danger); stroke-width: 2; }
.netVirt-state-unknown rect { stroke: var(--df-grey-400); stroke-width: 2; }
.netVirt-stub line { stroke: var(--df-warning); stroke-width: 1.6; stroke-dasharray: 4 3; }
.netVirt-stub line.netVirt-stubHit { stroke: transparent; stroke-width: 14; stroke-dasharray: none; }
.netVirt-stub circle { fill: var(--df-surface); stroke: var(--df-warning); stroke-width: 1.6; }
.netVirt-stub:hover line, .netVirt-stub:focus line { stroke: var(--df-danger); }
.netVirt-stub:hover line.netVirt-stubHit, .netVirt-stub:focus line.netVirt-stubHit { stroke: transparent; }
.netVirt-legend { display: flex; flex-wrap: wrap; gap: var(--df-space-4); padding: var(--df-space-2) var(--df-space-4) var(--df-space-4); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.netVirt-legendItem { display: inline-flex; align-items: center; gap: var(--df-space-2); }
.netVirt-legendDot { width: 12px; height: 12px; border-radius: var(--df-radius-sm); border: 2px solid var(--df-grey-400); box-sizing: border-box; background: var(--df-surface); }
.netVirt-legendDot.netVirt-state-running { border-color: var(--df-success); }
.netVirt-legendDot.netVirt-state-stopped { border-color: var(--df-grey-500); }
.netVirt-legendDot.netVirt-state-suspended { border-color: var(--df-warning); }
.netVirt-legendDot.netVirt-state-migrating { border-color: var(--df-accent); }
.netVirt-legendDot.netVirt-state-failed { border-color: var(--df-danger); }
.netVirt-legendStub { width: 24px; border-top: 2px dashed var(--df-warning); }
.netVirt-topoHost { width: 100%; height: calc(100vh - 220px); }
.netVirt-empty { padding: var(--df-space-4); color: var(--df-text); font-size: var(--df-font-size-md); }
.netVirt-empty p { margin: 0 0 var(--df-space-2); }
.netVirt-emptyHint { color: var(--df-text-muted); font-size: var(--df-font-size); }

/* ── scripts/domain_founder_risk_analysis.js (root #founderRiskAnalysis) ─────
   Same cockpit chrome as the founder questionnaire above. Every answer and
   evidence note is a Lattice textarea form (.fra-form); sections are dfcCards. */
#founderRiskAnalysis, #founderRiskAnalysis *, #founderRiskAnalysis *::before, #founderRiskAnalysis *::after { box-sizing: border-box; }
#founderRiskAnalysis { font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.5; color: var(--df-text); background: var(--df-surface-sunken); height: 100%; overflow: auto; padding: var(--df-space-4) 24px 24px; }
#founderRiskAnalysis a { color: inherit; text-decoration: none; }
#founderRiskAnalysis .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-4); margin-bottom: var(--df-space-3); }
#founderRiskAnalysis .page-header__eyebrow { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); font-weight: 600; margin-bottom: 6px; display: inline-flex; align-items: center; gap: var(--df-space-2); }
#founderRiskAnalysis .page-header__stagepip { width: 6px; height: 6px; border-radius: 50%; background: var(--df-success); display: inline-block; }
#founderRiskAnalysis .page-header__title { font-size: var(--df-font-size-xl); font-weight: 600; margin: 0 0 4px; }
#founderRiskAnalysis .page-header__meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
#founderRiskAnalysis .page-header__meta strong { color: var(--df-text); font-weight: 600; }
#founderRiskAnalysis .page-header__actions { flex-shrink: 0; }
#founderRiskAnalysis .page-header__actions, #founderRiskAnalysis .q-footer__actions { flex: 0 0 auto; container-type: normal; }
#founderRiskAnalysis .fra-form .lat-form { width: 100%; }
#founderRiskAnalysis .intro { font-size: var(--df-font-size); color: var(--df-text-muted); margin: 0 0 var(--df-space-4); max-width: 760px; line-height: 1.55; }
#founderRiskAnalysis .intro strong { color: var(--df-text); font-weight: 600; }

#founderRiskAnalysis .fra-coverage { height: 196px; margin-bottom: var(--df-space-4); }
#founderRiskAnalysis .fra-tile { height: 100%; }
#founderRiskAnalysis .coverage__metric-value { font-size: var(--df-font-size-lg); font-weight: 600; margin-bottom: var(--df-space-2); }
#founderRiskAnalysis .coverage__metric-value span { color: var(--df-text-muted); font-weight: 400; }
#founderRiskAnalysis .coverage__note { font-size: var(--df-font-size-xs); color: var(--df-grey-400); margin-top: 6px; }
#founderRiskAnalysis .coverage__save-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--df-success); font-weight: 500; }
#founderRiskAnalysis .coverage__save-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--df-success); }

#founderRiskAnalysis .q-body { display: grid; grid-template-columns: 212px 1fr; gap: var(--df-space-4); align-items: start; }
#founderRiskAnalysis .rail { position: sticky; top: var(--df-space-4); align-self: start; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: var(--df-space-3); }
#founderRiskAnalysis .rail__title { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-grey-400); font-weight: 600; padding: 4px var(--df-space-2) var(--df-space-2); }
#founderRiskAnalysis .rail__item { display: grid; grid-template-columns: 1fr auto; gap: var(--df-space-2); align-items: center; padding: 7px var(--df-space-2); border-radius: var(--df-radius-sm); cursor: pointer; font-size: var(--df-font-size-sm); color: var(--df-text-muted); line-height: 1.3; }
#founderRiskAnalysis .rail__item:hover, #founderRiskAnalysis .rail__item--active { background: var(--df-grey-100); color: var(--df-text); }
#founderRiskAnalysis .rail__item--active { font-weight: 600; }
#founderRiskAnalysis .rail__num { color: var(--df-grey-400); font-weight: 600; margin-right: 6px; }
#founderRiskAnalysis .rail__item--active .rail__num { color: var(--df-text); }
#founderRiskAnalysis .rail__count { font-size: var(--df-font-size-xs); color: var(--df-grey-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
#founderRiskAnalysis .rail__count--done { color: var(--df-success); }

#founderRiskAnalysis .qsection { scroll-margin-top: var(--df-space-4); }
#founderRiskAnalysis .qcard { padding: var(--df-space-4) 0; border-top: 1px solid var(--df-border); }
#founderRiskAnalysis .qcard:first-of-type { border-top: 0; padding-top: 0; }
#founderRiskAnalysis .qcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-3); margin-bottom: 4px; }
#founderRiskAnalysis .qcard__qnum { font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--df-grey-400); font-variant-numeric: tabular-nums; }
#founderRiskAnalysis .qcard__pip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--df-font-size-xs); font-weight: 500; }
#founderRiskAnalysis .qcard__pip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
#founderRiskAnalysis .qcard__pip--done { color: var(--df-success); }
#founderRiskAnalysis .qcard__pip--done::before { background: var(--df-success); }
#founderRiskAnalysis .qcard__pip--todo { color: var(--df-grey-400); }
#founderRiskAnalysis .qcard__pip--todo::before { background: var(--df-grey-300); }
#founderRiskAnalysis .qcard__title { font-size: var(--df-font-size-md); font-weight: 600; line-height: 1.45; margin-bottom: var(--df-space-3); }

#founderRiskAnalysis .upload { border: 1px dashed var(--df-border); border-radius: var(--df-radius); padding: var(--df-space-4); text-align: center; font-size: var(--df-font-size-sm); color: var(--df-text-muted); background: var(--df-surface-sunken); margin-top: var(--df-space-2); cursor: pointer; }
#founderRiskAnalysis .upload strong { color: var(--df-accent); font-weight: 600; }
#founderRiskAnalysis .evidence { margin-top: var(--df-space-3); border-top: 1px solid var(--df-border); padding-top: var(--df-space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-2); }
#founderRiskAnalysis .evidence__hint { font-size: var(--df-font-size-xs); color: var(--df-grey-400); font-weight: 400; }
#founderRiskAnalysis .evidence__attached { display: none; align-items: center; gap: 6px; font-size: var(--df-font-size-xs); color: var(--df-success); font-weight: 500; margin-left: auto; }
#founderRiskAnalysis .evidence__attached.is-visible { display: inline-flex; }
#founderRiskAnalysis .evidence__attached::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--df-accent); }
#founderRiskAnalysis .evidence__body { display: none; margin-top: var(--df-space-2); flex-basis: 100%; }
#founderRiskAnalysis .evidence.is-open .evidence__body { display: block; }
#founderRiskAnalysis .ev-file-input { display: none; }
#founderRiskAnalysis .ev-files { display: flex; flex-wrap: wrap; gap: var(--df-space-2); margin-top: var(--df-space-2); }
#founderRiskAnalysis .file-chip { display: inline-flex; align-items: center; gap: var(--df-space-2); font-size: var(--df-font-size-sm); background: var(--df-grey-100); border-radius: var(--df-radius-sm); padding: 5px 10px; color: var(--df-text); }
#founderRiskAnalysis .file-chip__ok { color: var(--df-success); font-weight: 700; }
#founderRiskAnalysis .file-chip__name { cursor: pointer; }
#founderRiskAnalysis .file-chip__x { color: var(--df-grey-400); font-size: var(--df-font-size-md); cursor: pointer; }

#founderRiskAnalysis .q-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: var(--df-space-4); }
#founderRiskAnalysis .q-footer__text { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }

@media (max-width: 920px) {
  #founderRiskAnalysis .q-body { grid-template-columns: 1fr; }
  #founderRiskAnalysis .rail { position: static; margin-bottom: var(--df-space-4); }
}

/* ── scripts/domain_founder_risk_report.js (root #founderRiskReport) ────────
   The angel deal report popout: tabs, RAG dfcCards (dimCard/areaCard) and one
   df_lattice_chart (the per-dimension evidence bar on the dashboard tab). */
#founderRiskReport, #founderRiskReport *, #founderRiskReport *::before, #founderRiskReport *::after { box-sizing: border-box; }
#founderRiskReport { font-family: inherit; font-size: var(--df-font-size-md); line-height: 1.5; color: var(--df-text); background: var(--df-surface-sunken); height: 100%; overflow: auto; }
#founderRiskReport .is-hidden { display: none; }
#founderRiskReport .rpt-main { max-width: 1180px; margin: 0 auto; padding: var(--df-space-4) 24px 40px; }
#founderRiskReport .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-space-4); margin-bottom: var(--df-space-4); }
#founderRiskReport .ph-eyebrow { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); font-weight: 600; margin-bottom: 6px; }
#founderRiskReport .page-header__title { font-size: var(--df-font-size-xl); font-weight: 600; margin: 0 0 4px; }
#founderRiskReport .page-header__meta { font-size: var(--df-font-size); color: var(--df-text-muted); }
#founderRiskReport .rr-regen-btn { flex: 0 0 auto; border: 1px solid var(--df-border); background: var(--df-surface); color: var(--df-text); font-size: var(--df-font-size); font-weight: 600; padding: 9px 15px; border-radius: var(--df-radius); cursor: pointer; white-space: nowrap; }
#founderRiskReport .rr-regen-btn:hover { background: var(--df-grey-100); border-color: var(--df-grey-300); }
#founderRiskReport .facts { background: var(--df-grey-50); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); margin-bottom: var(--df-space-4); }
#founderRiskReport #rrFacts { display: flex; flex-wrap: wrap; }
#founderRiskReport .fact { padding: 12px 20px; border-right: 1px solid var(--df-border); }
#founderRiskReport .fact-k { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); margin-bottom: 3px; font-weight: 600; }
#founderRiskReport .fact-v { font-size: var(--df-font-size); font-weight: 600; }
#founderRiskReport .tabs { display: flex; margin: 0 0 var(--df-space-4); border-bottom: 1px solid var(--df-border); overflow-x: auto; }
#founderRiskReport .tab { background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--df-font-size); font-weight: 500; color: var(--df-text-muted); padding: 10px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: var(--df-space-2); align-items: baseline; white-space: nowrap; }
#founderRiskReport .tab:hover { color: var(--df-text); }
#founderRiskReport .tab .tnum { font-size: var(--df-font-size-xs); color: var(--df-grey-400); }
#founderRiskReport .tab.active { color: var(--df-text); font-weight: 600; border-bottom-color: var(--df-text); }
#founderRiskReport .tab .tnote { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-grey-400); }
#founderRiskReport .screen { display: none; }
#founderRiskReport .screen.active { display: block; }
#founderRiskReport .disclaimer { background: var(--df-grey-50); border: 1px solid var(--df-border); border-left: 3px solid var(--df-text); border-radius: var(--df-radius); padding: 14px 18px; font-size: var(--df-font-size); color: var(--df-text-muted); line-height: 1.55; margin-bottom: var(--df-space-4); }
#founderRiskReport .disclaimer strong { color: var(--df-text); font-weight: 600; }
#founderRiskReport .eyebrow { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); font-weight: 600; margin-bottom: 10px; }
#founderRiskReport .summary { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--df-space-4); align-items: start; margin-bottom: var(--df-space-4); }
#founderRiskReport .headline { font-size: var(--df-font-size-lg); font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
#founderRiskReport .sum-note { font-size: var(--df-font-size); color: var(--df-text-muted); line-height: 1.6; }
#founderRiskReport .coverage-card { border: 1px solid var(--df-border); background: var(--df-surface); border-radius: var(--df-radius-lg); }
#founderRiskReport .cov-head { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); padding: 14px 18px 0; font-weight: 600; }
#founderRiskReport .cov-bar { display: flex; height: 10px; margin: 12px 18px 0; border-radius: 5px; overflow: hidden; background: var(--df-grey-100); }
#founderRiskReport .cov-seg.ev { background: var(--df-success); } #founderRiskReport .cov-seg.as { background: var(--df-warning); } #founderRiskReport .cov-seg.ns { background: var(--df-danger-soft); }
#founderRiskReport .cov-legend { display: flex; gap: 16px; padding: 12px 18px 4px; flex-wrap: wrap; }
#founderRiskReport .cov-item { font-size: var(--df-font-size-sm); color: var(--df-text-muted); display: flex; gap: 6px; align-items: center; }
#founderRiskReport .cov-dot { width: 9px; height: 9px; border-radius: 50%; }
#founderRiskReport .cov-dot.ev { background: var(--df-success); } #founderRiskReport .cov-dot.as { background: var(--df-warning); } #founderRiskReport .cov-dot.ns { background: var(--df-danger); }
#founderRiskReport .cov-item b { font-weight: 600; color: var(--df-text); }
#founderRiskReport .cov-standing { font-size: var(--df-font-size-sm); color: var(--df-text-muted); padding: 12px 18px 16px; line-height: 1.5; border-top: 1px solid var(--df-border); margin-top: 8px; }
#founderRiskReport .cov-standing b { color: var(--df-text); font-weight: 600; }
#founderRiskReport .ds-head { border-bottom: 2px solid var(--df-text); padding-bottom: 12px; margin-bottom: 8px; display: flex; align-items: baseline; gap: 16px; }
#founderRiskReport .ds-head h2 { font-size: var(--df-font-size-md); font-weight: 600; }
#founderRiskReport .ds-head .dsh-note { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-left: auto; }
#founderRiskReport .ds-intro { font-size: var(--df-font-size); color: var(--df-text-muted); line-height: 1.6; margin: 14px 0 var(--df-space-4); }
#founderRiskReport .ds-intro b { color: var(--df-text); font-weight: 600; }
#founderRiskReport .ds-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--df-space-4); }
#founderRiskReport .ds-col-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
#founderRiskReport .ds-col-title { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
#founderRiskReport .ds-col-title.pos { color: var(--df-success); } #founderRiskReport .ds-col-title.con { color: var(--df-warning); }
#founderRiskReport .ds-col-count { font-size: var(--df-font-size-md); font-weight: 600; }
#founderRiskReport .ds-col-count.pos { color: var(--df-success); } #founderRiskReport .ds-col-count.con { color: var(--df-warning); }
#founderRiskReport .ds-col-sub { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-bottom: 16px; line-height: 1.5; }
#founderRiskReport .area-headline { font-size: var(--df-font-size-md); font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
#founderRiskReport .area-basis { font-size: var(--df-font-size); color: var(--df-text-muted); line-height: 1.55; margin-bottom: 10px; }
#founderRiskReport .chip { display: inline-flex; gap: 7px; align-items: center; font-size: var(--df-font-size-xs); color: var(--df-text-muted); background: var(--df-grey-50); border: 1px solid var(--df-border); padding: 4px 9px; border-radius: 999px; margin-bottom: 10px; }
#founderRiskReport .chip-k { color: var(--df-grey-400); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--df-font-size-xs); font-weight: 600; }
#founderRiskReport .chip.external { background: var(--df-accent-soft); border-color: var(--df-accent-soft); } #founderRiskReport .chip.band { background: var(--df-grey-100); }
#founderRiskReport .ask-note { font-size: var(--df-font-size-sm); color: var(--df-warning); background: var(--df-warning-soft); border: 1px solid var(--df-warning-soft); border-radius: var(--df-radius); padding: 8px 11px; margin-bottom: 10px; }
#founderRiskReport .ask-note span { display: block; font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-warning); font-weight: 600; margin-bottom: 3px; }
#founderRiskReport .pulse { display: flex; gap: 14px; align-items: flex-start; background: var(--df-accent-soft); border: 1px solid var(--df-accent-soft); border-radius: var(--df-radius); padding: 14px 18px; margin: var(--df-space-4) 0; }
#founderRiskReport .pulse-mark { font-size: var(--df-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-accent); white-space: nowrap; }
#founderRiskReport .pulse-txt { font-size: var(--df-font-size); line-height: 1.6; } #founderRiskReport .pulse-txt b { color: var(--df-accent); font-weight: 600; }
#founderRiskReport .dim-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--df-text); padding-bottom: 12px; margin-bottom: 4px; }
#founderRiskReport .dim-head h2 { font-size: var(--df-font-size-md); font-weight: 600; } #founderRiskReport .dim-head .dh-note { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-left: auto; }
#founderRiskReport .axes { display: grid; grid-template-columns: 230px 1fr; gap: 26px; margin-bottom: 14px; align-items: start; }
#founderRiskReport .ax-label { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--df-grey-400); margin-bottom: 8px; font-weight: 600; }
#founderRiskReport .ev-row { display: flex; align-items: center; gap: 12px; }
#founderRiskReport .ev-dots { display: flex; gap: 5px; }
#founderRiskReport .ev-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--df-border); background: var(--df-surface); }
#founderRiskReport .ev-dot.on.evidenced { background: var(--df-success); border-color: var(--df-success); }
#founderRiskReport .ev-dot.on.asserted { background: var(--df-warning); border-color: var(--df-warning); }
#founderRiskReport .ev-dot.on.notstated { background: var(--df-danger); border-color: var(--df-danger); }
#founderRiskReport .ev-badge { font-size: var(--df-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px; }
#founderRiskReport .ev-badge.evidenced { background: var(--df-success-soft); color: var(--df-success); } #founderRiskReport .ev-badge.asserted { background: var(--df-warning-soft); color: var(--df-warning); } #founderRiskReport .ev-badge.notstated { background: var(--df-danger-soft); color: var(--df-danger); }
#founderRiskReport .st-track { position: relative; height: 6px; background: var(--df-grey-100); border-radius: 3px; margin: 6px 0 8px; }
#founderRiskReport .st-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--df-grey-400); border-radius: 3px 0 0 3px; }
#founderRiskReport .st-mark { position: absolute; top: -5px; width: 3px; height: 16px; background: var(--df-text); border-radius: 2px; }
#founderRiskReport .st-scale { display: flex; justify-content: space-between; font-size: var(--df-font-size-xs); color: var(--df-grey-400); }
#founderRiskReport .st-read { font-size: var(--df-font-size); margin-bottom: 7px; } #founderRiskReport .st-read b { font-weight: 600; }
#founderRiskReport .st-band { display: flex; gap: 4px; margin: 6px 0 8px; }
#founderRiskReport .st-seg { flex: 1; text-align: center; font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 4px; border: 1px solid var(--df-border); color: var(--df-grey-400); border-radius: var(--df-radius-sm); }
#founderRiskReport .st-seg.on { background: var(--df-grey-100); border-color: var(--df-text); color: var(--df-text); font-weight: 600; }
#founderRiskReport .st-na { font-size: var(--df-font-size); color: var(--df-text-muted); }
#founderRiskReport .st-locked { font-size: var(--df-font-size); color: var(--df-text-muted); display: flex; gap: 8px; align-items: center; }
#founderRiskReport .lock-ic { width: 12px; height: 12px; border: 1.5px solid var(--df-grey-400); border-radius: 2px; position: relative; }
#founderRiskReport .lock-ic::before { content: ''; position: absolute; width: 7px; height: 6px; border: 1.5px solid var(--df-grey-400); border-bottom: none; border-radius: 4px 4px 0 0; top: -5px; left: 1px; }
#founderRiskReport .dim-read { font-size: var(--df-font-size); color: var(--df-text-muted); line-height: 1.6; margin-bottom: 10px; }
#founderRiskReport .excerpt { border-left: 2px solid var(--df-border); padding: 2px 0 2px 14px; margin-bottom: 10px; }
#founderRiskReport .excerpt-k { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--df-grey-400); margin-bottom: 3px; font-weight: 600; }
#founderRiskReport .excerpt-t { font-size: var(--df-font-size); color: var(--df-text-muted); font-style: italic; line-height: 1.55; }
#founderRiskReport .under-toggle { cursor: pointer; background: none; border: none; font-family: inherit; font-size: var(--df-font-size-sm); font-weight: 500; color: var(--df-accent); padding: 6px 0 0; display: inline-flex; gap: 6px; align-items: center; }
#founderRiskReport .under-toggle:hover { text-decoration: underline; }
#founderRiskReport .under { display: none; margin-top: 12px; border-top: 1px solid var(--df-border); }
#founderRiskReport .under.open { display: block; }
#founderRiskReport .uq { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--df-border); }
#founderRiskReport .uq:last-child { border-bottom: none; }
#founderRiskReport .uq-q { font-size: var(--df-font-size-sm); color: var(--df-text); font-weight: 500; line-height: 1.4; }
#founderRiskReport .uq-id { font-size: var(--df-font-size-xs); color: var(--df-grey-400); margin-right: 5px; font-weight: 600; }
#founderRiskReport .uq-a { grid-column: 1; font-size: var(--df-font-size-sm); color: var(--df-text-muted); font-style: italic; line-height: 1.5; }
#founderRiskReport .uq-meta { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; white-space: nowrap; }
#founderRiskReport .uq-tier { font-size: var(--df-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; }
#founderRiskReport .uq-tier.ev { background: var(--df-success-soft); color: var(--df-success); } #founderRiskReport .uq-tier.as { background: var(--df-warning-soft); color: var(--df-warning); } #founderRiskReport .uq-tier.ns { background: var(--df-danger-soft); color: var(--df-danger); }
#founderRiskReport .uq-rung { font-size: var(--df-font-size-xs); color: var(--df-grey-400); }
#founderRiskReport .dash-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--df-space-4); align-items: start; margin-bottom: var(--df-space-4); }
#founderRiskReport .dimchart-wrap { border: 1px solid var(--df-border); background: var(--df-surface); border-radius: var(--df-radius-lg); padding: 18px 18px 8px; }
#founderRiskReport .dimchart-head h3 { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
#founderRiskReport .dimchart-sub { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-bottom: 6px; }
#founderRiskReport .rr-dimchart { height: 280px; }
#founderRiskReport .dash-tiles { display: flex; flex-direction: column; gap: var(--df-space-3); }
#founderRiskReport .dtile { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); padding: 16px 18px; }
#founderRiskReport .dtile-k { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--df-grey-400); font-weight: 600; margin-bottom: 12px; }
#founderRiskReport .score-tile__big { font-size: var(--df-font-size-2xl); font-weight: 600; line-height: 1; color: var(--df-text); }
#founderRiskReport .score-tile__of { font-size: var(--df-font-size-lg); font-weight: 400; color: var(--df-text-muted); }
#founderRiskReport .score-tile__label { font-size: var(--df-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--df-grey-400); margin: 4px 0 12px; }
#founderRiskReport .score-tile__legend { display: flex; flex-direction: column; gap: 6px; }
#founderRiskReport .score-tile__item { font-size: var(--df-font-size-sm); color: var(--df-text-muted); display: flex; align-items: center; gap: 7px; }
#founderRiskReport .score-tile__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
#founderRiskReport .score-tile__dot.ev { background: var(--df-success); } #founderRiskReport .score-tile__dot.as { background: var(--df-warning); } #founderRiskReport .score-tile__dot.ns { background: var(--df-danger); }
#founderRiskReport .ddist-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
#founderRiskReport .ddist-lab { font-size: var(--df-font-size-sm); color: var(--df-text-muted); width: 96px; }
#founderRiskReport .ddist-bar { flex: 1; height: 8px; background: var(--df-grey-100); border-radius: 4px; overflow: hidden; }
#founderRiskReport .ddist-fill { height: 100%; }
#founderRiskReport .ddist-fill.ev { background: var(--df-success); } #founderRiskReport .ddist-fill.as { background: var(--df-warning); } #founderRiskReport .ddist-fill.ns { background: var(--df-danger); }
#founderRiskReport .ddist-n { font-size: var(--df-font-size-md); font-weight: 600; width: 16px; text-align: right; }
#founderRiskReport .dtile-note { font-size: var(--df-font-size-sm); color: var(--df-text-muted); line-height: 1.5; margin-top: 10px; }
#founderRiskReport .dtile-note b { color: var(--df-text); font-weight: 600; }

@media (max-width: 1100px) {
  #founderRiskReport .summary, #founderRiskReport .ds-cols, #founderRiskReport .axes, #founderRiskReport .dash-hero { grid-template-columns: 1fr; gap: 22px; }
}

/* Pitch and PerfectDeck cockpits (row types pitchcockpit, ppdcockpit): shared chrome for both
   row types, scoped by .dfPitchCockpit on the cockpit root rather than a per-record id. Panel
   placement on the shared Lattice dashboard (df_lattice_dashboard) lives in the two row-type
   scripts; these rules are the in-panel grids (.score, .journey, .dims, .ev, .kv) and the card
   chrome around them. */
.dfPitchCockpit { font-family: Roboto, Helvetica, Arial, sans-serif; font-size: var(--df-font-size-md); line-height: 1.5; color: var(--df-text); background: var(--df-surface-sunken); padding: 18px 22px 30px; }
.dfPitchCockpit .lbl { font-family: Montserrat, Roboto, sans-serif; font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--df-grey-400); }
.dfPitchCockpit .pill { display: inline-block; font-family: Montserrat, Roboto, sans-serif; font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.dfPitchCockpit .p-green { background: var(--df-success-soft); color: var(--df-success); }
.dfPitchCockpit .p-amber { background: var(--df-warning-soft); color: var(--df-warning); }
.dfPitchCockpit .p-red { background: var(--df-danger-soft); color: var(--df-danger); }
.dfPitchCockpit .p-accent { background: var(--df-accent-soft); color: var(--df-accent); }
.dfPitchCockpit .p-critical { background: var(--df-critical-soft); color: var(--df-critical); }
.dfPitchCockpit .p-grey { background: var(--df-grey-100); color: var(--df-text-muted); }
.dfPitchCockpit .head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--df-border); margin-bottom: 18px; }
.dfPitchCockpit .head h1 { font-weight: 500; font-size: var(--df-font-size-2xl); line-height: 1.15; margin: 0 0 4px; }
.dfPitchCockpit .head .sub { color: var(--df-text-muted); }
.dfPitchCockpit .head .meta { display: flex; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.dfPitchCockpit .head .meta div { display: flex; flex-direction: column; gap: 2px; }
.dfPitchCockpit .head .meta b { font-weight: 500; }
.dfPitchCockpit .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dfPitchCockpit .btn { font-family: Montserrat, Roboto, sans-serif; font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border-radius: var(--df-radius-sm); border: 1px solid var(--df-border); background: var(--df-surface); color: var(--df-text); cursor: pointer; }
.dfPitchCockpit .btn.primary { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-surface); }
.dfPitchCockpit .btn:disabled { opacity: .55; cursor: not-allowed; }
.dfPitchCockpit .card { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: 16px 18px; min-width: 0; height: 100%; box-sizing: border-box; overflow: auto; }
.dfPitchCockpit .card h2 { font-family: Montserrat, Roboto, sans-serif; font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--df-text-muted); margin: 0 0 12px; }
.dfPitchCockpit .card h2 .unit { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--df-grey-400); }
.dfPitchCockpit .score { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.dfPitchCockpit .ring { position: relative; width: 140px; height: 140px; }
.dfPitchCockpit .ring svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.dfPitchCockpit .ring circle { stroke-width: 12px; }
.dfPitchCockpit .ring .ring-track { stroke: var(--df-grey-200); }
.dfPitchCockpit .ring .ring-fill { stroke: var(--df-accent); stroke-linecap: round; }
.dfPitchCockpit .ring .ring-invest { stroke: var(--df-critical); }
.dfPitchCockpit .ring .n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dfPitchCockpit .ring .n b { font-size: var(--df-font-size-2xl); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.dfPitchCockpit .ring .n span { font-size: var(--df-font-size-sm); color: var(--df-grey-400); margin-top: 4px; }
.dfPitchCockpit .band { font-size: var(--df-font-size-xl); font-weight: 500; margin: 0 0 2px; }
.dfPitchCockpit .band small { font-size: var(--df-font-size); color: var(--df-text-muted); font-weight: 400; margin-left: 8px; }
.dfPitchCockpit .gate { margin: 12px 0 0; padding: 10px 12px; background: var(--df-danger-soft); border-left: 4px solid var(--df-danger); border-radius: 0 var(--df-radius-sm) var(--df-radius-sm) 0; font-size: var(--df-font-size); }
.dfPitchCockpit .gate b { display: block; font-family: Montserrat, Roboto, sans-serif; font-size: var(--df-font-size-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--df-danger); margin-bottom: 2px; }
.dfPitchCockpit .tally { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.dfPitchCockpit .tally span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfPitchCockpit .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.dfPitchCockpit .dot-green { background: var(--df-success); }
.dfPitchCockpit .dot-amber { background: var(--df-warning); }
.dfPitchCockpit .dot-red { background: var(--df-danger); }
.dfPitchCockpit .avg { margin-top: 12px; font-size: var(--df-font-size); color: var(--df-text-muted); }
.dfPitchCockpit .journey { display: grid; grid-template-columns: repeat(10, 1fr); position: relative; margin-top: 4px; }
.dfPitchCockpit .journey:before { content: ""; position: absolute; left: 5%; right: 5%; top: 9px; height: 2px; background: var(--df-border); }
.dfPitchCockpit .journey div { position: relative; text-align: center; font-size: var(--df-font-size-xs); color: var(--df-grey-400); padding-top: 26px; line-height: 1.25; }
.dfPitchCockpit .journey div:before { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--df-surface); border: 2px solid var(--df-border); }
.dfPitchCockpit .journey div.done { color: var(--df-text-muted); }
.dfPitchCockpit .journey div.done:before { background: var(--df-accent); border-color: var(--df-accent); }
.dfPitchCockpit .journey div.stall { color: var(--df-critical); font-weight: 500; }
.dfPitchCockpit .journey div.stall:before { background: var(--df-critical); border-color: var(--df-critical); box-shadow: 0 0 0 4px var(--df-critical-soft); }
.dfPitchCockpit .dims { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; }
.dfPitchCockpit .dim { display: grid; grid-template-columns: 150px 1fr 26px; gap: 12px; align-items: center; font-size: var(--df-font-size); }
.dfPitchCockpit .dim .bar { height: 8px; background: var(--df-grey-100); border-radius: 99px; overflow: hidden; }
.dfPitchCockpit .dim .bar i { display: block; height: 100%; border-radius: 99px; }
.dfPitchCockpit .dim .v { font-variant-numeric: tabular-nums; text-align: right; color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.dfPitchCockpit .dim.red .bar i { background: var(--df-danger); }
.dfPitchCockpit .dim.amber .bar i { background: var(--df-warning); }
.dfPitchCockpit .dim.green .bar i { background: var(--df-success); }
.dfPitchCockpit .dim.gate .name { color: var(--df-danger); font-weight: 500; }
.dfPitchCockpit .dim .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfPitchCockpit .ev { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.dfPitchCockpit .ev .big { font-size: var(--df-font-size-2xl); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.dfPitchCockpit .ev .big small { font-size: var(--df-font-size-md); color: var(--df-grey-400); font-weight: 400; }
.dfPitchCockpit .meter { position: relative; height: 8px; background: var(--df-grey-100); border-radius: 99px; margin: 8px 0 6px; }
.dfPitchCockpit .meter i { position: absolute; left: 0; top: 0; height: 100%; background: var(--df-accent); border-radius: 99px; }
.dfPitchCockpit .meter em { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--df-critical); }
.dfPitchCockpit .note { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfPitchCockpit .tags { display: flex; gap: 14px; margin-top: 8px; font-size: var(--df-font-size-sm); color: var(--df-text-muted); flex-wrap: wrap; }
.dfPitchCockpit .tags .dot { margin-right: 5px; vertical-align: -1px; }
.dfPitchCockpit .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--df-font-size); }
.dfPitchCockpit .kv .lbl { padding-top: 3px; }
.dfPitchCockpit .kv b { font-weight: 500; }
.dfPitchCockpit .kv .src { color: var(--df-grey-400); font-size: var(--df-font-size-sm); margin-left: 6px; }
.dfPitchCockpit .est { display: flex; gap: 16px; align-items: baseline; }
.dfPitchCockpit .est b { font-size: var(--df-font-size-2xl); font-weight: 500; font-variant-numeric: tabular-nums; }
.dfPitchCockpit .est span { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.dfPitchCockpit .lines { margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--df-font-size); color: var(--df-text-muted); display: grid; gap: 3px; }
.dfPitchCockpit .lines li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--df-grey-100); padding-bottom: 3px; }
.dfPitchCockpit .lines li b { font-weight: 500; color: var(--df-text); font-variant-numeric: tabular-nums; }
.dfPitchCockpit .engage { display: grid; grid-template-columns: 4fr 8fr; gap: 18px; }
.dfPitchCockpit .release { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--df-border); }
.dfPitchCockpit .release p { margin: 0; font-size: var(--df-font-size); color: var(--df-text-muted); max-width: 60ch; }
.dfPitchCockpit .formhost { background: var(--df-grey-50); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); padding: 6px 6px 2px; }
.dfPitchCockpit .formhost label { font-family: Montserrat, Roboto, sans-serif; font-size: var(--df-font-size-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--df-grey-400); margin-bottom: 6px; }
.dfPitchCockpit .deck { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--df-font-size); }
.dfPitchCockpit .deck a { color: var(--df-accent); text-decoration: none; font-weight: 500; cursor: pointer; }

/* Integration flow "Test flow" popout (scripts/triggerIntegrationFlow.js): the intro line and
   the result panel, token colours only. The result text is muted by default and swaps to the
   --ok / --error modifier on the run's outcome. */
.dfIntflowTest-intro { margin: 0 0 var(--df-space-3); color: var(--df-text-muted); }
.dfIntflowTest-result {
	font-family: monospace;
	font-size: var(--df-font-size-sm);
	background: var(--df-surface-sunken);
	border: 1px solid var(--df-border);
	border-radius: var(--df-radius);
	padding: var(--df-space-3);
	min-height: 100px;
	max-height: 300px;
	overflow-y: auto;
	white-space: pre-wrap;
	color: var(--df-text-muted);
}
.dfIntflowTest-result--ok { color: var(--df-success); }
.dfIntflowTest-result--error { color: var(--df-danger); }

/* INTFLOW Performance panel (scripts/intflow_performance_panel.js) */
.dfIntflowPerf { display: flex; flex-direction: column; gap: var(--df-space-2); padding: var(--df-space-4); box-sizing: border-box; font-size: var(--df-font-size); color: var(--df-text); }
.dfIntflowPerf-toolbar { display: flex; align-items: center; gap: var(--df-space-4); }
.dfIntflowPerf-run { padding: var(--df-space-2) var(--df-space-4); border: 0; border-radius: 6px; background: var(--df-accent); color: var(--df-surface); cursor: pointer; }
.dfIntflowPerf-title { margin: var(--df-space-4) 0 0; font-weight: 500; }
.dfIntflowPerf-summary { margin: 0; }
.dfIntflowPerf-hint { margin: 0; color: var(--df-text-muted); }
.dfIntflowPerf-warning { margin: 0; color: var(--df-warning); }
.dfIntflowPerf-chart { min-height: 160px; height: 260px; }
.dfIntflowPerf-grid { height: 300px; min-height: 0; }
.dfIntflowPerf-gridSmall { height: 180px; }

/* Integration flow template library (PRODREQ-0000021, scripts/entity_intflow_library.js):
   a full-width popout with a category tabbar, a text filter and a card grid, each card
   with an inline trigger/steps preview before install. Token colours only. */
.dfIntflowLib { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.dfIntflowLib-toolbar { display: flex; align-items: center; gap: var(--df-space-4); padding: var(--df-space-3) var(--df-space-4); border-bottom: 1px solid var(--df-border); flex-shrink: 0; }
.dfIntflowLib-tabbar { flex: 1; min-width: 0; height: 40px; }
.dfIntflowLib-search { position: relative; width: 280px; flex-shrink: 0; }
.dfIntflowLib-search__icon { position: absolute; left: var(--df-space-3); top: 50%; transform: translateY(-50%); color: var(--df-text-muted); font-size: var(--df-font-size); pointer-events: none; }
.dfIntflowLib-search__input { width: 100%; box-sizing: border-box; padding: var(--df-space-2) var(--df-space-2) var(--df-space-2) calc(var(--df-space-4) + var(--df-space-2)); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm); font-size: var(--df-font-size); color: var(--df-text); outline: none; }
.dfIntflowLib-search__input:focus { border-color: var(--df-accent); }
.dfIntflowLib-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--df-space-4); padding: var(--df-space-4); align-content: start; box-sizing: border-box; }
.dfIntflowLib-empty { grid-column: 1 / -1; padding: var(--df-space-5, 24px); color: var(--df-text-muted); text-align: center; }
.dfIntflowLibCard { display: flex; flex-direction: column; gap: var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); padding: var(--df-space-4); }
.dfIntflowLibCard-head { display: flex; align-items: flex-start; gap: var(--df-space-3); }
.dfIntflowLibCard-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--df-radius-sm); background: var(--df-accent-soft); color: var(--df-accent); display: flex; align-items: center; justify-content: center; font-size: var(--df-font-size-lg); }
.dfIntflowLibCard-title { flex: 1; min-width: 0; }
.dfIntflowLibCard-name { font-weight: 600; font-size: var(--df-font-size-md); color: var(--df-text); }
.dfIntflowLibCard-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-space-1); margin-top: var(--df-space-1); }
.dfIntflowLibCard-offTag { font-size: var(--df-font-size-xs); font-weight: 600; color: var(--df-warning); background: var(--df-warning-soft); border-radius: var(--df-radius-sm); padding: 3px 8px; }
.dfIntflowLibCard-desc { font-size: var(--df-font-size); color: var(--df-text-muted); line-height: 1.5; }
.dfIntflowLibCard-actions { display: flex; gap: var(--df-space-2); margin-top: auto; }
.dfIntflowLibCard-actions .dfButton { flex: 1; }
.dfIntflowLibCard-preview { border-top: 1px solid var(--df-border); padding-top: var(--df-space-3); font-size: var(--df-font-size); color: var(--df-text); }
.dfIntflowLibCard-previewTrigger { margin-bottom: var(--df-space-2); }
.dfIntflowLibCard-steps { margin: 0; padding-left: var(--df-space-4); display: flex; flex-direction: column; gap: var(--df-space-1); }
.dfIntflowLibCard-stepsEmpty, .dfIntflowLibCard-previewError, .dfIntflowLibCard-previewLoading { margin: 0; color: var(--df-text-muted); }