/* Admin-only nav items and home cards — hidden for non-admin roles */
.admin-only-nav, .admin-only-card { display: none !important; }
body.is-admin .admin-only-nav { display: list-item !important; }
body.is-admin .admin-only-card { display: block !important; }

/* Push Log In / Log Out to the far right of the nav bar */
#navLogin, #navLogout { order: 999; margin-left: auto; }
/* Hide Log Out by default — nav.js shows it when a token exists */
#navLogout { display: none; }

/* =========================================================
   Tokuhn.com themed overrides for Brand Voice app
   Place this block at the END of style.css
   ========================================================= */
/* Palette + typography aligned with Tokuhn.com */
:root {
	/* Font Weights */
	--MP-font-weight-light: 300;
	--MP-font-weight-normal: 400;
	--MP-font-weight-medium: 500;
	--MP-font-weight-semi-bold: 600;
	--MP-font-weight-bold: 700;
	--MP-font-weight-bold-text: bold;

	/* Font Sizes - all px */
	--MP-font-size-xxs: 12px; /* very small labels, legal text */
	--MP-font-size-xs: 14px; /* small meta text */
	--MP-font-size-sm: 16px; /* body text */
	--MP-font-size-md: 18px; /* slightly larger body / lead */
	--MP-font-size-lg: 20px; /* small headings */
	--MP-font-size-xl: 24px; /* section headings */
	--MP-font-size-xxl: 32px; /* hero subheads */
	--MP-font-size-xxxl: 36px; /* hero subheads */
	--MP-font-size-huge: 40px; /* large hero text */
	--MP-font-size-giant: 50px; /* big hero text */
	--MP-font-size-massive: 60px; /* max hero / key number */

	/* Print-equivalent sizes converted to px */
	--MP-font-size-print-small: 32px; /* 24pt ? 32px */
	--MP-font-size-print-large: 80px; /* 60pt ? 80px */

	/* Fonts */
	--MP-primary-font: "Space Grotesk", sans-serif;
	--MP-secondary-font: "inter", sans-serif;

	/* Colors */

	/* Base theme tokens used below */
	--page-bg-top: #000428;
	--page-bg-bottom: #000000;
	--text-main: #fafafa;
	--text-color: #fafafa;
	--text-muted: #b3b3b3;
	--surface-bg: #171718;
	--surface-border: rgba(255, 255, 255, 0.08);
	--primary-color: #00ff15;
	--primary-color-hover: #44ff5a;
	--secondary-color: #2979ff;

	/* Solid Colors */
	--MP-charcoal-gray: #171718;
	--MP-vibrant-azure: #0e1457;
	--MP-deep-navy: #263238;
	--MP-royal-indigo: #63042d;
	--MP-bright-azure: #2979ff;
	--MP-off-white: #fafafa;
	--MP-royal-indigo-dark: #5c4ebc;
	--MP-tangerine: #ff7043;
	--MP-secondary-gray: #b0b0b0;
	--MP-crimson-red: #d32f2f;
	--MP-solar-gold: #ffa500;
	--MP-magenta: #aa04c4;
	--MP-magenta-op: #aa04c4c3;
	--MP-lime-green: #00ff15;
	--MP-vivid-pink: #fb91ff;
	--MP-aqua-blue: #91fffd;
	--MP-bright-orange: #f04b0b;
	--MP-fresh-green: #82ac2d;
	--MP-purple-vivid: #450976;
	--MP-fuchsia: #e32aa0;
	--MP-soft-pink: #ff74c4;

	/* Card 1 */
	--MP-card-one-one: #222437;
	--MP-card-one-two: #5a3a82;

	/* Card 2 */
	--MP-card-two-one: #3c264b; /* inky grape */
	--MP-card-two-two: #5c0d40; /* berry magenta */

	/* Card 3 */
	--MP-card-three-one: #2a1746;
	--MP-card-three-two: #532a7a;

	/* Card 4 */
	--MP-card-four-one: #24122f; /* deep plum */
	--MP-card-four-two: #7b1e63; /* cool raspberry */

	/* Card 5 */
	--MP-card-five-one: #1c0621; /* cool eggplant */
	--MP-card-five-two: #7a0350;

	--MP-soft-green: hsl(49, 100%, 85%);
	--MP-lime-yellow: hsl(49, 100%, 39%);
	--MP-teal: #a2fff4;
	--MP-teal-dark: #1a786a;
	--MP-soft-blue: #bdcbff;
	--MP-blue-deep: #3e64d9;
	--MP-soft-pink-bright: #ffb6fb;
	--MP-pink-deep: #c14dbf;
	--MP-sky-blue: #ade8ff;
	--MP-azure-deep: #3189d2;
	--MP-neon-green: #d6ff3e;
	--MP-gold: #f9a825;
	--MP-dusty-gray: #625d5d;
	--MP-light-blue: #7ccceb;
	--MP-dark-red: #3a0d0d;
	--MP-deep-purple: #150326;
	--MP-forest-green: #092613;
	--MP-navy-soft: #2a4b5f;
	--MP-bright-purple: #901fed;
	--MP-burnt-orange: #ff5500;
	--MP-gold-muted: #d4c672;
	--MP-violet: #7366ff;
	--MP-dark-violet: #1e1e3e;

	/* Gradients */
	--MP-gradient-lime: linear-gradient(135deg, #dcef75, #a9c736);
	--MP-gradient-teal: linear-gradient(135deg, #38bcac, #1a786a);
	--MP-gradient-blue: linear-gradient(135deg, #7893f5, #3e64d9);
	--MP-gradient-pink: linear-gradient(135deg, #f892f3, #c14dbf);
	--MP-deep-navy-gradient: linear-gradient(135deg, #263238, #1a252c);
	--MP-gradient-sky-blue: linear-gradient(135deg, #6cccf3, #3189d2);

	/* Cards */

	--radius-lg: 2px;
	--radius-md: 2px;
	--radius-sm: 2px;
	--shadow-soft: 0 14px 42px rgba(0, 0, 0, 0.45);
	--shadow-card: 0 10px 26px rgba(0, 0, 0, 0.35);
	--maxw: 1200px;
	--page-border-rgb: 0, 255, 21;
}

html {
	height: 100vh;
	background: black;
	overflow-x: hidden;
}
/* Global base */
html,
body {
	font-family: var(--MP-primary-font);
	background-image: url("https://d4eiqayun4uge.cloudfront.net/media/mp/images/grafittiDark5studio.png");
	background-image: image-set(
		url("https://d4eiqayun4uge.cloudfront.net/media/mp/images/grafittiDark5studio_v2.webp") type("image/webp"),
		url("https://d4eiqayun4uge.cloudfront.net/media/mp/images/grafittiDark5studio.png") type("image/png")
	);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--text-main);
	margin: 0;
	padding: 0;
	background-attachment: fixed;
}
body::before {
	/* Controllable darkness layer */
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

body[data-page="login"] {
	--page-border-rgb: 77, 163, 255;
}

body[data-page="dashboard"] {
	--page-border-rgb: 255, 193, 77;
}

body[data-page="radar"] {
	--page-border-rgb: 0, 214, 170;
}

body[data-page="lidar"] {
	--page-border-rgb: 0, 220, 255;
}

body[data-page="xray"] {
	--page-border-rgb: 255, 77, 196;
}

body[data-page="pi14"] {
	--page-border-rgb: 160, 120, 255;
}

body[data-page="iykyk"] {
	--page-border-rgb: 255, 140, 64;
}

body[data-page="po7"] {
	--page-border-rgb: 120, 255, 90;
}

body[data-page="cro"] {
	--page-border-rgb: 255, 99, 132;
}
strong {
	color: white;
} /* ============================================================
   GLOBAL SCROLLBAR STYLING - High Visibility / Dark Mode
   ============================================================ */

/* 1. The Scrollbar Track (The road) */
::-webkit-scrollbar {
	width: 10px; /* Vertical scrollbar width */
	height: 10px; /* Horizontal scrollbar height */
}

/* 2. The Track Background */
::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.3); /* Dark track to recede */
	border-radius: 4px;
}

/* 3. The Scrollbar Thumb (The car) */
::-webkit-scrollbar-thumb {
	/* Uses your secondary gray but semi-transparent */
	background-color: rgba(176, 176, 176, 0.4);
	border-radius: 4px;
	border: 2px solid transparent; /* Creates padding around the thumb */
	background-clip: content-box; /* Ensures the border works as padding */
}

/* 4. Hover State (Make it light up when user interacts) */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--MP-lime-green); /* Highlights in your brand green */
}

/* 5. Firefox Support (Standard Property) */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(176, 176, 176, 0.4) rgba(0, 0, 0, 0.3);
}

.section strong {
	color: var(--text-main);
	font-weight: var(--MP-font-weight);
}

.brand-documents-title .highlight {
	color: var(--text-muted);
	font-weight: var(--MP-font-weight-bold);
}

/* Central content width: flex so you can rearrange */
/* Single column by default, easy to split later with classes/media queries */
main {
	max-width: 1200px;
	margin: 40px auto 80px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
}

h4 {
	font-family: var(--MP-secondary-font);
}
.bv-register-section {
	max-width: 420px;
	display: flex;
	flex-direction: column;
	justify-self: center;
	align-self: center;
}

/* Optional helper for 2-column layouts on wide screens */
.bv-layout-two-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ============================
   Outcomes strip on home page
   ============================ */

.bv-outcomes {
	margin-top: 24px;
	padding: 24px 22px 28px;

	border-radius: 22px;

	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 550px;
}

.bv-outcomes-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bv-outcomes-kicker {
	font-size: var(--MP-font-size-xxs);
	font-weight: var(--MP-font-weight-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.bv-outcomes-header h3 {
	font-size: var(--MP-font-size-lg);
	font-weight: var(--MP-font-weight-semi-bold);
	margin: 0;
}

/* Cards grid */
.bv-outcomes-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.bv-outcome-card {
	padding: 16px 18px;
	border-radius: 18px;
	border: 1px solid var(--surface-border);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.75);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bv-outcome-card h4 {
	font-size: var(--MP-font-size-md);
	font-weight: var(--MP-font-weight-semi-bold);
	margin: 0;
}

.bv-outcome-card p {
	font-size: var(--MP-font-size-xs);
	color: var(--text-muted);
	margin-top: 20px;
}

.bv-button-frame {
	display: flex;
	justify-content: right;
	margin-top: 12px;
	gap: 10px;
}
/* Subtle color variation per card using existing Tokuhn gradients */

.bv-outcome-card-0 {
	background-color: black;
}
.bv-outcome-card-1 {
	background-color: black;
}

.bv-outcome-card-2 {
	background-color: black;
}

.bv-outcome-card-3 {
	background-color: black;
}

.bv-outcome-card-4 {
	background-color: black;
}

.bv-outcome-card-5 {
	background-color: black;
}

/* Reset headings to match Tokuhn visual weight */
h1,
h2,
h3 {
	font-family: "Space Grotesk", var(--MP-primary-font), system-ui, sans-serif;
	font-weight: var(--MP-font-weight-semi-bold);
	letter-spacing: 0.02em;
	color: var(--text-main);
	margin-top: 0;
}

/* Paragraphs and small text */
p,
label,
li,
span,
small {
	color: var(--text-main);
}

/* Muted explanatory text */
.bv-validation,
.bv-criteria,
small {
	color: var(--text-muted);
}

/* -------------------------
   Header: Tokuhn nav look
   ------------------------- */
.bv-header {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(23, 23, 24, 0);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	align-items: center;
	justify-content: space-between;
	padding: 14px 40px;
	min-height: 64px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}

/* Remove old brush image */
.header-image {
	display: none;
}

/* Header title */
.bv-header h1 {
	margin: 0;
	font-size: var(--MP-font-size-lg);
	font-weight: var(--MP-font-weight-semi-bold);
	letter-spacing: 0.12em;
	color: var(--text-main);
	display: none;
}

/* Header nav */
.bv-header nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	justify-content: center;
	flex-wrap: nowrap;
}

.bv-header nav li {
	margin: 0;
}

.bv-header nav a {
	text-decoration: none;
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-medium);
	color: var(--text-muted);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition:
		color 0.18s ease,
		border-color 0.18s ease;
}

a {
	text-decoration: none;
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-medium);
	color: var(--MP-magenta);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition:
		color 0.18s ease,
		border-color 0.18s ease;
}

.xray-report-table a {
	text-decoration: none;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 300;
	color: var(--MP-magenta);
	letter-spacing: 0.03em;
	text-transform: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition:
		color 0.18s ease,
		border-color 0.18s ease;
}
#ID_LIDAR_TBODY a {
	color: var(--MP-lime-green);
}

#ID_RADAR_HISTORY_TBODY a {
	color: var(--MP-lime-green);
}	

.bv-header nav a:hover,
.bv-header nav a:focus-visible {
	color: var(--MP-lime-green) !important;
	border-color: var(--primary-color);
}

/* Active nav link (current page) */
.bv-header nav a.nav-active-link {
	color: var(--MP-lime-green) !important;
	border-bottom: 2px solid var(--MP-lime-green);
}

#navTokuhn span {
	margin-bottom: 2px;
}

.bv-header nav a.nav-tokuhn-link {
	display: block;
	align-items: center;
	padding-bottom: 0px;
	color: var(--MP-lime-green) !important;
	white-space: nowrap;
}

.nav-tokuhn-icon {
	width: 14px;
	height: 14px;
	object-fit: contain;
	flex: 0 0 auto;
	padding-right: 4px;;
}

/* ---- Hamburger button ---- */
.nav-hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	z-index: 1001;
	position: relative;
}

.nav-hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--text-main);
	margin: 5px 0;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

.nav-hamburger.is-active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.is-active span:nth-child(2) {
	opacity: 0;
}

.nav-hamburger.is-active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Compact nav: hide "ROOM" suffix before hamburger kicks in ---- */
/* ---- Mobile nav ---- */
/* -------------------------
   Hero section
   ------------------------- */
.bv-hero {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 28px;
	margin-top: 32px;

	border-radius: 24px;

	align-items: center;
	max-width: 550px;
}

.bv-hero h2 {
	font-size: var(--MP-font-size-xxl);
	margin-bottom: 4px;
	justify-items: flex-start;
	width: 100%;
}

.bv-hero p {
	font-size: var(--MP-font-size-sm);
	max-width: 640px;
	color: var(--text-muted);
	justify-items: flex-start;
}

/* Optional highlight spans inside hero text */
.bv-hero .highlight-lime {
	color: var(--primary-color);
	font-weight: var(--MP-font-weight-semi-bold);
}

#ID_LOGGED_IN_STATUS {
	text-transform: uppercase;
}
/* -------------------------
   Sections and cards - flex containers
   ------------------------- */
#survey-container,
#survey-list-container,
#createSurveySection,
#image-survey-container {
	margin-top: 32px;
	padding: 24px 22px;
	background:
		radial-gradient(
			circle at top left,
			rgba(11, 89, 1, 0.12),
			transparent 55%
		),
		linear-gradient(145deg, #171718, #101017);
	border-radius: 22px;
	border: 1px solid var(--surface-border);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
}

.generated-section-annotated-subcontainer {
	display: flex;
	flex-direction: column;
	margin: 18px 0;
	background-color: rgba(0, 0, 0, 0.35);
	padding: 16px;
	border-radius: 2px;
}

#artifact-viewer,
.bv-content-section,
.bv-login-section,
.bv-survey-section,
.bv-register-section,
.bv-section-container {
	margin-top: 32px;
	padding: 24px 22px;
	background:
		radial-gradient(
			circle at top left,
			rgba(170, 4, 196, 0.12),
			transparent 55%
		),
		linear-gradient(145deg, #171718, #101017);
	border-radius: 22px;
	border: 1px solid var(--surface-border);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
}

/* Simple stacked containers you can re-style later */
#qa-selection {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#sectionsList {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

/* Headings inside sections */
#survey-container h2,
#survey-list-container h2,
#createSurveySection h2,
#image-survey-container h2,
#artifact-viewer h2,
.bv-content-section h2,
.bv-login-section h2 {
	font-size: var(--MP-font-size-xl);
	margin-bottom: 12px;
}

.bv-login-section .bv-button {
	max-width: 200px;
}

/* Links that act like text CTAs */
.bv-link {
	color: var(--secondary-color);
	font-weight: var(--MP-font-weight-medium);
	text-decoration: none;
	border-bottom: 1px dashed rgba(41, 121, 255, 0.7);
	padding-bottom: 1px;
	transition:
		color 0.16s ease,
		border-color 0.16s ease;
}

.bv-link:hover {
	color: var(--primary-color);
	border-color: rgba(0, 255, 21, 0.8);
}

/* Dashboard visual section */
.bv-dashboard-visual {
	margin-top: 32px;
	padding: 18px 20px;
	border-radius: 20px;
	border: 1px dashed var(--surface-border);
	background: linear-gradient(135deg, #141518, #1b1c22);
}

/* Question list and boxes */
/* ============================
   Brand survey question layout
   ============================ */

/* Outer shell for a single question */
.bv-question-list {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.master-question-container {
	margin-top: 24px;
	padding: 18px 20px;
	border-radius: 18px;
	border: 1px solid var(--surface-border);
	background: linear-gradient(145deg, #0b0b10, #151527);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.master-answer-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* 1) Question header (read-only, primary) */
.question-box label {
	display: block;
	font-size: var(--MP-font-size-xl);
	font-weight: var(--MP-font-weight-semi-bold);
	margin: 0;
}

.question-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.question-status-pill {
	font-size: 16px;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.question-status-pill.status-empty {
	color: var(--text-muted);
	border-color: rgba(255, 255, 255, 0.18);
}

.question-status-pill.status-saved {
	color: #050505;
	background-color: var(--MP-lime-green);
	border-color: var(--MP-lime-green);
}

.question-status-pill.status-dirty {
	color: #f9a825;
	border-color: #f9a825;
}

/* 2) Example answer (helper, read-only) */
.example-answer-box {
	padding: 10px 12px;
	border-radius: 2px;
	background-color: #08080d00;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.example-answer-box label {
	font-size: var(--MP-font-size-xs);
	color: var(--text-muted);
}

.example-answer-box .example-answer {
	width: 100%;
	border-radius: 8px;
	border: none;
	background-color: #05050900;
	padding: 8px 10px;
	font-size: var(--MP-font-size-sm);
	color: var(--text-muted);
}

/* 3) Merchant answer (editable, primary action) */
.answer-container {
	padding: 12px 12px;
	border-radius: 2px;
	border: 1px solid rgba(0, 255, 21, 0.45);
	background-color: #05050900;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.answer-container label {
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-medium);
	display: flex;
	justify-content: space-between;
}
.answer-container label span.instructions {
	font-size: var(--MP-font-size-xxs);
	color: var(--text-muted);
}

.answer-container .merchant-answer {
	width: 100%;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background-color: #09091400;
	padding: 10px 12px;
	font-size: 18px;
	color: var(--text-main);
	font-family: "Poppins", system-ui, sans-serif;
}

/* Buttons below merchant answer */
.button-container {
	margin-top: 6px;
	display: flex;
	gap: 10px;
}

.xray-input-shell .button-container {
	margin-top: 15px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

#ID_XRAY_STATUS {
	display: none;
}

/* 4) AI feedback (read-only, secondary) */
/* AI Feedback Box */
.ai-feedback-box {
	border-radius: 5px;
	border: none;
}

/* Feedback textarea */
.ai-feedback-box .ai-feedback {
	width: 100%;
	min-height: 80px; /* baseline height */
	height: auto; /* let JS control it */
	border: none;
	border-radius: 8px;
	resize: none;
	overflow-y: hidden; /* no scrollbar, height grows instead */
	background-color: #05050900; /* whatever you like */
	padding: 10px 12px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: var(--MP-font-size-sm);
	color: var(--text-muted);
}

.ai-feedback-box label {
	font-size: var(--MP-font-size-xs);
	color: var(--text-muted);
}

/* 5) Prompt / expert notes (tertiary, creator-only) */
.prompt-container {
	padding: 10px 12px;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: #04030900;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.prompt-container label {
	font-size: var(--MP-font-size-xxs);
	color: var(--text-muted);
}

.prompt-container .prompt-input {
	width: 100%;
	min-height: 80px;
	border-radius: 8px;
	border: none;
	background-color: #05030900;
	padding: 8px 10px;
	font-size: var(--MP-font-size-xxs);
	color: var(--text-muted);
}

/* -------------------------
   Forms and inputs
   ------------------------- */
.bv-form {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 12px;
}

.bv-field-container {
	display: flex;
	flex-direction: column;
	gap: 6px; /* space between label and input/select */
	margin-bottom: 25px; /* More space between input groups */
}

.bv-form label {
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-medium);
	color: var(--text-main);
}

.bv-form input[type="text"],
.bv-form input[type="email"],
.bv-form input[type="password"],
.bv-form input[type="file"],
.bv-form textarea,
.bv-form select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
	width: 100%;
	background-color: var(--surface-bg);
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 10px 12px;
	font-size: var(--MP-font-size-sm);
	color: var(--text-main);
	box-sizing: border-box;
	outline: none;
	transition:
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		background-color 0.16s ease;
}

#ID_INPUT_STORE,
#ID_PO_TIER_SELECT {
	margin-bottom: 20px;
}

.bv-form textarea,
textarea {
	min-height: 140px;
	resize: vertical;
}

.bv-form input:focus,
.bv-form textarea:focus,
.bv-form select:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--MP-magenta);
	box-shadow: 0 0 0 1px rgba(170, 4, 196, 0.45);
}

/* Custom file upload label */
.custom-file-upload {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.1rem;
	border-radius: 999px;
	background: rgba(23, 23, 24, 1);
	border: 1px solid var(--surface-border);
	color: var(--text-main);
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-medium);
	cursor: pointer;
}

/* Hide default file input */
input[type="file"] {
	display: none;
}

/* Visual review container */
.visual-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-top: 12px;
}

/* -------------------------
   Buttons
   --------------------------- */
.bv-button,
button,
.bv-submit-container button,
#ID_BV_contentForm button,
#ID_BV_brandSurveyForm button,
#imageSurveyForm button,
#createSurveySection button,
#ID_createSurveyForm button,
#ID_editSurveyForm button,
#ID_customerSurveyForm button,
#loginForm button,
#btnDownloadJson,
#btnDownloadAiBrief,
#btnGenerateAiBrief,
#btnCopyToClipboard,
.card-json .card-actions .bv-button {
	background: var(--MP-lime-green);
	color: #000000;
	font-family: var(--font-heading);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 16px;
	border: none;
	border-radius: 2px;
	padding: 9px 18px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.2s ease;
	box-shadow: 4px 4px 0px #000000;
}

#btnViewLastRun {
	background-color: var(--MP-lime-green);
}
#btnViewLastRun:hover {
	background-color: var(--MP-lime-green);
	color: black;
}

.cockpit-card button {
	max-width:125px;
	font-family: var(--MP-primary-font);
	box-shadow: 0px 0px 0px #000000;
}

.cockpit-card button:hover {
	background-color: var(--MP-lime-green);
	font-family: var(--MP-primary-font);
	color: black;
	box-shadow: 0px 0px 0px #000000;
}

.bv-button:hover,
.bv-submit-container button:hover,
#ID_BV_contentForm button:hover,
#ID_BV_brandSurveyForm button:hover,
#imageSurveyForm button:hover,
#createSurveySection button:hover,
#ID_createSurveyForm button:hover,
#ID_editSurveyForm button:hover,
#ID_customerSurveyForm button:hover,
#loginForm button:hover,
#btnDownloadJson button:hover,
#btnDownloadAiBrief button:hover,
#btnGenerateAiBrief button:hover,
#btnCopyToClipboard button:hover {
	filter: brightness(1.08);
	transform: scale(1.03);
}

.bv-button:active,
.bv-submit-container button:active,
#ID_BV_contentForm button:active,
#ID_BV_brandSurveyForm button:active,
#imageSurveyForm button:active,
#createSurveySection button:active,
#ID_createSurveyForm button:active,
#ID_editSurveyForm button:active,
#ID_customerSurveyForm button:active,
#loginForm button:active,
#btnDownloadJson button:active,
#btnDownloadAiBrief button:active,
#btnGenerateAiBrief button:active,
#btnCopyToClipboard button:active {
	transform: translateY(0) scale(0.98);
}

button {
	transition:
		transform 0.06s ease-in-out,
		box-shadow 0.12s ease,
		filter 0.12s ease;
}

/* Submit container alignment */
.bv-submit-container {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
/* Floating Brand Documents panel (bottom-left) */
.brand-documents-panel {
	width: 100%;
	backdrop-filter: blur(8px);
	max-width: 1200px;
	margin: 0px auto 0px;
	padding: 0 24px 0px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	box-sizing: border-box;
}

/* Title row */
.brand-documents-title {
	margin: 0;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin-top: 30px;
	margin-bottom: -30px;
}

/* List container */
.brand-documents-list {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	overflow-y: auto;
	padding-right: 0.25rem;
}

/* Each doc row */
.brand-document-card {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 0.35rem 0.4rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
}

.brand-document-card.disabled {
	opacity: 0.5;
}

/* Doc name */
.brand-document-title {
	font-size: 0.82rem;
	color: #f8f8f8;
}

/* Status pill */
.brand-document-status {
	font-size: 0.72rem;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* Example status colors */
.brand-document-status--missing {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(250, 250, 250, 0.7);
}

.brand-document-status--ready {
	background: rgba(0, 180, 120, 0.2);
	color: #7df5c9;
}

.brand-document-status--generating {
	background: rgba(255, 189, 67, 0.22);
	color: #ffd48a;
}

/* Actions (Generate / View buttons) */
.brand-document-actions {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.bv-hero-logo-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
	position: relative;
	overflow: hidden;
}

/* ── Background video layer ── */
.studio-video-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	overflow: hidden;
}

.studio-video-bg video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: -1;
	opacity: 1;
}

.studio-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.65);
	transition: background 3s ease;
}

.studio-video-overlay.fade-to-black {
	background: rgba(0, 0, 0, 1);
}

/* Push all sibling content above the video layer */
.bv-hero-logo-container > *:not(.studio-video-bg) {
	position: relative;
	z-index: 1;
}

.brand-document-actions button {
	border: none;
	border-radius: 999px;
	font-size: 0.72rem;
	padding: 0.2rem 0.6rem;
	cursor: pointer;
	line-height: 1.3;
	background: #a020f0;
	color: #ffffff;
	transition:
		transform 0.1s ease,
		box-shadow 0.1s ease,
		background 0.1s ease;
}

.brand-document-actions button:hover {
	background: #bc47ff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.brand-document-actions button:disabled {
	opacity: 0.5;
	cursor: default;
	transform: none;
	box-shadow: none;
}
/* Floating panel */
.survey-progress-floating {
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 1100;
	color: #ffffff;
	padding: 12px 16px;
	font-size: 13px;
	width: 100%;
}

/* --- Brand survey - floating progress details --- */

#ID_BV_surveyProgress {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.survey-progress-main {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.4rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
}

#survey-progress-count,
#survey-progress-unsaved {
	font-size: var(--MP-font-size-xxs);
	color: var(--text-muted);
	white-space: nowrap;
}

#survey-save-all-exit {
	flex: 1;
	border: none;
	border-radius: 2px;
	padding: 0.5rem;
	background: var(--MP-lime-green);
	color: black;
	font-size: var(--MP-font-size-xs);
	cursor: pointer;
	max-width: 350px;
}

#survey-save-all-exit:hover {
	background: var(--MP-charcoal-gray);
	color: white;
}

/* Rows for document and interview */
.survey-progress-row {
	display: none;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.survey-progress-label {
	font-size: var(--MP-font-size-xxs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	flex: 0 0 auto;
}

.survey-progress-value {
	font-size: var(--MP-font-size-xs);
	font-weight: 600;
	color: var(--text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.survey-progress-meta {
	font-size: var(--MP-font-size-xxs);
	color: var(--text-muted);
	opacity: 0.9;
}

/* Optional status dot if you wire it */
.survey-progress-status-dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--surface-border);
	margin-left: 4px;
}

.survey-progress-status-dot.complete {
	background: var(--primary-color);
}

.survey-progress-status-dot.pending {
	background: var(--text-muted);
	opacity: 0.7;
}

/* Right side - nav buttons */
.survey-progress-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.survey-progress-button,
#ID_BV_prevInterviewer,
#ID_BV_nextInterviewer {
	border-radius: 999px;
	border: 1px solid var(--surface-border);
	background: rgba(15, 15, 16, 0.9);
	color: var(--text-main);
	font-size: var(--MP-font-size-xxs);
	padding: 4px 10px;
	cursor: pointer;
	white-space: nowrap;
}

/* Emphasize "Next interview" if you give it a class */
.survey-progress-controls .next-interview-btn,
#ID_BV_nextInterviewer {
	border-color: var(--primary-color);
	background: rgba(160, 32, 240, 0.08);
}

.survey-progress-button:hover:not(:disabled),
#ID_BV_prevInterviewer:hover:not(:disabled),
#ID_BV_nextInterviewer:hover:not(:disabled) {
	background: rgba(40, 40, 42, 0.95);
}

.survey-progress-button:disabled,
#ID_BV_prevInterviewer:disabled,
#ID_BV_nextInterviewer:disabled {
	opacity: 0.4;
	cursor: default;
}

#ID_BV_createSurveyForm {
	display: flex;
	gap: 20px;
}

/* -------------------------
   Lists and survey list
   ------------------------- */
#survey-list {
	list-style: none;
	padding: 0;
	margin: 12px 0 0 0;
}

#survey-list li {
	padding: 10px 12px;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	background: linear-gradient(135deg, #181820, #15151c);
	color: var(--text-main);
	font-size: var(--MP-font-size-sm);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

/* -------------------------
   Login section specific
   ------------------------- */
.bv-login-section {
	max-width: 420px;
	margin: 64px auto 0;
}

/* -------------------------
   Footer
   ------------------------- */
.bv-footer {
	display: none;
	position: static;
	bottom: 0;
	right: 0;
	max-width: 1200px;
	margin: 0 auto 32px;
	padding: 16px 24px 0 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--text-muted);
	font-size: var(--MP-font-size-xxs);
	text-align: right;
	opacity: 0.9;
	box-sizing: border-box;
	background: transparent;
}

/* ---- Cockpit build modal (shows cockpit grid while docs are generating) ---- */
body.no-scroll {
	overflow: hidden;
}

body.dashboard-brief-open {
	overflow: hidden;
}

.cockpit-build-modal-content {
	max-width: 1200px;
}

.cockpit-build-modal-body {
	padding: 18px;
}

.cockpit-build-modal-body .cockpit-grid {
	margin-top: 0;
}

#aiBriefTextarea {
	margin-top: 30px;
	margin-bottom: 30px;
}

/* ============================
   Brand Cockpit (Dashboard)
   ============================ */

#card-persona-2,
#card-persona-3 {
	display: none;
}

.cockpit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 20px;
	max-width: 1260px;
}

.cockpit-card {
	background: rgba(57, 57, 57, 0.5);
	border: 1px solid;
	border-radius: 2px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition:
		transform 0.2s,
		border-color 0.2s;
	position: relative; /* Ensure overlay sits inside */
	overflow: hidden; /* Clip the overlay */
	font-family: var(--MP-primary-font);
}

.cockpit-card:hover {
	border-color: var(--primary-color);
	transform: translateY(-2px);
}

/* Header area of card */
.card-header {
	margin-bottom: 16px;
	justify-items: center;
}

#card-json .card-header {
	display: none;
}

.card-header h3 {
	margin: 0 0 8px 0;
	font-size: 1.1rem;
	color: var(--text-main);
}

.card-meta {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin: 0 0 16px 0;
	line-height: 1.4;
	max-width: 300px;
}

/* Progress Bar */
.progress-container {
	margin-bottom: 12px;
}

.progress-track {
	background: rgba(255, 255, 255, 0.1);
	height: 6px;
	border-radius: 3px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--MP-magenta);
	width: 0%;
	transition: width 0.6s ease-out;
}

.status-text {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	margin-top: 6px;
	display: block;
}

.card-actions-container {
	display: flex;
	flex-direction: row;
	gap: 12px;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}

.card-actions-container .bv-button {
	max-width: 300px;
	margin-bottom: 10px;
}

/* Card Actions (Bottom) */
.card-actions {
	display: flex;
	gap: 10px;
	margin-top: auto;
	justify-content: flex-end;
}

.card-actions .bv-button {
	flex: 1;
	font-size: 0.75rem;
	padding: 0.4rem;
	max-width: 90px;
}

.btn-secondary {
	color: black;
}

.btn-secondary:hover {
	border-color: var(--text-main);
	color: var(--text-main);
	background: rgba(255, 255, 255, 0.05);
}

/* URL Jumpstart Section */
.url-jumpstart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	background: rgba(0, 0, 0, 0.3);
}

.url-input-row {
	display: flex;
	gap: 12px;
	flex-direction: row;
	flex-wrap: nowrap;
}

#ID_RADAR_INPUT {
	min-width: 600px;
	width: 600px;
	margin-left: 24px;
}

.url-input-row-inner {
	width: 100%;
	justify-items: center;
}

.url-input-row input {
	flex: 1;
	background: rgba(0, 0, 0, 0.3);
}

.room-input-shell {
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		inset 0 0 0 1px rgba(var(--page-border-rgb), 0.14),
		0 10px 22px rgba(0, 0, 0, 0.35);
}

.room-input-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.room-input-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.room-input-status {
	color: rgba(var(--page-border-rgb), 0.95);
}

.room-input-shell .btn.btnGhost,
.room-input-shell .bv-button.btn-secondary {
	border-color: rgba(var(--page-border-rgb), 0.45);
}

#ID_PO_TOP_SUBCONTAINER .url-input-row {
	width: 100%;
	justify-content: space-between;
	margin-top: 10px;
	flex-wrap: wrap;
}

#ID_PO_TEST {
	display: none;
	margin-top: 20px;
}

/* JSON Reward Card (The Goal) */
.card-json {
	background: rgba(57, 57, 57, 0.5);
}

.card-json h3 {
	color: white;
}

/* Locked state: dim tile and block clicks */
.card-json.locked {
	opacity: 0.5;
	filter: grayscale(0.8);
	pointer-events: none;
}

/* Unlocked state: normal interactions */
.card-json:not(.locked) {
	opacity: 1;
	filter: none;
	pointer-events: auto;
}

/* Brand Book & AI Brief buttons inside the tile */
.card-json .card-actions {
	margin-top: 24px;
	display: flex;
	gap: 16px;
}

.card-json .card-actions .bv-button:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
	background: linear-gradient(
		90deg,
		var(--MP-hot-pink),
		var(--MP-vivid-purple)
	);
}

.card-json .card-actions .bv-button:disabled {
	opacity: 0.6;
	cursor: default;
	box-shadow: none;
}

/* When locked, visually de-emphasize the buttons */
/* Only grey-out actual disabled buttons */
.bv-button:disabled {
	background: #333;
	cursor: not-allowed;
}

/* ============================
   Card Loading State (Spinner)
   ============================ */

/* The Overlay */
.card-loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(18, 18, 20, 0.85);
	backdrop-filter: blur(4px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.cockpit-card.generating .card-loading-overlay {
	opacity: 1;
	pointer-events: all;
}

/* The Spinner */
.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(255, 0, 217, 0.1);
	border-left-color: var(--MP-magenta);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 12px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.loading-text {
	font-size: 0.85rem;
	color: var(--MP-magenta);
	letter-spacing: 0.05em;
	animation: pulse 1.5s ease-in-out infinite;
	margin-left: 20px;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* ============================
   Document Viewer Modal
   ============================ */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(5px);
	z-index: 2000;
	display: none; /* Hidden by default */
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

#cockpitBuildModal {
	z-index: 2000;
}

#docModal {
	z-index: 2100;
}

.modal-overlay.open {
	display: flex;
	opacity: 1;
}

.modal-content {
	background: #1e1e24;
	border: 1px solid var(--surface-border);
	border-radius: 2px;
	width: 90%;
	max-width: 900px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	transform: scale(0.95);
	transition: transform 0.3s ease;
}

.modal-overlay.open .modal-content {
	transform: scale(1);
}

.modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid var(--surface-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 16px 16px 0 0;
}

.modal-header h3 {
	margin: 0;
	font-size: 1.25rem;
	color: var(--text-main);
}

.modal-body {
	padding: 30px 40px; /* Generous padding for readability */
	overflow-y: auto;
	color: var(--text-main);
	font-size: 1rem;
	line-height: 1.7;
	background-color: #121214; /* Darker read background */
	border-radius: 0 0 16px 16px;
}

/* Typography within the document */
.modal-body h1,
.modal-body h2,
.modal-body h3 {
	margin-top: 1.5em;
	color: var(--primary-color);
}
.modal-body p {
	margin-bottom: 1em;
	color: #e0e0e0;
}
.modal-body ul {
	margin-bottom: 1em;
	padding-left: 20px;
}
.modal-body li {
	margin-bottom: 0.5em;
}

.doc-preview-frame {
	width: 100%;
	min-height: 65vh;
	border: 1px solid var(--surface-border);
	border-radius: 2px;
	background: #fff;
}

/* ============================
   Signature Close Button
   ============================ */
.btn-close-modal {
	background: transparent;
	border: none;
	color: var(--MP-lime-green);
	box-shadow: 0px 0px 0px #00000000;
	letter-spacing: 0em;
	/* Make it BIG */
	font-size: 2.5rem;
	width: 50px;
	height: 50px;

	/* Center the X perfectly */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;

	cursor: pointer;
	line-height: 1;

	/* The Signature Spin Physics */
	/* cubic-bezier(back, fast, slow, stop) creates a "snap" effect */
	transition:
		color 0.5s ease,
		background 0.5s ease,
		transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-close-modal:hover {
	color: var(--MP-lime-green);
	background: rgba(255, 255, 255, 0); /* Subtle highlight circle */
	transform: rotate(270deg);
}

.btn-close-modal:focus {
	outline: none;
}

.btn-close-modal:focus-visible {
	outline: none;
}

/* Brand Book / AI Brief pill-style buttons */
.action-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	background: #ffffff;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition:
		box-shadow 0.15s ease,
		transform 0.15s ease,
		background-color 0.15s ease;
}

.action-pill:hover:not(:disabled) {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
	background-color: #faf5ff; /* subtle purple-ish hint */
}

.action-pill:disabled {
	opacity: 0.7;
	cursor: default;
	box-shadow: none;
	transform: none;
}

/* Inline spinner inside the pill */
.action-pill .pill-spinner {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(160, 32, 240, 0.2);
	border-top-color: #a020f0;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.1s ease;
}

.action-pill.is-loading .pill-spinner {
	opacity: 1;
	animation: pill-spin 0.7s linear infinite;
}

.action-pill.is-loading .pill-label {
	opacity: 0.9;
}

/* === Builder Spacing Fixes (No Layout Changes) === */

/* 1. Spread out the main containers vertically */
#ID_BRAND_MANAGE_ARTIFACTS,
#ID_BRAND_SECTION_LIST_CONTAINER,
#ID_BRAND_SECTION_EDIT {
	margin-bottom: 40px; /* Force space between major blocks */
	padding: 30px; /* Add breathing room inside the boxes */
}

/* 2. De-cramp the Inputs */
.bv-field-container label {
	display: block;
	margin-bottom: 10px; /* Push label away from its input */
	font-weight: 600;
}

/* 3. Fix the Table Density (The "Cramped" culprit) */
#qa-table {
	width: 100%;
	margin-top: 20px;
	border-collapse: separate; /* Allows border-spacing */
	border-spacing: 0 10px; /* Adds 10px gap BETWEEN rows */
}

#qa-table td {
	padding: 15px 10px; /* Vertical breathing room for text */
	vertical-align: top; /* Aligns text to top if questions wrap */
	border-bottom: 1px solid #eee; /* Subtle separator */
}

/* 4. Spread out the Checkboxes */
.checkbox-cell {
	width: 60px; /* Give the checkbox column fixed width */
	text-align: center;
}

.qa-select {
	transform: scale(1.3); /* Make checkbox easier to hit */
	margin-top: 5px;
}

/* 5. Fix the Textarea */
#sectionPrompt {
	min-height: 120px; /* Stop it from being a tiny slit */
	padding: 15px;
}

#sectionsUl li {
	display: flex; /* Turn list item into a flex container */
	justify-content: space-between; /* Text on left, controls on right */
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
	/* Keep your existing padding/border styles */
}

/* If you need the text to truncate if it's too long: */
#sectionsUl li span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 15px; /* Spacing between text and button */
}

.button-group {
	display: flex;
	gap: 20px; /* Space between buttons */
}

/* === Custom Select Styling === */
select {
	/* 1. Reset Default Styles */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	/* 2. Box Styling */
	width: 100%;
	height: 48px; /* Consistent height */
	padding: 10px 15px;
	padding-right: 40px; /* Make room for the arrow */

	background-color: var(--MP-charcoal-gray);
	border: 1px solid #ccc; /* Matches your input borders */
	border-radius: 6px; /* Smooth corners */

	/* 3. Text Styling */
	font-size: 16px;
	font-family: inherit;
	color: #ffffff;

	/* 4. Custom Arrow (Purple to match your brand) */
	/* This encodes a simple SVG chevron arrow directly into the CSS */
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236d28d9%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 12px;

	cursor: pointer;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

/* Hover State */
select:hover {
	border-color: #a0aec0;
}

/* Focus State (Active) */
select:focus {
	outline: none;
	border-color: var(--MP-brand-magenta);
	background-color: var(--MP-brand-magenta);
	box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.1); /* Subtle purple glow */
}

/* Spinner keyframes */
@keyframes pill-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Responsive breakpoints:
   - Compact (mobile + tablet portrait): <= 1023px
   - Wide (tablet landscape + desktop): >= 1024px
*/
/* =========================
   Artifact Viewer v2
========================= */

.av-shell {
	padding: 24px 22px;
}

.av-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.av-title {
	margin: 0;
	font-size: 1.15rem;
}

.av-subtitle {
	margin: 6px 0 0;
	color: var(--text-muted);
	font-size: 0.9rem;
}

.av-message {
	min-height: 18px;
	font-size: 0.9rem;
	padding: 8px 10px;
	border-radius: 2px;
	white-space: pre-wrap;
}

.av-message.is-info {
	background: rgba(41, 121, 255, 0.1);
	border: 1px solid rgba(41, 121, 255, 0.35);
}

.av-message.is-success {
	background: rgba(0, 255, 21, 0.08);
	border: 1px solid rgba(0, 255, 21, 0.25);
}

.av-message.is-error {
	background: rgba(255, 0, 0, 0.08);
	border: 1px solid rgba(255, 0, 0, 0.25);
}

.av-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 18px;
	align-items: start;
}

.av-card {
	min-height: unset;
}

.av-left {
	padding: 20px;
}

.av-right {
	padding: 20px;
}

.av-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--text-color);
}

.av-select,
.av-input,
.av-textarea {
	width: 100%;
	box-sizing: border-box;
}

.av-input {
	height: 46px;
	border-radius: 2px;
	border: 1px solid var(--surface-border);
	background: rgba(0, 0, 0, 0.25);
	color: var(--text-color);
	padding: 10px 12px;
}

.av-textarea {
	border-radius: 2px;
	border: 1px solid var(--surface-border);
	background: rgba(0, 0, 0, 0.25);
	color: var(--text-color);
	padding: 10px 12px;
	resize: vertical;
}

.av-block {
	margin-bottom: 14px;
}

.av-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 10px;
}

.av-sections-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}

.av-sections-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--text-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.av-sections-title {
	font-weight: 700;
}

.av-sections-meta {
	opacity: 0.85;
}

.av-sections-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 56vh;
	overflow: auto;
	padding-right: 4px;
}

.av-empty {
	color: var(--text-muted);
	padding: 10px 6px;
}

.av-section-item {
	margin: 0;
	padding: 0;
}

.av-section-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid var(--surface-border);
	background: rgba(0, 0, 0, 0.2);
	color: var(--text-color);
	cursor: pointer;
	text-align: left;
	transition:
		border-color 0.16s ease,
		transform 0.16s ease,
		background 0.16s ease;
}

.av-section-btn:hover {
	border-color: rgba(170, 4, 196, 0.65);
	transform: translateY(-1px);
}

.av-section-btn.is-active {
	border-color: rgba(170, 4, 196, 0.9);
	background: rgba(170, 4, 196, 0.12);
}

.av-section-left {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.av-section-name {
	font-weight: 700;
	font-size: 0.92rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.av-section-sub {
	font-size: 0.78rem;
	color: var(--text-muted);
}

.av-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.08);
	display: inline-block;
	flex: 0 0 auto;
}

.av-dot.is-ready {
	background: rgba(0, 255, 21, 0.55);
	border-color: rgba(0, 255, 21, 0.55);
}

.av-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.av-action {
	width: 100%;
	border-radius: 999px;
}

.av-primary {
	background: linear-gradient(
		90deg,
		var(--MP-magenta),
		var(--MP-vivid-purple)
	);
}

.av-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.av-tab {
	border-radius: 999px;
	padding: 10px 14px;
	border: 1px solid var(--surface-border);
	background: rgba(0, 0, 0, 0.2);
	color: var(--text-color);
	cursor: pointer;
	font-size: 0.85rem;
}

.av-tab.is-active {
	border-color: rgba(170, 4, 196, 0.9);
	background: rgba(170, 4, 196, 0.12);
}

.av-panel {
	display: none;
	min-height: 420px;
}

.av-panel.is-active {
	display: block;
}

.av-panel-top {
	margin-bottom: 12px;
}

.av-content {
	border: 1px solid var(--surface-border);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	padding: 16px;
	min-height: 360px;
}

.av-artifact .av-doc {
	overflow: auto;
}

.av-placeholder {
	color: var(--text-muted);
	padding: 10px 0;
}

.av-h3 {
	margin: 0;
	font-size: 1.05rem;
}

.av-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.av-section-head-actions {
	display: flex;
	gap: 10px;
}

.av-mini {
	padding: 0.6rem 0.9rem;
	font-size: 0.8rem;
}

.av-prose p {
	margin: 0;
	line-height: 1.55;
}

.av-muted {
	color: var(--text-muted);
}

.av-details {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.av-detail-block {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 12px;
}

.av-detail-title {
	font-weight: 800;
	margin-bottom: 8px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.av-bullets {
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.av-qa {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Artifact Viewer: Prompt block readability */
.av-prompt {
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.3);
}

.av-prompt-line {
	font-size: 13px;
	line-height: 1.35;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.92);
}

.av-prompt-label {
	color: rgba(255, 255, 255, 0.65);
	font-weight: 700;
}

.av-prompt-details summary {
	cursor: pointer;
	user-select: none;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
}

.av-prompt-details summary:hover {
	color: rgba(255, 255, 255, 0.95);
}

.av-prompt-raw {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.35);
	color: var(--text-color);

	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
	font-size: 16px;
	line-height: 1.45;

	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;

	max-height: 320px;
	overflow: auto;
}

.av-qa-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

.av-qa-row {
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	padding: 10px 12px;
}

.av-qa-q {
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.av-qa-a {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
}

/* Modal */
.av-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	z-index: 9999;
}

.av-modal-backdrop.is-hidden {
	display: none;
}

/* ============================
   Enhanced Edit Modal Styling
   ============================ */

/* =========================================================
   Edit Modal v2: Readable "Document" Style
   ========================================================= */
.docmodal-body {
	background-image: url("../img/fpmin.png");
}

/* 1. Modal Container: Clean & distinct from background */
.av-modal {
	background: #18181b; /* Solid dark grey, less "muddy" */
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
	border-radius: 2px;
	padding: 0; /* Remove padding here, manage it in body/header/footer */
	display: flex;
	flex-direction: column;
	max-height: 85vh; /* Ensure it fits on screen */
}

/* 2. Header: Distinct separation */
.av-modal-header {
	padding: 24px 32px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: #202024;
	border-radius: 16px 16px 0 0;
	margin: 0;
}

/* 3. The Body: Scrollable area */
.av-modal-body {
	padding: 32px;
	overflow-y: auto;
	margin: 0;
}

/* 4. FIX "Code Editor" Look: Inputs look like document fields now */
.av-modal .av-input,
.av-modal .av-textarea {
	font-family:
		"Poppins",
		-apple-system,
		BlinkMacSystemFont,
		sans-serif; /* Force readable font */
	font-size: 15px;
	line-height: 1.6;
	color: #ffffff;

	background: rgba(255, 255, 255, 0.07); /* Lighter, softer background */
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 12px 16px;
	transition: all 0.2s ease;
}

.av-modal .av-input:focus,
.av-modal .av-textarea:focus {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--MP-magenta);
	outline: none;
	box-shadow: 0 0 0 4px rgba(170, 4, 196, 0.15);
}

/* Labels: Make them readable (not tiny all-caps) */
.av-modal .av-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #a1a1aa; /* Softer grey */
	margin-bottom: 8px;
	text-transform: none; /* Remove "code" feel */
	letter-spacing: 0.02em;
}

/* 5. FIX "Invisible Button": Sticky Footer */
.av-modal-actions {
	padding: 20px 32px;
	background: #202024; /* Distinct footer background */
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0 0 16px 16px;
	margin: 0;

	/* Make it stick to bottom if content is long */
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	justify-content: flex-end;
}

/* The Save Button: High Contrast */
#saveEditBtn {
	background: linear-gradient(135deg, var(--MP-magenta), #9c27b0);
	color: white;
	font-size: 1rem;
	padding: 12px 32px;
	height: auto;
	width: 100%; /* Full width on mobile, or flexible */
	max-width: 200px;
	box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

#saveEditBtn:hover {
	filter: brightness(1.2);
	transform: translateY(-2px);
}

/* Add this to style.css */

.av-modal .av-input.is-readonly,
.av-modal .av-textarea.is-readonly {
	background: rgba(255, 255, 255, 0.03); /* Very dark/subtle */
	color: #666; /* Muted text */
	cursor: not-allowed;
	border-color: transparent; /* Remove border emphasis */
}

/* Optional: Hide the Q&A JSON entirely if it's too noisy */
#editQaPairs {
	display: none;
}

#ID_XRAY_RESULTS_CONTAINER {
	flex-direction: row;
}

.bv-header nav {
	width: 100%;
}

.wrap {
	align-items: center;
	max-width: 1200px;
}

/* Embedded mode: used when views are loaded inside XRAY iframes. */
.bv-embed .bv-header {
	display: none !important;
}

.bv-embed .wrap {
	padding: 18px 18px 24px;
	min-height: 0;
}

.bv-embed #ID_PO_TOP_SUBCONTAINER {
	display: none !important;
}

.bv-embed .historyWrapper {
	display: none !important;
}

.bv-embed #ID_BTN_EXPORT_XLS {
	display: none !important;
}

.bv-embed #ID_PO_GUIDANCE_SECTION {
	display: none !important;
}

.bv-embed .film-strip-group {
	display: none !important;
}

.bv-embed #ID_PO_HERO {
	width: 100%;
}

.bv-embed #ID_CRO_CTA_ROW {
	display: none !important;
}

.bv-embed #ID_CRO_REPORT_HEADER {
	display: none !important;
}

.bv-embed #ID_CRO_HERO {
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.bv-embed .report-viewer-container {
	min-height: 0;
	margin-top: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.bv-embed .topbar {
	border-radius: 0px;
	border-color: #00000000;
}

#ID_PI14_STATUS,
#ID_LIDAR_STATUS {
	display: none;
}
/* Header */
.topbar {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}

.titleblock h1 {
	display: none;
	margin: 0;
	font-family: var(--MP-secondary-font);
	font-weight: var(--MP-font-weight-bold);
	letter-spacing: 0.2px;
	font-size: 28px;
	line-height: 1.1;
}

.top-container {
	justify-content: space-between;
	min-height: 200px;
	width: 100%;
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 8%, transparent);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(
			1000px 500px at 15% 15%,
			color-mix(in srgb, var(--MP-bright-azure) 15%, transparent),
			rgba(0, 0, 0, 0) 55%
		),
		radial-gradient(
			900px 420px at 85% 30%,
			color-mix(in srgb, var(--MP-lime-green) 11%, transparent),
			rgba(0, 0, 0, 0) 55%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--MP-charcoal-gray) 88%, transparent),
			color-mix(in srgb, var(--MP-charcoal-gray) 66%, transparent)
		);
	box-shadow: var(--shadow-soft);
	padding: 18px 18px 16px;
	box-sizing: border-box;
}

#ID_PO_FLAGGED_SECTION {
	background:
		radial-gradient(
			1000px 500px at 15% 15%,
			color-mix(in srgb, var(--MP-dusty-gray) 15%, transparent),
			rgba(0, 0, 0, 0) 55%
		),
		radial-gradient(
			900px 420px at 85% 30%,
			color-mix(in srgb, var(--MP-dusty-gray) 11%, transparent),
			rgba(0, 0, 0, 0) 55%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--MP-gold) 8%, transparent),
			color-mix(in srgb, var(--MP-gold) 6%, transparent)
		);
	background-color: black;
}

#ID_PO_LOW_SECTION {
	background:
		radial-gradient(
			1000px 500px at 15% 15%,
			color-mix(in srgb, var(--MP-dusty-gray) 15%, transparent),
			rgba(0, 0, 0, 0) 55%
		),
		radial-gradient(
			900px 420px at 85% 30%,
			color-mix(in srgb, var(--MP-dusty-gray) 11%, transparent),
			rgba(0, 0, 0, 0) 55%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--MP-crimson-red) 8%, transparent),
			color-mix(in srgb, var(--MP-crimson-red) 6%, transparent)
		);
	background-color: black;
}

#ID_PO7,
#ID_CRO {
	margin: 0px;
}
#ID_PO7_DRAWER_EXPORT_ROW{
	display:flex;
	justify-content: flex-end;
	margin-top:30px;
	margin-right:30px;
}
#ID_PO_TOP_SUBCONTAINER {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 24px;
	border-radius: 2px;
	max-width: 1300px;
	background: rgba(0, 0, 0, 0.3);
}

#ID_PO_TOP_SUBCONTAINER .card-header {
	width: 100%;
	margin-bottom: 0px;
}
.subline {
	margin-top: 6px;
	color: var(--MP-secondary-gray);
	font-size: var(--MP-font-size-xs);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.pillrow {
	display: none;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	justify-content: space-evenly;
	padding-top: 2px;
	margin-top: 50px;
}

.pill {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 8%, transparent);
	background: color-mix(in srgb, var(--MP-charcoal-gray) 55%, transparent);
	padding: 8px 10px;
	border-radius: 999px;
	color: var(--MP-off-white);
	font-size: var(--MP-font-size-xxs);
	display: inline-flex;
	gap: 8px;
	align-items: center;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
}

.pill strong {
	font-weight: var(--MP-font-weight-bold);
}

.bv-embed .topbar .hero {
	max-width: 600px;
	padding: 10px;
	margin: 0px;
	border: none;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	display: inline-block;
	background: color-mix(in srgb, var(--MP-off-white) 25%, transparent);
}

#ID_PO_NOTE_LINE {
	display: none;
}

#ID_CRO_CTA_ROW {
	justify-content: flex-end;
	margin: 0px;
	border-radius: 2px;
	justify-self: center;
}
#ID_HISTORY_MENU {
	width: 100%;
	background: color-mix(in srgb, var(--MP-charcoal-gray) 72%, transparent);
}
/* Hero confidence card */
.hero {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	width: 100%;
}
#ID_PI14_HERO {
	width: 100%;
	max-width: none;
	border: none;
}
#ID_PI14_HERO .stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}
#ID_PI14_ACTION_COPY_BASE {
	color: white;
}
#ID_PI14_HW,
#ID_PI14_HWT {
	display: none;
}
#ID_PI14_HERO {
	background: none;
}
.pi14-consumer-block {
	margin-top: 10px;
	padding: 14px;
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 10%, transparent);
	border-radius: 2px;
	background: color-mix(in srgb, var(--MP-charcoal-gray) 74%, transparent);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pi14-consumer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.pi14-consumer-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pi14-consumer-title {
	color: var(--text-main);
	font-size: 18px;
	font-weight: var(--MP-font-weight-semi-bold);
}

.pi14-download-btn {
	border: 1px solid color-mix(in srgb, var(--MP-lime-green) 40%, transparent);
	background: color-mix(in srgb, var(--MP-lime-green) 88%, transparent);
	color: #111;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 7px 10px;
	border-radius: 10px;
	cursor: pointer;
	line-height: 1;
}

.pi14-info-btn {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--MP-off-white) 0%, transparent);
	background: color-mix(in srgb, var(--MP-charcoal-gray) 100%, transparent);
	color: var(--MP-lime-green);
	font-weight: 700;
	font-size: 36px;
	cursor: pointer;
	text-transform: lowercase;
	
}

.pi14-knee-status-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-main);
	font-size: 16px;
	font-weight: var(--MP-font-weight-medium);
	padding:0px;
}

.pi14-knee-indicator {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--MP-off-white) 35%, transparent);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--MP-off-white) 8%, transparent);
}

.pi14-knee-indicator.is-good {
	background: var(--MP-lime-green);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--MP-lime-green) 25%, transparent);
}

.pi14-knee-indicator.is-bad {
	background: var(--MP-crimson-red);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--MP-crimson-red) 24%, transparent);
}

.pi14-knee-status-note {
	color: var(--MP-secondary-gray);
	font-size: 16px;
	line-height: 1.45;
}

.pi14-intent-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.pi14-intent-card {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 10%, transparent);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	padding: 12px;
}

.pi14-intent-label {
	color: var(--MP-secondary-gray);
	font-size: 16px;
	margin-bottom: 4px;
}

.pi14-intent-value {
	color: var(--text-main);
	font-size: 22px;
	line-height: 1.1;
	font-weight: 700;
}

.pi14-mode-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pi14-mode-tabs {
	display: flex;
	gap: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.pi14-mode-tab {
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--MP-lime-green);
	padding: 10px 4px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: border-color 0.18s ease;
}

.pi14-mode-tab:hover {
	border-bottom-color: rgba(var(--MP-lime-green-rgb, 0, 255, 100), 0.4);
}

.pi14-mode-tab.is-active {
	border-bottom-color: var(--MP-lime-green);
}

.pi14-mode-tab.is-active:hover {
	border-bottom-color: var(--MP-lime-green);
}

.pi14-mode-tab:focus-visible {
	outline: 2px solid var(--MP-lime-green);
	outline-offset: 2px;
}

.pi14-mode-helper {
	color: var(--MP-secondary-gray);
	font-size: 16px;
	line-height: 1.4;
}

.pi14-action-copy {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 10%, transparent);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	padding: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-muted);
	white-space: pre-line;
	font-family: Arial, Helvetica, sans-serif;
}

.pi14-action-divider {
	height: 1px;
	margin: 10px 0;
	background: color-mix(in srgb, var(--MP-off-white) 14%, transparent);
}

.pi14-action-copy-more {
	color: var(--MP-secondary-gray);
}

.pi14-summary-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.pi14-summary-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(3px);
}

.pi14-summary-modal-card {
	position: relative;
	z-index: 1;
	width: min(1100px, 96vw);
	max-height: 90vh;
	overflow: auto;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 12%, transparent);
	background: color-mix(in srgb, var(--MP-charcoal-gray) 92%, transparent);
	box-shadow: var(--shadow-soft);
}

.pi14-summary-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.pi14-summary-modal-title {
	color: var(--text-main);
	font-size: 18px;
	font-weight: var(--MP-font-weight-semi-bold);
}

.pi14-summary-modal-close {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 18%, transparent);
	background: color-mix(in srgb, var(--MP-charcoal-gray) 64%, transparent);
	color: var(--text-main);
	font-size: 22px;
	line-height: 1;
	padding: 3px 8px;
	border-radius: 10px;
	cursor: pointer;
}

.pi14-summary-modal .stats {
	margin-top: 0;
}

body.pi14-modal-open {
	overflow: hidden;
}

/* Scope to the Who To Target First container */
#ID_WHO_TO_TARGET_FIRST {
	/* readable UI font for long text */
	font-family:
		Inter,
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;

	/* grayscale ladder */
	--txt-1: rgba(255, 255, 255, 0.92); /* primary */
	--txt-2: rgba(255, 255, 255, 0.74); /* secondary */
	--txt-3: rgba(255, 255, 255, 0.6); /* tertiary */
	--txt-4: rgba(255, 255, 255, 0.5); /* quiet */
}

/* Title */
#ID_WHO_TO_TARGET_FIRST .who-title {
	font-size: 18px;
	line-height: 1.15;
	font-weight: 800;
	color: var(--txt-1);
}

/* Status line (allow magenta here if you want attention) */
#ID_WHO_TO_TARGET_FIRST .who-status {
	font-size: 13px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--txt-2);
}

/* Explanatory subline: quieter */
#ID_WHO_TO_TARGET_FIRST .who-subline {
	font-size: 13px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--txt-3);
	max-width: 64ch;
}

/* Count labels and numbers */
#ID_WHO_TO_TARGET_FIRST .count-label {
	font-size: 12.5px;
	line-height: 1.2;
	font-weight: 650;
	color: var(--txt-2);
}
#ID_WHO_TO_TARGET_FIRST .count-number {
	font-size: 28px;
	line-height: 1.05;
	font-weight: 850;
	color: rgba(255, 255, 255, 0.95);
}

/* Toggle buttons: keep your neon green only for active/clickable states */
#ID_WHO_TO_TARGET_FIRST .mode-btn {
	font-size: 12.5px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: 0.3px;
	color: var(--txt-2);
}

/* Base recommendation: this is the main readable block */
#ID_WHO_TO_TARGET_FIRST .rec-base {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 550;
	color: var(--txt-1);
	max-width: 64ch;
	white-space: pre-line;
}

/* More: smaller, still readable, clearly secondary */
#ID_WHO_TO_TARGET_FIRST .rec-more {
	font-size: 13.5px;
	line-height: 1.65;
	font-weight: 400;
	color: var(--txt-2);
	max-width: 64ch;
	white-space: pre-line;
}

/* Helper line: quiet */
#ID_WHO_TO_TARGET_FIRST .mode-helper {
	font-size: 12.5px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--txt-3);
}

/* Optional: reduce green glow so it does not compete with text (still neon, still clickable) */
#ID_WHO_TO_TARGET_FIRST .btn-neon,
#ID_WHO_TO_TARGET_FIRST .mode-btn.is-active {
	box-shadow: none; /* or reduce to a subtler shadow if you currently have heavy glow */
}

#ID_PI14_HISTORY {
	width: 100%;
	background-color: #000;
}
#ID_PO_TOPBAR {
	flex-wrap: nowrap;
}
#ID_PI14_TOPBAR {
	flex-wrap: nowrap;
	gap: 30px;
}
#ID_PI14_HERO-CONTAINER {
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: space-between;
	border-radius: var(--radius-lg);
	width: 100%;
	margin-bottom: 30px;
}

#ID_PI14_RESULTS .topbar {
	justify-content: space-between;
	width: 100%;
}

.wrap #ID_CRO_HERO {
	border: none;

	background: #00000000;
}

.wrap #ID_CRO_HERO .historyWrapper {
	justify-content: space-between;
}

#ID_CRO_E2E_ROW {
	display: none;
}
.heroLabel {
	display: none;
	color: var(--MP-secondary-gray);
	font-size: var(--MP-font-size-xs);
	margin-bottom: 6px;
}

.heroHeadline {
	line-height: 1.25;
	letter-spacing: 0.1px;
	margin: 0 0 8px 0;
	font-size: 16px;
	color: var(--text-main);
	font-weight: var(--MP-font-weight-medium);
}

#ID_RADAR_STATUS{
	display:none;
}

.accent {
	color: var(--MP-lime-green);
	text-shadow: 0 0 18px
		color-mix(in srgb, var(--MP-lime-green) 18%, transparent);
}

.heroExplain {
	display: none;
	margin: 10px 0 0;
	color: var(--MP-secondary-gray);
	font-size: var(--MP-font-size-sm);
	line-height: 1.5;
}

#ID_CRO_CTA_ROW {
	display: none;
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
}

#ID_CRO_CTA_ROW {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.ctaRow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	box-shadow:
		inset 0 0 0 1px rgba(1, 1, 13, 0.24),
		inset 0 0 8px rgba(1, 1, 13, 0.8);
}

.xray-results-subsection {
	width: 100%;
}

#ID_CRO_HISTORY_MENU {
	background: color-mix(in srgb, var(--MP-charcoal-gray) 72%, transparent);
	min-height: 400px;
}

.history-empty-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px dashed color-mix(in srgb, var(--MP-off-white) 20%, transparent);
	border-radius: 2px;
	background: color-mix(in srgb, var(--MP-charcoal-gray) 68%, transparent);
	text-align: center;
		min-height: 100px;
}

.history-empty-title {
	color: var(--text-main);
	font-size: 14px;
	font-weight: var(--MP-font-weight-semi-bold);
	letter-spacing: 0.02em;
}

.history-empty-subtitle {
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1.45;
	max-width: 420px;
}

.history-empty-card.is-loading .history-empty-title {
	color: var(--text-muted);
}

.history-empty-card.is-loading {
	position: relative;
	overflow: hidden;
	min-height: 100px;
}

.history-empty-card.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.08) 45%,
		rgba(255, 255, 255, 0) 85%
	);
	transform: translateX(-130%);
	animation: history-skeleton-sweep 1.5s linear infinite;
	pointer-events: none;
}

@keyframes history-skeleton-sweep {
	to {
		transform: translateX(130%);
	}
}

#ID_BRAND_HISTORY_MENU,
#ID_CRO_HISTORY_MENU,
#ID_HISTORY_MENU,
#ID_PI14_HISTORY,
#ID_XRAY_COMPOSE_HISTORY,
#ID_RADAR_HISTORY_EMPTY,
#ID_RADAR_HISTORY_TABLE_WRAP,
#ID_LIDAR_HISTORY_EMPTY,
#ID_LIDAR_HISTORY_TABLE_WRAP {
	display: flex;
	flex-direction: column;
	min-height: 100px;
	width: 100%;
	max-height: 250px;
	overflow: auto;
}

#ID_BRAND_HISTORY_MENU {
	background: color-mix(in srgb, var(--MP-charcoal-gray) 72%, transparent);
}

#ID_XRAY_RESULTS_CONTAINER {
	gap: 0px;
}
.historyWrapper {
	display: flex;
	gap: 20px;
	width: 100%;
	justify-content: space-between;
	font-family: var(--MP-primary-font);
}
#ID_RADAR_PANEL,
#ID_PO7 {
	margin-top: 30px;
}
#ID_LIDAR {
	gap: 0px;
}
#report-section {
	width: 100%;
}
.historyWrapper-title {
	margin-top: 40px;
	display: flex;
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-semi-bold);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	align-items: center;
	align-self: flex-start;
	gap: 12px;
}

.btn {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 8%, transparent);
	background: color-mix(in srgb, var(--MP-charcoal-gray) 55%, transparent);
	color: var(--MP-off-white);
	padding: 10px 14px;
	border-radius: 2px;
	cursor: pointer;
	font-weight: var(--MP-font-weight-semi-bold);
	font-size: 14px;
	transition:
		transform 120ms ease,
		background 120ms ease,
		border 120ms ease,
		opacity 120ms ease;
	box-shadow: var(--shadow-card);
	backdrop-filter: blur(10px);
	user-select: none;
	max-height: 40px;
	max-width: 300px;
}

.btn:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--MP-off-white) 14%, transparent);
}

.btn:active {
	transform: translateY(0px);
	opacity: 0.9;
}

.btnPrimary {
	background: var(--MP-lime-green);
	border-color: #00000000;
}

.btnPrimary:hover {
	background: linear-gradient(
		180deg,
		var(--MP-lime-green),
		color-mix(in srgb, var(--MP-lime-green) 72%, transparent)
	);
}

.btnGhost {
	background: color-mix(in srgb, var(--MP-charcoal-gray) 35%, transparent);
}

.btnSmall {
	background: var(--MP-lime-green);
	color: #000000;
	font-family: var(--font-heading);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 16px;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.2s ease;
	box-shadow: 4px 4px 0px #000000;
}

.btnDanger {
	border-color: color-mix(in srgb, var(--MP-crimson-red) 28%, transparent);
	background: color-mix(in srgb, var(--MP-crimson-red) 10%, transparent);
	color: var(--text-muted);
	font-weight: 300;
}

.btnDanger:hover {
	border-color: color-mix(in srgb, var(--MP-crimson-red) 40%, transparent);
}

.noteLine {
	margin-top: 10px;
	color: var(--MP-secondary-gray);
	font-size: 12.5px;
	line-height: 1.4;
}

/* Stat tiles */
.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.stat {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 8%, transparent);
	background: rgba(0, 0, 0, 0.18);
	border-radius: 14px;
	padding: 16px 16px;
	min-width: 120px;
	flex: 1 1 auto;
}

.statLabel {
	color: var(--MP-secondary-gray);
	font-size: 12px;
	margin-bottom: 6px;
}

.statValue {
	font-size: 18px;
	font-weight: 300;
	color: var(--text-muted);
	letter-spacing: 0.2px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.statValue .big {
	font-size: 16px;
	color: var(--text-muted);
}

.po7-stats .statValue {
	font-size: 39px;
}

.po7-stats .statValue .big {
	font-size: 35px;
}

.po7-stats .statLabel {
	font-size: 27px;
}

.userOnly {
	margin-top: 10px;
}
.statValue .muted {
	color: var(--MP-secondary-gray);
	font-weight: var(--MP-font-weight-bold);
	font-size: 14px;
}

/* Sections */
.section {
	margin-top: 16px;
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 8%, transparent);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--MP-charcoal-gray) 72%, transparent);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.sectionHeader {
	padding: 14px 16px;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid
		color-mix(in srgb, var(--MP-off-white) 6%, transparent);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--MP-off-white) 3%, transparent),
		rgba(0, 0, 0, 0)
	);
}

.sectionTitle {
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	display: inline-flex;
	gap: 10px;
	align-items: center;
}

.badge {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 10%, transparent);
	background: rgba(0, 0, 0, 0.22);
	color: var(--MP-secondary-gray);
	display: inline-flex;
	gap: 8px;
	align-items: center;
	white-space: nowrap;
}

.badge .bDot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--MP-off-white) 25%, transparent);
}

.badgeHigh .bDot {
	background: color-mix(in srgb, var(--MP-solar-gold) 95%, transparent);
}

.badgeLow .bDot {
	background: color-mix(in srgb, var(--MP-crimson-red) 90%, transparent);
}

.badgeSkip {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.badgeSkip .bDot {
	background: #666;
}
[data-side="SKIP"] .skipReason {
	font-size: 11px;
	color: #999;
	font-style: italic;
}

.sectionBody {
	padding: 14px 16px 16px;
	font-family: var(--MP-primary-font);
}

/* View toggle */
.viewToggle {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.toggleBtn {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 10%, transparent);
	background: rgba(0, 0, 0, 0.18);
	color: var(--MP-secondary-gray);
	padding: 6px 10px;
	border-radius: 2px;
	cursor: pointer;
	font-weight: var(--MP-font-weight-bold);
	font-size: 12px;
	user-select: none;
}

.toggleBtn.active {
	color: var(--MP-off-white);
	border-color: color-mix(in srgb, var(--MP-bright-azure) 35%, transparent);
	background: color-mix(in srgb, var(--MP-bright-azure) 16%, transparent);
}

/* Product cards */
.cardList {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.pCard {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 9%, transparent);
	padding: 12px;
	transition:
		background 120ms ease,
		border 120ms ease;
}

.pCard.is-dismissed {
	background: rgba(0, 0, 0, 0.12);
	border-color: color-mix(in srgb, var(--MP-off-white) 6%, transparent);
}

.pTop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--MP-primary-font);
}

.pTitle {
	font-weight: 300;
	font-size: 14.5px;
	margin: 0;
	line-height: 1.25;
}

.pActions {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.pMetaRow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
}

.chip {
	padding: 6px 10px;
	font-size: 12px;
	color: var(--MP-secondary-gray);
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
	white-space: nowrap;
}

.chip strong {
	color: var(--MP-secondary-gray);
	font-weight: 800;
}

.deltaChip--low {
	color: var(--MP-off-white);
	border-color: color-mix(in srgb, var(--MP-crimson-red) 40%, transparent);
	background: color-mix(in srgb, var(--MP-crimson-red) 14%, transparent);
}

.deltaChip--low .miniDot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--MP-crimson-red) 92%, transparent);
	display: inline-block;
	margin-right: 6px;
}

/* LOW outlier overrides */
.deltaChip {
	border-color: color-mix(in srgb, var(--MP-solar-gold) 40%, transparent);
	background: color-mix(in srgb, var(--MP-solar-gold) 12%, transparent);
	font-size: 16px;
}

.deltaChip .miniDot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	display: inline-block;
	margin-right: 6px;
	background: color-mix(in srgb, var(--MP-solar-gold) 95%, transparent);
	box-shadow: 0 0 0 4px
		color-mix(in srgb, var(--MP-solar-gold) 18%, transparent);
}

/* Details inside card */
details.pDetails {
	margin-top: 10px;
	border-top: 1px solid
		color-mix(in srgb, var(--MP-off-white) 6%, transparent);
	padding-top: 10px;
}

details.pDetails summary {
	cursor: pointer;
	list-style: none;
	color: var(--MP-teal);
	font-weight: var(--MP-font-weight-bold);
	font-size: 13px;
	user-select: none;
}

details.pDetails summary::-webkit-details-marker {
	display: none;
}

.detailGrid {
	margin-top: 10px;
	gap: 8px;
}

.detailItem {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 8%, transparent);
	background: rgba(0, 0, 0, 0.14);
	border-radius: 2px;
	padding: 10px;
	font-size: 12.5px;
	color: var(--MP-secondary-gray);
	line-height: 1.35;
}

.detailItem strong {
	color: var(--MP-off-white);
}

/* RANGE WIDGET STYLES */
.rangeWidget {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.rangeHeader {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 11px;
	color: var(--MP-secondary-gray);
	font-weight: 600;
}

.rangeTrack {
	position: relative;
	height: 6px;
	width: 100%;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 99px;
	margin: 4px 0;
}

.rangeTrackFill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 99px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--MP-charcoal-gray) 60%, transparent) 0%,
		color-mix(in srgb, var(--MP-off-white) 15%, transparent) 50%,
		color-mix(in srgb, var(--MP-charcoal-gray) 60%, transparent) 100%
	);
	opacity: 0.5;
}

.rangeMarker {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--MP-off-white);
	border: 2px solid var(--MP-charcoal-gray);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
	z-index: 2;
}

.rangeMarker.high {
	background: var(--MP-crimson-red);
}

.rangeMarker.low {
	background: var(--MP-solar-gold);
}

.rangeLabels {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--MP-secondary-gray);
	font-family: monospace;
}

/* Dismissed state hides meta + details, shows review-again */
.dismissedOnly {
	display: none;
}

.pCard.is-dismissed .fullOnly {
	display: none;
}

.pCard.is-dismissed .dismissedOnly {
	display: inline-flex;
}

/* Table */
.tableWrap {
	overflow: auto;
	background: rgba(0, 0, 0, 0.16);
}

table {
	width: 100%;
	border-collapse: collapse;
}

thead th {
	text-align: left;
	font-size: 12px;
	color: var(--MP-secondary-gray);
	font-weight: 800;
	padding: 12px 12px;
	border-bottom: 1px solid
		color-mix(in srgb, var(--MP-off-white) 8%, transparent);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--MP-off-white) 3%, transparent),
		rgba(0, 0, 0, 0)
	);
	position: sticky;
	top: 0;
	z-index: 1;
}

tbody td {
	padding: 12px 12px;
	border-bottom: 1px solid
		color-mix(in srgb, var(--MP-off-white) 6%, transparent);
	font-size: 13px;
	vertical-align: top;
}

.pi14-knee-note {
	margin: 0 3px 10px 3px;
	font-size: 12px;
	color: var(--MP-secondary-gray);
}

.pi14-knee-row td {
	background: color-mix(in srgb, var(--MP-bright-azure) 12%, transparent);
}

.pi14-knee-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	background: color-mix(in srgb, var(--MP-bright-azure) 55%, transparent);
	border-radius: 999px;
	vertical-align: middle;
}

.pi14-transition-row td,
.pi14-flat-row td {
	background: color-mix(in srgb, var(--MP-lime-green) 10%, transparent);
}

.pi14-transition-chip,
.pi14-flat-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 700;
	color: #111;
	background: color-mix(in srgb, var(--MP-lime-green) 80%, transparent);
	border-radius: 999px;
	vertical-align: middle;
}

.mono {
	display: none;
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
	color: var(--MP-secondary-gray);
	font-size: 12px;
}

.deltaBadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--MP-crimson-red) 40%, transparent);
	background: color-mix(in srgb, var(--MP-crimson-red) 14%, transparent);
	font-weight: 800;
	font-size: 12px;
	white-space: nowrap;
}

.deltaBadge .miniDot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--MP-crimson-red) 92%, transparent);
	display: inline-block;
}

/* Accordions (details/summary sections) */
details.accordion {
	border-top: 1px solid
		color-mix(in srgb, var(--MP-off-white) 6%, transparent);
	padding-top: 10px;
	margin-top: 10px;
}

details.accordion summary {
	cursor: pointer;
	list-style: none;
	font-weight: 900;
	font-size: 14px;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--MP-off-white);
}

details.accordion summary::-webkit-details-marker {
	display: none;
}

.accBody {
	margin-top: 10px;
	color: var(--MP-secondary-gray);
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 980px;
}

.bullets {
	margin: 10px 0 0;
	padding-left: 18px;
	color: var(--MP-secondary-gray);
}

.bullets li {
	margin: 8px 0;
	font-weight: 300;
	color: var(--MP-secondary-gray);
}

/* Tier override */
details.tierPanel summary {
	color: var(--MP-teal);
	font-weight: 800;
	font-size: 13.5px;
}

.tierGrid {
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.tierOpt {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 10%, transparent);
	background: rgba(0, 0, 0, 0.16);
	border-radius: 14px;
	padding: 12px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	cursor: pointer;
	user-select: none;
}

.tierOpt input {
	margin-top: 4px;
}

.tierName {
	font-weight: 900;
	letter-spacing: 0.2px;
}

.tierDesc {
	color: var(--MP-secondary-gray);
	font-size: 12.5px;
	margin-top: 3px;
	line-height: 1.35;
}

.rerunRow {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.miniHelp {
	margin-top: 10px;
	color: var(--MP-secondary-gray);
	font-size: 12.5px;
	line-height: 1.4;
	display: none;
}

.linkBox {
	margin-top: 10px;
	border: 1px dashed color-mix(in srgb, var(--MP-off-white) 16%, transparent);
	background: rgba(0, 0, 0, 0.18);
	padding: 10px 12px;
	border-radius: 2px;
	color: var(--MP-secondary-gray);
	font-size: 12px;
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
	word-break: break-all;
}

.emptyState {
	color: var(--MP-secondary-gray);
	font-size: 13.5px;
	line-height: 1.5;
}

.footerTip {
	margin-top: 10px;
	color: var(--MP-secondary-gray);
	font-size: 12.5px;
	line-height: 1.4;
}

.hidden {
	display: none;
}

/* Outlier side styling */
.miniDot {
	background: var(--MP-crimson-red);
	box-shadow: 0 0 0 4px
		color-mix(in srgb, var(--MP-crimson-red) 18%, transparent);
}

.miniDot--low {
	background: var(--MP-solar-gold);
	box-shadow: 0 0 0 4px
		color-mix(in srgb, var(--MP-solar-gold) 18%, transparent);
}

.deltaChip--high {
	border-color: color-mix(in srgb, var(--MP-crimson-red) 38%, transparent);
}

/* Progress Panel */
.progressPanel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	padding: 12px 18px;
	background: #111;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	display: none;
	font-family: var(--MP-primary-font);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ppRow1 {
	font-size: 15px;
	margin-bottom: 4px;
	color: var(--MP-lime-green);
}

.ppRow2 {
	font-size: 13px;
	color: var(--MP-off-white);
	margin-bottom: 2px;
}

.ppRow3 {
	font-size: 12px;
	color: var(--MP-secondary-gray);
	font-family: monospace;
}

#ID_BTN_HISTORY,
#ID_BTN_EXPORT_XLS {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0.7rem 1.6rem;
	border-radius: 999px;
	border: none;
	font-size: var(--MP-font-size-sm);
	font-weight: var(--MP-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: none;
	cursor: pointer;
	background-color: var(--MP-magenta);
	color: #050505;
	transition:
		transform 0.06s ease-in-out,
		box-shadow 0.12s ease,
		filter 0.12s ease;
	text-decoration: none;
}

#ID_BTN_CANCEL,
#ID_BTN_EXPORT_XLS,
#ID_BTN_HISTORY {
	background-color: var(--MP-charcoal-gray);
	color: var(--text-main);
}

#ID_BTN_CANCEL:hover,
#ID_BTN_EXPORT_XLS:hover,
#ID_BTN_HISTORY:hover {
	background-color: var(--MP-lime-green);
	color: black;
}

#ID_BTN_EXPORT_XLS {
	border-radius: 14px;
	min-height: 83px;
	color: var(--text-muted);
	font-weight: 300;
	background-color: var(--MP-charcoal-gray);
	border: var(--MP-off-white) 1px solid;
}

.cro-report-drawer {
	position: fixed;
	inset: 0;
	z-index: 2200;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.cro-report-drawer.is-open {
	pointer-events: auto;
}

.cro-report-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.58);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.cro-report-drawer-panel {
	position: relative;
	z-index: 1;
	width: min(80vw, 1480px);
	height: 100vh;
	background: linear-gradient(170deg, #0f1014, #0b0c0f);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translate3d(42px, 0, 0) scale(0.99);
	transition:
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
	will-change: transform, opacity;
}

.cro-report-drawer.is-open .cro-report-drawer-backdrop {
	opacity: 1;
}

.cro-report-drawer.is-open .cro-report-drawer-panel {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.cro-report-drawer-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
}

.cro-report-drawer-title-wrap {
	min-width: 0;
	display: none;
}
body.is-admin .cro-report-drawer-title-wrap {
	display: block;
}

.cro-report-drawer-kicker {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 700;
}

.cro-report-drawer-title {
	margin: 2px 0 0;
	font-size: 16px;
	color: #f1f1f1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cro-report-drawer-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.56);
	margin-top: 2px;
}

.cro-report-drawer-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.cro-report-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 10px 16px 22px;
}

.cro-report-drawer-body #report-section {
	display: block !important;
}

/* ── CRO Native Drawer Panes (CRO-UI-07) ── */
.cro-pane-loading {
	padding: 32px 24px;
	text-align: center;
	color: var(--text-muted, #888);
	font-size: 14px;
}
.cro-pane-loading.xray-hidden { display: none; }

.cro-pane-content { padding: 24px 18px; }
.cro-pane-content:empty { display: none; }

.cro-pane-error {
	padding: 32px 24px;
	text-align: center;
	color: #ff5252;
	font-size: 14px;
}

.cro-overview-score-hero {
	text-align: center;
	padding: 32px 0 24px;
}
.cro-score-value {
	font-size: 48px;
	font-weight: 700;
	color: var(--MP-lime-green);
	line-height: 1;
}
.cro-score-label {
	font-size: 13px;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 8px;
}
.cro-overview-summary {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255,255,255,0.85);
	max-width: 680px;
	margin: 0 auto;
}
.cro-placeholder {
	padding: 24px;
	color: var(--text-muted, #888);
	font-size: 14px;
	text-align: center;
}

/* ── CRO-UI-08: Score hero band modifiers ── */
.cro-score-value--elite   { color: var(--MP-lime-green); }
.cro-score-value--good    { color: #49a761; }
.cro-score-value--watch   { color: #d4a642; }
.cro-score-value--critical,
.cro-score-value--red     { color: #ff5252; }
.cro-score-value--green   { color: #49a761; }
.cro-score-value--neutral { color: rgba(255,255,255,0.6); }

/* ── CRO-UI-08: Overview section headings ── */
.cro-overview-section {
	padding: 24px 0;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.cro-overview-heading {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted, #888);
	margin: 0 0 16px;
	font-weight: 600;
}

/* ── CRO-UI-08: Section score strip ── */
.cro-score-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cro-score-chip {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 6px;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.15s;
}
.cro-score-chip:hover {
	background: rgba(255,255,255,0.1);
}
.cro-chip-name  { font-weight: 500; }
.cro-chip-score { font-weight: 700; }
.cro-score-chip--elite .cro-chip-score   { color: var(--MP-lime-green); }
.cro-score-chip--good .cro-chip-score,
.cro-score-chip--green .cro-chip-score   { color: #49a761; }
.cro-score-chip--watch .cro-chip-score   { color: #d4a642; }
.cro-score-chip--critical .cro-chip-score,
.cro-score-chip--red .cro-chip-score     { color: #ff5252; }
.cro-score-chip--neutral .cro-chip-score { color: rgba(255,255,255,0.6); }

/* ── CRO-UI-08: Critical impact cards ── */
.cro-critical-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cro-critical-card {
	background-color: black;
	border: 1px solid var(--surface-border);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.75);
	color: #ccc;
	font-family: var(--MP-primary-font);
	border-radius: 18px;
	padding: 16px 18px;
	text-align: left;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background 0.15s, border-color 0.15s;
}
.cro-critical-card:hover {
	background-color: #111;
	border-color: rgba(255, 255, 255, 0.25);
}
.cro-critical-title {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 6px;
}
.cro-critical-summary {
	font-size: 13px;
	color: rgba(255,255,255,0.7);
	line-height: 1.5;
}
.cro-critical-badges {
	margin-top: 10px;
	display: flex;
	gap: 8px;
}
.cro-critical-badge {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
}

/* ── CRO-UI-08: Top strengths ── */
.cro-strengths-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cro-strength-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: rgba(255,255,255,0.04);
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid rgba(255,255,255,0.06);
	transition: background 0.15s;
}
.cro-strength-row:hover {
	background: rgba(255,255,255,0.08);
}
.cro-strength-name {
	font-size: 14px;
	color: rgba(255,255,255,0.85);
}
.cro-strength-score {
	font-size: 16px;
	font-weight: 700;
}
.cro-strength--green .cro-strength-score   { color: var(--MP-lime-green); }
.cro-strength--red .cro-strength-score     { color: #ff5252; }
.cro-strength--neutral .cro-strength-score { color: rgba(255,255,255,0.6); }

/* ── CRO-UI-08: View priorities CTA ── */
.cro-overview-cta-wrap {
	text-align: center;
	padding: 32px 0 16px;
}
.cro-view-priorities-cta {
	background: var(--MP-lime-green);
	color: #000;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 32px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s;
}
.cro-view-priorities-cta:hover {
	opacity: 0.85;
}

/* ── CRO-UI-10: Priority bucket groups ── */
.cro-priority-bucket { padding: 20px 0; }
.cro-priority-bucket + .cro-priority-bucket { border-top: 1px solid rgba(255,255,255,0.08); }
.cro-bucket-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.cro-bucket-label {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.cro-bucket-count { font-size: 12px; color: var(--text-muted, #888); }
.cro-priority-bucket--critical .cro-bucket-label { color: #ff5252; }
.cro-priority-bucket--high .cro-bucket-label     { color: #ffb74d; }
.cro-priority-bucket--low .cro-bucket-label      { color: var(--text-muted, #888); }

/* ── CRO-UI-10: Priority cards (collapsed) ── */
.cro-priority-cards { display: flex; flex-direction: column; gap: 8px; }
.cro-priority-card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
	padding: 14px 16px;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	width: 100%;
}
.cro-priority-card:hover { background: rgba(255,255,255,0.07); }
.cro-pri-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.cro-pri-summary { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.cro-pri-meta { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.cro-pri-section { font-size: 11px; color: rgba(255,255,255,0.5); }
.cro-pri-badge {
	font-size: 11px;
	padding: 1px 7px;
	border-radius: 4px;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
}

/* ── CRO-UI-10: Priority cards (expanded) ── */
.cro-pri-expanded { display: none; }
.cro-priority-card.is-expanded {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.15);
}
.cro-priority-card.is-expanded .cro-pri-expanded {
	display: block;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.cro-pri-detail { margin-bottom: 14px; }
.cro-pri-detail:last-child { margin-bottom: 0; }
.cro-pri-detail h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted, #888);
	margin: 0 0 6px;
	font-weight: 600;
}
.cro-pri-detail p {
	font-size: 14px;
	color: rgba(255,255,255,0.8);
	line-height: 1.6;
	margin: 0;
}

/* ── CRO-UI-10: Expanded card accent per bucket ── */
.cro-priority-bucket--critical .cro-priority-card.is-expanded { border-color: rgba(255,80,80,0.3); }
.cro-priority-bucket--high .cro-priority-card.is-expanded     { border-color: rgba(255,183,77,0.3); }

/* ── CRO-UI-11: Deep Dive outcome groups ── */
.cro-dd-group {
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cro-dd-group-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	cursor: pointer;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
}
.cro-dd-group-label {
	font-size: 15px;
	font-weight: 600;
	color: rgba(255,255,255,0.9);
}
.cro-dd-group-chevron {
	font-size: 14px;
	color: var(--text-muted, #888);
	transition: transform 0.2s;
}
.cro-dd-group.is-open .cro-dd-group-chevron {
	transform: rotate(90deg);
}
.cro-dd-group-body {
	display: none;
	padding-bottom: 16px;
}
.cro-dd-group.is-open .cro-dd-group-body {
	display: block;
}

/* ── CRO-UI-11: Deep Dive section cards ── */
.cro-dd-section {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 10px;
}
.cro-dd-section:last-child { margin-bottom: 0; }
.cro-dd-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.cro-dd-section-title {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}
.cro-dd-section-header .cro-score-chip {
	padding: 4px 10px;
	font-size: 12px;
}
.cro-dd-section-prose {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,0.75);
}

/* ── CRO-UI-11: Deep Dive action links ── */
.cro-dd-section-actions {
	margin-top: 12px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.cro-dd-link {
	font-size: 12px;
	color: var(--MP-lime-green);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cro-dd-link:hover { opacity: 0.8; }
.cro-dd-link[data-action="evidence"],
.cro-dd-link[data-action="evidence-pri"] { color: var(--MP-lime-green); }

/* ── CRO-UI-12: Evidence viewer overlay ── */
.cro-evidence-viewer {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(9,10,13,0.97);
	z-index: 10;
	display: flex;
	flex-direction: column;
}
.cro-evidence-viewer.xray-hidden { display: none; }

.cro-evidence-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	flex-shrink: 0;
}
.cro-evidence-back {
	background: none;
	border: none;
	color: var(--MP-lime-green);
	cursor: pointer;
	font-size: 13px;
	padding: 0;
}
.cro-evidence-back:hover { opacity: 0.8; }
.cro-evidence-title {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	flex: 1;
}
.cro-evidence-counter {
	font-size: 12px;
	color: var(--text-muted, #888);
}

.cro-evidence-body {
	flex: 1;
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.cro-evidence-loading {
	color: var(--text-muted, #888);
	font-size: 14px;
}
.cro-evidence-loading.xray-hidden { display: none; }
.cro-evidence-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
}
.cro-evidence-img.xray-hidden { display: none; }
.cro-evidence-prose {
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-primary, #e0e0e0);
	overflow-y: auto;
	max-height: 100%;
	padding: 16px 20px;
}
.cro-evidence-prose p {
	margin: 0 0 12px 0;
}
.cro-evidence-prose p:last-child {
	margin-bottom: 0;
}
.cro-evidence-prose.xray-hidden { display: none; }

.cro-evidence-nav {
	display: flex;
	justify-content: space-between;
	padding: 12px 18px;
	border-top: 1px solid rgba(255,255,255,0.08);
	flex-shrink: 0;
}
.cro-evidence-nav-btn {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.8);
	padding: 8px 20px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	transition: background 0.15s;
}
.cro-evidence-nav-btn:hover { background: rgba(255,255,255,0.12); }
.cro-evidence-nav-btn:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 767px) {
	.cro-evidence-viewer {
		position: fixed;
		z-index: 2300;
	}
}

/* ── Tool recommendation panels (CRO-UI-13) ── */
.cro-tools-panel {
	margin-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.06);
	padding-top: 8px;
}
.cro-tools-toggle {
	background: none; border: none; color: var(--text-muted, #888);
	font-size: 12px; cursor: pointer; padding: 4px 0;
	display: flex; align-items: center; gap: 6px;
	width: 100%; text-align: left;
}
.cro-tools-toggle:hover { color: rgba(255,255,255,0.7); }
.cro-tools-chevron { font-size: 10px; transition: transform 0.15s; }
.cro-tools-panel.is-open .cro-tools-chevron { transform: rotate(90deg); }
.cro-tools-body.xray-hidden { display: none; }
.cro-tools-body {
	display: flex; flex-direction: column; gap: 8px;
	padding: 8px 0 4px;
}
.cro-tool-card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 6px; padding: 10px 12px;
}
.cro-tool-card-header {
	display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.cro-tool-name { font-size: 13px; font-weight: 600; color: #fff; }
.cro-tool-dev { font-size: 11px; color: var(--text-muted, #888); }
.cro-tool-desc {
	font-size: 12px; color: rgba(255,255,255,0.65);
	margin: 0 0 6px; line-height: 1.4;
}
.cro-tool-meta {
	display: flex; gap: 12px; font-size: 11px;
	color: var(--text-muted, #888); margin-bottom: 4px;
}
.cro-tool-link {
	font-size: 12px; color: var(--MP-lime-green);
	text-decoration: none;
}
.cro-tool-link:hover { text-decoration: underline; }

/* ── Run-over-run comparison (CRO-UI-14) ── */
.cro-comparison-section { margin-top: 16px; }
.cro-comparison-meta {
	font-size: 11px; color: var(--text-muted, #888);
	margin-bottom: 10px;
}
.cro-comp-group { margin-bottom: 12px; }
.cro-comp-group-label {
	font-size: 12px; font-weight: 600;
	margin: 0 0 6px; padding: 0;
}
.cro-comp-group-label.cro-comp--improved { color: #34d399; }
.cro-comp-group-label.cro-comp--regressed { color: #f87171; }
.cro-comp-group-label.cro-comp--unresolved { color: var(--text-muted, #888); }
.cro-comp-row {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 10px; border-radius: 4px;
	font-size: 12px; margin-bottom: 2px;
	background: rgba(255,255,255,0.03);
}
.cro-comp-name { flex: 1; color: rgba(255,255,255,0.85); }
.cro-comp-scores { color: var(--text-muted, #888); font-size: 11px; }
.cro-comp-delta { font-weight: 600; min-width: 48px; text-align: right; }
.cro-comp--improved .cro-comp-delta { color: #34d399; }
.cro-comp--regressed .cro-comp-delta { color: #f87171; }
.cro-comp--unresolved .cro-comp-delta { color: var(--text-muted, #888); }
.cro-comp-empty {
	font-size: 12px; color: var(--text-muted, #888);
	padding: 8px 0;
}

/* ── CRO report readability refresh ── */
.cro-report-drawer .cro-report-drawer-panel {
	--cro-readable-max-width: 980px;
	--cro-copy-color: rgba(255, 255, 255, 0.84);
	--cro-muted-copy: rgba(255, 255, 255, 0.68);
	--cro-score-elite: var(--MP-lime-green);
	--cro-score-good: #49a761;
	--cro-score-watch: #d4a642;
	--cro-score-critical: #ff5252;
	--cro-score-green: var(--cro-score-good);
	font-family: var(--MP-secondary-font);
}

.cro-report-drawer .cro-report-drawer-title-wrap {
	flex: 1 1 auto;
}

.cro-report-drawer button {
	font-family: inherit;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.cro-report-drawer .cro-report-drawer-title,
.cro-report-drawer .cro-overview-heading,
.cro-report-drawer .cro-bucket-label,
.cro-report-drawer .cro-dd-group-label,
.cro-report-drawer .cro-score-value {
	font-family: var(--MP-primary-font);
}

.cro-report-drawer .cro-score-value--elite,
.cro-report-drawer .cro-score-chip--elite .cro-chip-score {
	color: var(--cro-score-elite);
}

.cro-report-drawer .cro-score-value--good,
.cro-report-drawer .cro-score-value--green,
.cro-report-drawer .cro-score-chip--good .cro-chip-score,
.cro-report-drawer .cro-score-chip--green .cro-chip-score,
.cro-report-drawer .cro-strength--green .cro-strength-score,
.cro-report-drawer .cro-comp-group-label.cro-comp--improved,
.cro-report-drawer .cro-comp--improved .cro-comp-delta {
	color: var(--cro-score-good);
}

.cro-report-drawer .cro-score-value--watch,
.cro-report-drawer .cro-score-chip--watch .cro-chip-score {
	color: var(--cro-score-watch);
}

.cro-report-drawer .cro-score-value--critical,
.cro-report-drawer .cro-score-value--red,
.cro-report-drawer .cro-score-chip--critical .cro-chip-score,
.cro-report-drawer .cro-score-chip--red .cro-chip-score {
	color: var(--cro-score-critical);
}

.cro-report-drawer .cro-report-drawer-header {
	align-items: flex-start;
	gap: 20px;
	padding: 18px 24px 14px;
}

.cro-report-drawer .cro-report-drawer-kicker {
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72);
}

.cro-report-drawer .cro-report-drawer-title {
	margin: 4px 0 0;
	font-size: 20px;
	line-height: 1.3;
	white-space: normal;
}

.cro-report-drawer .cro-report-drawer-meta {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cro-muted-copy);
}

.cro-report-drawer .cro-report-drawer-actions {
	gap: 12px;
}

.cro-report-drawer .cro-report-drawer-actions .bv-button,
.cro-report-drawer .cro-view-priorities-cta {
	font-family: inherit;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.01em;
	border-radius: 999px;
	box-shadow: none;
}

.cro-report-drawer .cro-report-drawer-actions .bv-button {
	padding: 10px 16px;
}

.cro-report-drawer .cro-report-drawer-body {
	padding: 0 24px 30px;
}

.cro-report-drawer .drawer-tab-switcher {
	gap: 18px;
	padding: 0 24px;
}

.cro-report-drawer .drawer-tab {
	padding: 12px 4px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.74);
}

.cro-report-drawer .drawer-tab[aria-selected="true"] {
	color: var(--MP-lime-green);
}

.cro-report-drawer .cro-pane-loading,
.cro-report-drawer .cro-pane-error,
.cro-report-drawer .cro-pane-content {
	width: min(100%, var(--cro-readable-max-width));
	margin: 0 auto;
}

.cro-report-drawer .cro-pane-loading,
.cro-report-drawer .cro-pane-error {
	padding: 40px 0;
}

.cro-report-drawer .cro-pane-content {
	padding: 32px 0 40px;
}

.cro-report-drawer .cro-overview-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.85fr);
	gap: 24px;
	align-items: stretch;
	margin-bottom: 8px;
}

.cro-report-drawer .cro-overview-summary-card {
	padding: 28px 30px;
	border-radius: 18px;
	border: 1px solid rgba(212, 166, 66, 0.28);
	background:
		linear-gradient(135deg, rgba(212, 166, 66, 0.12), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.02) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cro-report-drawer .cro-overview-summary-kicker {
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #d4a642;
}

.cro-report-drawer .cro-score-label {
	margin-top: 10px;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0.01em;
}

.cro-report-drawer .cro-overview-score-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 172px;
	grid-template-areas:
		"value scale"
		"label scale"
		"bench bench";
	column-gap: 18px;
	row-gap: 0;
	align-items: start;
	padding: 24px 22px 22px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	text-align: left;
}

.cro-report-drawer .cro-overview-score-card--elite {
	background: rgba(39, 255, 18, 0.08);
	border-color: rgba(39, 255, 18, 0.2);
}

.cro-report-drawer .cro-overview-score-card--good,
.cro-report-drawer .cro-overview-score-card--green {
	background: rgba(73, 167, 97, 0.08);
	border-color: rgba(73, 167, 97, 0.18);
}

.cro-report-drawer .cro-overview-score-card--watch {
	background: rgba(212, 166, 66, 0.08);
	border-color: rgba(212, 166, 66, 0.2);
}

.cro-report-drawer .cro-overview-score-card--critical,
.cro-report-drawer .cro-overview-score-card--red {
	background: rgba(255, 82, 82, 0.08);
	border-color: rgba(255, 82, 82, 0.18);
}

.cro-report-drawer .cro-overview-score-card--neutral {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
}

.cro-report-drawer .cro-overview-score-card .cro-score-value,
.cro-report-drawer .cro-overview-score-hero .cro-score-value {
	grid-area: value;
	font-size: 44px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.95);
}

.cro-report-drawer .cro-overview-score-card .cro-score-label,
.cro-report-drawer .cro-overview-score-hero .cro-score-label {
	grid-area: label;
	margin-top: 4px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.68);
}

.cro-report-drawer .cro-overview-summary {
	margin: 0;
	font-size: 18px;
	line-height: 1.82;
	color: rgba(255, 255, 255, 0.92);
	max-width: none;
}

.cro-report-drawer .cro-overview-section {
	padding: 28px 0;
}

.cro-report-drawer .cro-overview-heading {
	margin-bottom: 14px;
	font-size: 17px;
	text-transform: none;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.92);
}

.cro-report-drawer .cro-score-strip {
	gap: 10px;
}

.cro-report-drawer .cro-score-chip {
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.035);
	border-color: rgba(255, 255, 255, 0.09);
	color: rgba(255, 255, 255, 0.76);
}

.cro-report-drawer .cro-score-scale-block {
	grid-area: scale;
	display: flex;
	justify-content: flex-end;
	margin: 4px 0 0;
	width: 100%;
	align-items: flex-end;
	align-self: center;
}

.cro-report-drawer .cro-score-scale {
	position: relative;
	width: 164px;
	height: 220px;
	font-family: var(--MP-primary-font);
}

.cro-report-drawer .cro-score-scale-track {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 26px;
	right: 64px;
}

.cro-report-drawer .cro-score-scale-tick {
	position: absolute;
	right: 0;
	height: 3px;
	border-radius: 999px;
	transform: translateY(50%);
	background: currentColor;
}

.cro-report-drawer .cro-score-scale-tick.is-major {
	width: 34px;
}

.cro-report-drawer .cro-score-scale-tick.is-minor {
	width: 16px;
	opacity: 0.92;
}

.cro-report-drawer .cro-score-scale-tone--critical {
	color: var(--cro-score-critical);
}

.cro-report-drawer .cro-score-scale-tone--watch {
	color: var(--cro-score-watch);
}

.cro-report-drawer .cro-score-scale-tone--good {
	color: var(--cro-score-good);
}

.cro-report-drawer .cro-score-scale-tone--elite {
	color: var(--cro-score-elite);
}

.cro-report-drawer .cro-score-scale-tone--neutral {
	color: rgba(255, 255, 255, 0.82);
}

.cro-report-drawer .cro-score-scale-tone--strong,
.cro-report-drawer .cro-score-scale-tone--best {
	color: var(--cro-score-good);
}

.cro-report-drawer .cro-score-scale-pointer {
	position: absolute;
	left: -18px;
	bottom: 0;
	width: 18px;
	height: 0;
	transform: translateY(50%);
}

.cro-report-drawer .cro-score-scale-pointer-triangle {
	display: block;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid rgba(255, 255, 255, 0.96);
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.18));
}

.cro-report-drawer .cro-score-scale-labels {
	position: absolute;
	top: 10px;
	bottom: 10px;
	right: 0;
	width: 60px;
}

.cro-report-drawer .cro-score-scale-label {
	position: absolute;
	right: 0;
	transform: translateY(50%);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	color: currentColor;
}

.cro-report-drawer .cro-score-scale-label.cro-score-scale-tone--elite,
.cro-report-drawer .cro-score-scale-label.cro-score-scale-tone--good,
.cro-report-drawer .cro-score-scale-label.cro-score-scale-tone--best,
.cro-report-drawer .cro-score-scale-label.cro-score-scale-tone--strong {
	text-shadow: 0 0 12px rgba(90, 255, 90, 0.2);
}

.cro-report-drawer .cro-score-benchmarks {
	grid-area: bench;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
	font-family: var(--MP-primary-font);
}

.cro-report-drawer .cro-score-benchmark {
	
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.86);
}

.cro-report-drawer .cro-score-benchmark strong {
	font-weight: 700;
	color: rgba(255, 255, 255, 0.98);
}

.cro-report-drawer .cro-critical-list,
.cro-report-drawer .cro-priority-cards {
	gap: 14px;
}

.cro-report-drawer .cro-critical-card,
.cro-report-drawer .cro-priority-card,
.cro-report-drawer .cro-dd-group-header,
.cro-report-drawer .cro-tools-toggle,
.cro-report-drawer .cro-evidence-back,
.cro-report-drawer .cro-evidence-nav-btn,
.cro-report-drawer .cro-dd-link {
	text-transform: none;
	letter-spacing: normal;
}

.cro-report-drawer .cro-critical-card,
.cro-report-drawer .cro-priority-card {
	padding: 18px 20px;
	border-radius: 12px;
	line-height: 1.65;
}

.cro-report-drawer .cro-priority-card {
	cursor: pointer;
}

.cro-report-drawer .cro-pri-toggle {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.cro-report-drawer .cro-pri-toggle:focus-visible {
	outline: 2px solid rgba(73, 167, 97, 0.7);
	outline-offset: 4px;
	border-radius: 8px;
}

.cro-report-drawer .cro-critical-title,
.cro-report-drawer .cro-pri-title {
	font-size: 18px;
	line-height: 1.35;
	margin-bottom: 8px;
}

.cro-report-drawer .cro-critical-summary,
.cro-report-drawer .cro-pri-summary,
.cro-report-drawer .cro-pri-detail p,
.cro-report-drawer .cro-dd-section-prose,
.cro-report-drawer .cro-tool-desc {
	font-size: 15px;
	line-height: 1.75;
	color: var(--cro-copy-color);
	max-width: 72ch;
}

.cro-report-drawer .cro-critical-badges,
.cro-report-drawer .cro-pri-meta {
	margin-top: 12px;
	gap: 10px;
	flex-wrap: wrap;
}

.cro-report-drawer .cro-critical-badge,
.cro-report-drawer .cro-pri-badge {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	color: var(--cro-muted-copy);
	text-transform: none;
	font-weight: 500;
}

.cro-report-drawer .cro-priority-bucket {
	padding: 28px 0;
}

.cro-report-drawer .cro-bucket-heading {
	align-items: baseline;
	gap: 10px;
	margin: 0 0 18px;
}

.cro-report-drawer .cro-bucket-label {
	font-size: 18px;
	text-transform: none;
	letter-spacing: 0;
}

.cro-report-drawer .cro-bucket-count {
	font-size: 14px;
}

.cro-report-drawer .cro-pri-section {
	font-size: 12px;
	color: var(--cro-muted-copy);
	font-weight: 600;
}

.cro-report-drawer .cro-priority-card.is-expanded .cro-pri-expanded {
	margin-top: 18px;
	padding-top: 18px;
}

.cro-report-drawer .cro-pri-detail {
	margin-bottom: 18px;
}

.cro-report-drawer .cro-pri-detail h4 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.74);
}

.cro-report-drawer .cro-dd-group-header {
	padding: 18px 0;
}

.cro-report-drawer .cro-dd-group-label {
	font-size: 18px;
	line-height: 1.35;
}

.cro-report-drawer .cro-dd-section {
	padding: 18px 20px;
	border-radius: 12px;
	margin-bottom: 14px;
}

.cro-report-drawer .cro-dd-section-header {
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
}

.cro-report-drawer .cro-dd-section-title {
	font-size: 17px;
	line-height: 1.35;
}

.cro-report-drawer .cro-dd-section-actions {
	margin-top: 14px;
	gap: 16px;
}

.cro-report-drawer .cro-dd-link,
.cro-report-drawer .cro-tool-link {
	font-size: 13px;
	font-weight: 600;
}

.cro-report-drawer .cro-tools-panel {
	margin-top: 16px;
	padding-top: 12px;
}

.cro-report-drawer .cro-tools-toggle {
	justify-content: space-between;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--MP-lime-green) 42%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--MP-lime-green) 14%, transparent);
	font-size: 14px;
	font-weight: 700;
	color: var(--MP-lime-green);
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cro-report-drawer .cro-tools-toggle:hover {
	background: color-mix(in srgb, var(--MP-lime-green) 22%, transparent);
	border-color: color-mix(in srgb, var(--MP-lime-green) 60%, transparent);
	transform: translateY(-1px);
}

.cro-report-drawer .cro-tools-toggle:focus-visible {
	outline: 2px solid var(--MP-lime-green);
	outline-offset: 2px;
}

.cro-report-drawer .cro-tools-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.cro-report-drawer .cro-tools-title {
	font-size: 15px;
	line-height: 1.2;
}

.cro-report-drawer .cro-tools-meta {
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.76);
}

.cro-report-drawer .cro-tools-chevron {
	font-size: 16px;
	color: currentColor;
}

.cro-report-drawer .cro-tools-panel.is-open .cro-tools-toggle {
	background: color-mix(in srgb, var(--MP-lime-green) 24%, transparent);
	border-color: color-mix(in srgb, var(--MP-lime-green) 72%, transparent);
}

.cro-report-drawer .cro-tools-body {
	gap: 10px;
	padding: 12px 0 4px;
}

.cro-report-drawer .cro-tool-card {
	padding: 12px 14px;
	border-radius: 10px;
}

.cro-report-drawer .cro-tool-card-header {
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 6px;
}

.cro-report-drawer .cro-tool-name {
	font-size: 14px;
}

.cro-report-drawer .cro-tool-dev,
.cro-report-drawer .cro-tool-meta,
.cro-report-drawer .cro-comparison-meta,
.cro-report-drawer .cro-comp-scores,
.cro-report-drawer .cro-comp-empty {
	font-size: 12px;
}

.cro-report-drawer .cro-tool-meta {
	flex-wrap: wrap;
	gap: 8px 12px;
}

.cro-report-drawer .cro-comp-group-label {
	margin-bottom: 8px;
	font-size: 14px;
}

.cro-report-drawer .cro-comp-row {
	padding: 8px 12px;
	gap: 10px;
	font-size: 13px;
}

@media (max-width: 820px) {
	.cro-report-drawer .cro-overview-intro {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.cro-report-drawer .cro-report-drawer-header {
		padding: 12px 16px;
	}

	.cro-report-drawer .cro-report-drawer-title {
		font-size: 16px;
	}

	.cro-report-drawer .cro-report-drawer-meta {
		font-size: 12px;
	}

	.cro-report-drawer .cro-report-drawer-body {
		padding: 0 16px 24px;
	}

	.cro-report-drawer .drawer-tab-switcher {
		gap: 12px;
		padding: 0 16px;
	}

	.cro-report-drawer .drawer-tab {
		padding: 12px 4px;
		font-size: 12px;
	}

	.cro-report-drawer .cro-pane-content {
		padding: 24px 0 32px;
	}

	.cro-report-drawer .cro-overview-intro {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.cro-report-drawer .cro-overview-summary-card,
	.cro-report-drawer .cro-overview-score-card {
		padding: 20px 18px;
		border-radius: 14px;
	}

	.cro-report-drawer .cro-overview-score-card {
		grid-template-columns: minmax(0, 1fr) 132px;
		column-gap: 10px;
	}

	.cro-report-drawer .cro-score-scale {
		width: 130px;
		height: 196px;
	}

	.cro-report-drawer .cro-score-scale-track {
		left: 20px;
		right: 50px;
	}

	.cro-report-drawer .cro-score-scale-labels {
		width: 46px;
	}

	.cro-report-drawer .cro-score-scale-label {
		font-size: 24px;
	}

	.cro-report-drawer .cro-overview-summary {
		font-size: 16px;
		line-height: 1.72;
	}

	.cro-report-drawer .cro-overview-heading,
	.cro-report-drawer .cro-bucket-label,
	.cro-report-drawer .cro-dd-group-label {
		font-size: 16px;
	}

	.cro-report-drawer .cro-critical-title,
	.cro-report-drawer .cro-pri-title,
	.cro-report-drawer .cro-dd-section-title {
		font-size: 16px;
	}

	.cro-report-drawer .cro-overview-summary,
	.cro-report-drawer .cro-critical-summary,
	.cro-report-drawer .cro-pri-summary,
	.cro-report-drawer .cro-pri-detail p,
	.cro-report-drawer .cro-dd-section-prose,
	.cro-report-drawer .cro-tool-desc {
		font-size: 14px;
	}
}

/* ── Toast notifications (CRO-UI-15) ── */
.cro-toast-container {
	position: fixed; bottom: 24px; right: 24px;
	z-index: 2500; display: flex; flex-direction: column;
	gap: 8px; pointer-events: none;
}
.cro-toast {
	background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.85); padding: 10px 16px;
	border-radius: 8px; font-size: 13px; max-width: 360px;
	pointer-events: auto; opacity: 0;
	transform: translateY(8px); transition: opacity 0.2s, transform 0.2s;
}
.cro-toast.is-visible { opacity: 1; transform: translateY(0); }
.cro-toast--error { border-left: 3px solid #f87171; }
.cro-toast--success { border-left: 3px solid #34d399; }
.cro-toast--info { border-left: 3px solid var(--MP-lime-green); }

/* ── Responsive polish (CRO-UI-15) ── */
@media (max-width: 480px) {
	.drawer-tab-switcher {
		gap: 12px;
		padding: 0 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.drawer-tab {
		font-size: 11px;
		white-space: nowrap;
		flex-shrink: 0;
	}
	.cro-report-drawer-header {
		padding: 10px 12px;
	}
	.cro-report-drawer-kicker { font-size: 10px; }
	.cro-overview-score-hero { padding: 16px 0; }
	.cro-score-value { font-size: 36px; }
	.cro-toast-container { bottom: 12px; right: 12px; left: 12px; }
	.cro-toast { max-width: 100%; }
}

.cro-report-drawer-body #ID_CRO_REPORT_HEADER {
	margin-top: 6px !important;
}

.cro-report-drawer-body .report-viewer-container {
	min-height: calc(100vh - 205px);
	margin-top: 12px;
}

.report-viewer-container {
	width: 100%;
	height: auto; /* Let JS decide the height */
	min-height: 800px; /* Prevent it from collapsing while loading */
	background: #000;
	border-radius: 2px;
	border: 1px solid #333;
	margin-top: 24px;
	overflow: hidden;
	position: relative;
	transition: height 0.3s ease; /* Smooth resizing */
}

.cro-report-loading-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

.dashboard-brief-drawer {
	position: fixed;
	inset: 0;
	z-index: 2150;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.dashboard-brief-drawer.is-open {
	pointer-events: auto;
}

.dashboard-brief-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.dashboard-brief-drawer-panel {
	position: relative;
	z-index: 1;
	width: min(80vw, 1460px);
	height: 100vh;
	background: linear-gradient(170deg, #0f1014, #090a0d);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translate3d(42px, 0, 0) scale(0.99);
	transition:
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
	will-change: transform, opacity;
}

.dashboard-brief-drawer.is-open .dashboard-brief-drawer-backdrop {
	opacity: 1;
}

.dashboard-brief-drawer.is-open .dashboard-brief-drawer-panel {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.dashboard-brief-drawer-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
}

.dashboard-brief-drawer-title-wrap {
	min-width: 0;
	display: none;
}
body.is-admin .dashboard-brief-drawer-title-wrap {
	display: block;
}

.dashboard-brief-drawer-kicker {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 700;
}

.dashboard-brief-drawer-title {
	margin: 2px 0 0;
	font-size: 16px;
	color: #f1f1f1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-brief-drawer-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.56);
	margin-top: 2px;
}

.dashboard-brief-drawer-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.dashboard-brief-drawer-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 14px 18px 24px;
}

.dashboard-brief-drawer-body #aiBriefTextarea {
	width: 100%;
	min-height: 80vh;
	background: #0f1219;
	color: var(--text-main);
	border-radius: 2px;
	padding: 12px;
	font-family: "Courier New", monospace;
	font-size: 0.85rem;
	line-height: 1.55;
	resize: vertical;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-sizing: border-box;
	margin: 0;
}

.dashboard-brief-drawer-body #aiBriefOutputContainer {
	display: none;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dashboard-brief-drawer-body #initialActions {
	margin-top: 14px;
}

/* ── Drawer Tab Switcher ── */
.drawer-tab-switcher {
	display: flex;
	gap: 24px;
	padding: 0 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(9, 10, 13, 0.88);
}

.drawer-tab {
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--MP-lime-green);
	padding: 10px 4px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: border-color 0.18s ease;
}

.drawer-tab:hover {
	border-bottom-color: rgba(var(--MP-lime-green-rgb, 0, 255, 100), 0.4);
}

.drawer-tab[aria-selected="true"] {
	border-bottom-color: var(--MP-lime-green);
}

.drawer-tab:focus-visible {
	outline: 2px solid var(--MP-lime-green);
	outline-offset: 2px;
}

/* ── Drawer Tab Panes ── */
.drawer-tab-pane {
	display: none;
}

.drawer-tab-pane.is-active {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}

/* ── Cockpit inside drawer ── */
#ID_DRAWER_PANE_SURVEY .cockpit-grid {
	gap: 14px;
	margin-top: 8px;
	max-width: 100%;
	overflow-y: auto;
}

#ID_DRAWER_PANE_SURVEY .brand-documents-title {
	font-size: 13px;
	margin-bottom: 4px;
}

#ID_DRAWER_PANE_SURVEY .cockpit-card {
	padding: 16px;
}

/* ── Survey Document Selector ── */
.survey-doc-selector {
	padding: 20px 0;
}

.survey-doc-selector-heading {
	color: var(--text-muted);
	font-size: 15px;
	margin-bottom: 24px;
}

.survey-doc-selector-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.survey-doc-card {
	display: block;
	background: rgba(57, 57, 57, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2px;
	padding: 24px;
	text-decoration: none;
	transition: transform 0.2s, border-color 0.2s;
	cursor: pointer;
}

.survey-doc-card:hover {
	border-color: var(--MP-lime-green);
	transform: translateY(-2px);
}

.survey-doc-card h3 {
	color: var(--MP-lime-green);
	font-family: var(--MP-primary-font);
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px 0;
}

.survey-doc-card p {
	color: var(--text-muted);
	font-family: var(--MP-primary-font);
	font-size: 13px;
	margin: 0;
	line-height: 1.5;
}

/* ── Brand Book iframe ── */
.drawer-brandbook-frame {
	width: 100%;
	flex: 1;
	min-height: 75vh;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	background: #fff;
}

.po7-results-drawer {
	position: fixed;
	inset: 0;
	z-index: 2175;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.po7-results-drawer.is-open {
	pointer-events: auto;
}

.po7-results-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.po7-results-drawer-panel {
	position: relative;
	z-index: 1;
	width: min(80vw, 1480px);
	height: 100vh;
	background: linear-gradient(170deg, #0f1014, #090a0d);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translate3d(42px, 0, 0) scale(0.99);
	transition:
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
	will-change: transform, opacity;
}

.po7-results-drawer.is-open .po7-results-drawer-backdrop {
	opacity: 1;
}

.po7-results-drawer.is-open .po7-results-drawer-panel {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.po7-results-drawer-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
}

.po7-results-drawer-title-wrap {
	min-width: 0;
	display: none;
}
body.is-admin .po7-results-drawer-title-wrap {
	display: block;
}

.po7-results-drawer-kicker {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 700;
}

.po7-results-drawer-title {
	margin: 2px 0 0;
	font-size: 16px;
	color: #f1f1f1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.po7-results-drawer-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.56);
	margin-top: 2px;
}

.po7-results-drawer-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.po7-results-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 18px 24px;
}

.po7-results-drawer-body .section:first-child {
	margin-top: 0;
}

.po7-results-drawer-summary {
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 9%, transparent);
	background: rgba(0, 0, 0, 0.22);
	border-radius: 2px;
	padding: 14px;
	margin-bottom: 14px;
}

.po7-results-drawer-summary-headline {
	margin: 0 0 10px;
}

.po7-results-drawer-summary-recent {
	margin-top: 0;
	margin-bottom: 10px;
}

.po7-results-drawer-summary .stats {
	margin-top: 0;
}

body.po7-drawer-open {
	overflow: hidden;
}

/* In XRAY embeds, render the PO7 drawer content inline so summary + outliers are both visible. */
.bv-embed .po7-results-drawer {
	position: static;
	inset: auto;
	display: block;
	pointer-events: auto;
}

.bv-embed .po7-results-drawer-backdrop {
	display: none !important;
}

.bv-embed .po7-results-drawer-panel {
	width: 100%;
	height: auto;
	opacity: 1;
	transform: none;
	border-left: 0;
	box-shadow: none;
	background: transparent;
}

.bv-embed .po7-results-drawer-header {
	position: static;
	padding: 0 0 10px;
	border-bottom: 0;
	background: transparent;
	backdrop-filter: none;
}

.bv-embed .po7-results-drawer-body {
	padding: 0;
	overflow: visible;
}

.radar-results-drawer {
	position: fixed;
	inset: 0;
	z-index: 2176;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.radar-results-drawer.is-open {
	pointer-events: auto;
}

.radar-results-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.radar-results-drawer-panel {
	position: relative;
	z-index: 1;
	width: min(80vw, 1480px);
	height: 100vh;
	background: linear-gradient(170deg, #0f1014, #090a0d);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translate3d(42px, 0, 0) scale(0.99);
	transition:
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
	will-change: transform, opacity;
}

.radar-results-drawer.is-open .radar-results-drawer-backdrop {
	opacity: 1;
}

.radar-results-drawer.is-open .radar-results-drawer-panel {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.radar-results-drawer-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
}

.radar-results-drawer-title-wrap {
	min-width: 0;
	display: none;
}
body.is-admin .radar-results-drawer-title-wrap {
	display: block;
}

.radar-results-drawer-kicker {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 700;
}

.radar-results-drawer-title {
	margin: 2px 0 0;
	font-size: 16px;
	color: #f1f1f1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.radar-results-drawer-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.56);
	margin-top: 2px;
}

.radar-results-drawer-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.radar-results-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 18px 24px;
}

.radar-results-drawer-body .section:first-child {
	margin-top: 0;
}

body.radar-drawer-open {
	overflow: hidden;
}

.lidar-results-drawer {
	position: fixed;
	inset: 0;
	z-index: 2177;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.lidar-results-drawer.is-open {
	pointer-events: auto;
}

.lidar-results-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.lidar-results-drawer-panel {
	position: relative;
	z-index: 1;
	width: min(80vw, 1480px);
	height: 100vh;
	background: linear-gradient(170deg, #0f1014, #090a0d);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translate3d(42px, 0, 0) scale(0.99);
	transition:
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
	will-change: transform, opacity;
}

.lidar-results-drawer.is-open .lidar-results-drawer-backdrop {
	opacity: 1;
}

.lidar-results-drawer.is-open .lidar-results-drawer-panel {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.lidar-results-drawer-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
}

.lidar-results-drawer-title-wrap {
	min-width: 0;
	display: none;
}
body.is-admin .lidar-results-drawer-title-wrap {
	display: block;
}

.lidar-results-drawer-kicker {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 700;
}

.lidar-results-drawer-title {
	margin: 2px 0 0;
	font-size: 16px;
	color: #f1f1f1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lidar-results-drawer-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.56);
	margin-top: 2px;
}

.lidar-results-drawer-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.lidar-results-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 18px 24px;
}

.lidar-results-drawer-body #ID_LIDAR_RESULTS {
	margin-top: 0;
}
#ID_LIDAR_RESULTS {
	flex-direction: column;
}

body.lidar-drawer-open {
	overflow: hidden;
}

.xray-results-drawer {
	position: fixed;
	inset: 0;
	z-index: 2178;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.xray-results-drawer.is-open {
	pointer-events: auto;
}

.xray-results-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.xray-results-drawer-panel {
	position: relative;
	z-index: 1;
	width: min(80vw, 1480px);
	height: 100vh;
	background: linear-gradient(170deg, #0f1014, #090a0d);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translate3d(42px, 0, 0) scale(0.99);
	transition:
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
	will-change: transform, opacity;
}

.xray-results-drawer.is-open .xray-results-drawer-backdrop {
	opacity: 1;
}

.xray-results-drawer.is-open .xray-results-drawer-panel {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.xray-results-drawer-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
}

.xray-results-drawer-title-wrap {
	min-width: 0;
	display: none;
}
body.is-admin .xray-results-drawer-title-wrap {
	display: block;
}

.xray-results-drawer-kicker {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 700;
}

.xray-results-drawer-title {
	margin: 2px 0 0;
	font-size: 16px;
	color: #f1f1f1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xray-results-drawer-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.56);
	margin-top: 2px;
}

.xray-results-drawer-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.xray-results-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 18px 24px;
}

.xray-results-drawer-body #ID_XRAY_RESULTS {
	margin-top: 0;
}

body.xray-drawer-open {
	overflow: hidden;
}

/* ── PI14 Results Drawer ────────────────────────────────────────────── */
.pi14-results-drawer {
	position: fixed;
	inset: 0;
	z-index: 2179;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.pi14-results-drawer.is-open {
	pointer-events: auto;
}

.pi14-results-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.pi14-results-drawer-panel {
	position: relative;
	z-index: 1;
	width: min(80vw, 1480px);
	height: 100vh;
	background: linear-gradient(170deg, #0f1014, #090a0d);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translate3d(42px, 0, 0) scale(0.99);
	transition:
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
	will-change: transform, opacity;
}

.pi14-results-drawer.is-open .pi14-results-drawer-backdrop {
	opacity: 1;
}

.pi14-results-drawer.is-open .pi14-results-drawer-panel {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.pi14-results-drawer-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
}

.pi14-results-drawer-title-wrap {
	min-width: 0;
	display: none;
}
body.is-admin .pi14-results-drawer-title-wrap {
	display: block;
}

.pi14-results-drawer-kicker {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 700;
}

.pi14-results-drawer-title {
	margin: 2px 0 0;
	font-size: 16px;
	color: #f1f1f1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pi14-results-drawer-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.56);
	margin-top: 2px;
}

.pi14-results-drawer-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.pi14-results-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 18px 24px;
}

.pi14-results-drawer-body .section:first-child {
	margin-top: 0;
}

body.pi14-drawer-open {
	overflow: hidden;
}

#brandUrlInput {
	margin: 10px;
	max-width: 600px;
	width: 600px;
}

/* Add this to your styles */
@keyframes pulse-amber {
	0% {
		box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4);
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
	100% {
		box-shadow: 0 0 0 8px rgba(250, 204, 21, 0);
		opacity: 1;
	}
}

.badge-processing {
	animation: pulse-amber 2s infinite;
}

iframe {
	width: 100%;
	height: 85vh;
	border: none;
}

.historyItem {
	/* Match PO7 styling */
	padding: 10px 15px;
	border-bottom: 1px solid #222;
	cursor: pointer;
	transition: background 0.2s;
}

#ID_CARD_SUMMARY {
	color: var(--text-muted);
	line-height: 24px;
}

.historyItem:hover {
	background: #00ff4805;
}

.historyItem.active {
	background: rgb(170 4 196 / 15%);
	border-left: 3px solid var(--MP-magenta);
}

.po7-history-item {
	position: relative;
}

.po7-history-item-header {
	display: flex;
	margin-bottom: 10px;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.po7-history-item-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.po7-history-item-date {
	opacity: 0.6;
}

.po7-hide-btn {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, background 0.15s ease;
	background: rgba(255, 255, 255, 0.0);
	box-shadow: 0 0 0 8px rgba(250, 204, 21, 0);
}

.po7-history-item:hover .po7-hide-btn,
.po7-hide-btn:focus-visible {
	opacity: 1;
	pointer-events: auto;
	background: rgba(255, 255, 255, 0.0);
	box-shadow: 0 0 0 8px rgba(250, 204, 21, 0);
}

.po7-hide-btn:hover,
.po7-hide-btn:focus-visible {
	background: rgba(255, 255, 255, 0.0);
	box-shadow: 0 0 0 8px rgba(250, 204, 21, 0);
	outline: none;
}

.po7-hide-btn:disabled {
	cursor: default;
	opacity: 1;
	pointer-events: none;
}

.cockpit-card-container {
	display: flex;
	flex-direction: row;
	gap: 30px;
	justify-content: space-between;
}

.cockpit-card-container > .cockpit-card {
	flex: 3 1 0%;
}

.cockpit-card-container > .film-strip-group {
	flex: 2 1 0%;
}

.cta_row {
	width: 100%;
	margin: 20px;
	padding: 12px;
	background: #111;
	border: 1px solid #333;
	color: white;
	border-radius: 8px;
}

.button-actions {
	display: flex;
	gap: 10px;
}

/* Compact layout: mobile + tablet portrait */
#ID_INPUT_STORE,
#ID_PO_TIER_SELECT {
	background-color: #00000000;
}

/* =========================================================
   THEME: TOKUHN STUDIO (Dark/Indie Mode)
   Apply class="studio-mode" to the <body> of index tools.html
   ========================================================= */

/* =========================================================
   THEME: STUDIO MODE (For slash.tokuhn.com)
   ========================================================= */

.bv-outcome-cards-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Market Intelligence Suite sub-container heading */
.market-intelligence-suite {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1240px;
}

.suite-heading {
	font-family: "Space Grotesk", sans-serif;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 10px 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* XRAY compose history panel */
.xray-compose-history {
	margin-top: 12px;
	max-height: 300px;
	overflow-y: auto;
	width: 100%;
}

.freshness-stale {
	padding: 1px 6px;
	border-radius: 4px;
	background: rgba(255, 193, 7, 0.13);
	color: #ffc107;
	font-size: 12px;
	border: 1px solid rgba(255, 193, 7, 0.25);
	text-transform: uppercase;
	font-weight: 300;
}

/* PI14 form styles */
.pi14-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

.pi14-form-row {
	display: flex;
	gap: 12px;
	align-items: flex-end;
}

.pi14-file-label {
	position: relative;
}

.pi14-file-label input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	top: 0;
	left: 0;
	z-index: 1;
}

.pi14-file-name {
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #333;
	background: #111;
	color: #aaa;
	font-size: 14px;
	cursor: pointer;
	min-height: 20px;
}

.pi14-file-label:hover .pi14-file-name {
	border-color: #555;
}

.pi14-progress {
	margin-top: 12px;
}

body.studio-mode {
	color: #e0e0e0;
	font-family: "Space Grotesk", sans-serif;
	position: relative; /* Needed for the overlay */
	min-height: 100vh;
}

/* The Magic Layer: Turns fp.png into a texture */
body.studio-mode::before {
	content: "";
	position: fixed; /* Keeps it still while scrolling */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	z-index: -1; /* Puts it behind the text */
}

/* Adjusting the Header to sit on top of the image */
body.studio-mode .bv-header {
	background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
	backdrop-filter: blur(10px); /* Frosted glass effect */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--MP-primary-font);
}

body.studio-mode .bv-header h1 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	display: none;
}

/* Making the tool cards look like "Glass" panels */
body.studio-mode .bv-outcome-card {
	background: color-mix(in srgb, var(--MP-charcoal-gray) 72%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.15); /* Thin crisp border */
	backdrop-filter: blur(5px);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
	color: #ccc;
	font-family: var(--MP-primary-font);
}

body.studio-mode .bv-outcome-card h4 {
	color: #fff;
	letter-spacing: 1px;
}

/* Button override for the dark theme */
body.studio-mode .bv-outcome-card a {
	color: var(--MP-lime-green);
	font-size: 20px;
}
body.studio-mode .bv-outcome-card a:hover {
	border-bottom: 1px solid #fff;
}

.iykyk-card.visual-card {
	background: linear-gradient(
		135deg,
		rgba(1, 1, 1, 0.8),
		rgba(19, 19, 19, 0.8)
	);
	border-radius: 2px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	color: var(--MP-off-white);

	display: flex;
	flex-direction: column;
	position: relative;

	width: 500px;
	min-height: 300px;
	padding: 20px;
	margin: 20px;

	/* no expand/collapse, no caret */
	transition: none;
}

/* reuse your floating label style */
.visual-card .iykyk-card-label {
	position: absolute;
	top: -15px;
	left: 20px;

	border-radius: 20px;
	padding: 6px 12px;
	font-size: var(--MP-font-size-xxlarge);
	font-weight: var(--MP-font-weight-bold);
	line-height: 1;
	color: var(--MP-off-white);

	display: flex;
	gap: 6px;
	align-items: center;
}

.visual-card-image-wrap {
	margin: 16px 0;
	border-radius: 2px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.4);
	/* optional: subtle border or shadow if you want it to pop */
	border: 1px solid rgba(255, 255, 255, 0.07);
}

.visual-card-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: contain;
}

/* ===========================
   IYKYK Cards (drop-in block)
   =========================== */
/* 4) Card shell + line-length cap for comfortable reading */
.iykyk-card {
	position: relative;
	background: linear-gradient(
		135deg,
		var(--MP-card-one-one),
		var(--MP-card-one-two)
	);
	border-radius: 2px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	color: var(--MP-off-white);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 500px;
	max-width: 64ch;
	/* ?60?68 characters line length */
	margin: 20px;
	font-feature-settings:
		"tnum" 1,
		"lnum" 1;
	/* clean numbers */
	transition: height 0.6s ease;
}

/* Optional gradient utility overrides (all dark) */
.iykyk-card.grad-1,
.iykyk-card.grad-2,
.iykyk-card.grad-3,
.iykyk-card.grad-4,
.iykyk-card.grad-5,
.iykyk-card.grad-6 {
	background: linear-gradient(
		135deg,
		rgba(1, 1, 1, 0.8),
		rgba(19, 19, 19, 0.8)
	);
}

/* 5) Label badge */
.iykyk-card-label {
	position: absolute;
	top: -15px;
	left: 20px;
	background: rgba(60, 60, 60, 0);
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 24px;
	font-weight: 300;
	font-family: "Courier New", Courier, monospace;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	margin-top: 6px;
	display: block;
}

#ID_STRIP_TRUTHS .iykyk-card-label {
	top: 10px;
}

/* 6) Typography */
.iykyk-card .insight-card-title {
	font-family: var(--font-heading);
	font-weight: 300;
	letter-spacing: var(--tracking-tight);
	line-height: 1.15;
	margin-top: 6px;
	margin-bottom: 20px;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.iykyk-card .insight-card-preview {
	font-family: var(--font-sans);
	font-weight: 500;
	font-style: italic;
	letter-spacing: var(--tracking-normal);
	line-height: 1.45;
	/* still vivid lime, but slightly calmer on dark */
	color: color-mix(in srgb, var(--MP-magenta) 85%, var(--MP-magenta) 15%);
	margin-bottom: 14px;
}

.iykyk-card .insight-card-first,
.iykyk-card .insight-card-body {
	font-family: var(--font-sans);
	font-weight: 400;
	letter-spacing: var(--tracking-normal);
	font-size: clamp(16px, 1.05vw, 18px);
	line-height: 1.65;
	transition:
		max-height 0.6s ease,
		opacity 0.25s ease;
}

.iykyk-card .insight-card-body p {
	margin-bottom: 10px;
	margin-top: 10px;
}

.iykyk-card .insight-card-body p + p {
	margin-top: 0.8em;
}

/* clearer paragraph rhythm */

/* 7) Expand / collapse transitions (no display:none) */
.iykyk-card .insight-card-first {
	overflow: hidden;
	max-height: 500px;
	/* enough for the preview paragraph */
	opacity: 1;
}

.iykyk-card .insight-card-body {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
}

.iykyk-card.iykyk-open .insight-card-first {
	max-height: 0;
	opacity: 0;
}

.iykyk-card.iykyk-open .insight-card-body {
	max-height: var(--iykyk-body-max, 1200px);
	/* JS sets precise height */
	opacity: 1;
}

/* Slight contrast lift for long reads */
.iykyk-card.iykyk-open {
	color: #e9eef2;
}

/* 8) Trigger (Read more/less) with chevron */
.insight-card-view {
	font-family: var(--font-sans);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-top: 30px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
	outline: none;
}

.insight-card-view:hover {
	text-decoration: none;
}

.insight-card-view:focus-visible {
	outline: 2px solid var(--MP-lime-green, #93ff00);
	outline-offset: 3px;
}

.insight-card-view::after {
	content: "^";
	transform: translateY(1px);
	transition: transform 0.2s ease;
	font-weight: 500;
	opacity: 0.9;
	font-size: 30px;
	padding-top: 10px;
	color: var(--MP-lime-green);
}

.iykyk-card.iykyk-open .insight-card-view::after {
	transform: rotate(180deg) translateY(-1px);
}

/* 10) Grid fit when inside .about-pillars */
.about-pillars .iykyk-card {
	min-width: 300px;
}

/* Insight preview color matches pillar badge color by section */
#ID_PILLAR_SECTION_ACQUIRE .iykyk-card .insight-card-preview {
	color: var(--MP-magenta);
}

#ID_PILLAR_SECTION_SELL .iykyk-card .insight-card-preview {
	color: var(--MP-lime-green);
}

#ID_PILLAR_SECTION_GROW .iykyk-card .insight-card-preview {
	color: var(--MP-magenta);
}

#ID_PILLAR_SECTION_THRIVE .iykyk-card .insight-card-preview {
	color: var(--MP-lime-green);
}

#ID_PILLAR_SECTION_BUILD .iykyk-card .insight-card-preview {
	color: var(--MP-magenta);
}

/* Individual card styling */
.insight-card {
	width: 300px;
	max-width: 300px;
	height: 400px;
	background-color: #171718d0;
	/* Replaced #1a1a1a with Charcoal Gray */
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(28, 28, 30, 0.2);
	/* Adjusted shadow color */
	transition: transform 0.3s ease;
}

.insight-card:hover {
	transform: translateY(-10px) scale(1.05);
}

.insight-card:hover .insight-card-image img {
	/* Full color, normal contrast */
	filter: grayscale(0%) contrast(100%);
}

/* Image section */
.insight-card-image {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
	/* Replaced #f0f0f0 with Cool Gray */
}

.insight-card-download {
	font-size: var(--MP-font-size-medium);
	font-weight: var(--MP-font-weight-medium);
}

.insight-card-image img {
	max-width: 100%;
	filter: grayscale(100%) contrast(120%);
	transition: filter 0.3s ease;
}

/* Content section */
.insight-card-content {
	padding: 16px;
	font-family: var(--MP-primary-font);
	padding-top: 15px;
}

.insight-card-meta {
	color: #757575;
	/* Updated to secondary text color */
	font-size: var(--MP-font-size-small);
	margin-bottom: 8px;
}

.insight-card-title {
	position: relative;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-size: var(--MP-font-size-medium);
	font-weight: var(--MP-font-weight-bold-text);
	margin-bottom: 16px;
}

.insight-card-link {
	color: var(--MP-lime-green);
	/* Updated to Vibrant Azure */
	font-size: var(--MP-font-size-medium);
	font-weight: var(--MP-font-weight-medium);
	text-decoration: none;
	line-height: 40px;
}

.insight-card-link:hover {
	text-decoration: underline;
	color: #00000000;
}

#ID_PO_PROGRESS_PANEL,
#ID_RADAR_PROGRESS_PANEL,
#ID_CRO_PROGRESS_PANEL,
#ID_LIDAR_PROGRESS_PANEL {
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background: rgba(23, 23, 24, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	padding: 16px 24px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
	color: #fff;
	min-width: 0;
	width: min(calc(100vw - 32px), 400px);
	max-width: 400px;
	box-sizing: border-box;
	text-align: center;
	font-family: "Poppins", sans-serif;
	backdrop-filter: blur(10px);
	display: none;
}

#ID_RADAR {
	gap: 30px;
}
#ID_RADAR_BUTTON_CONTAINER {
	padding: 24px;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

#ID_PO_PROGRESS_CLOSE,
#ID_RADAR_PROGRESS_CLOSE,
#ID_CRO_PROGRESS_CLOSE,
#ID_LIDAR_PROGRESS_CLOSE {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: rgba(23, 23, 24, 0.95);
	color: #e5e7eb;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0);
}

#ID_PO_PROGRESS_L1,
#ID_RADAR_PROGRESS_L1,
#ID_CRO_PROGRESS_L1,
#ID_LIDAR_PROGRESS_L1 {
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 20px;
	color: var(--MP-magenta, #ff00d2);
}

#ID_PO_PROGRESS_BAR,
#ID_RADAR_PROGRESS_BAR,
#ID_CRO_PROGRESS_BAR,
#ID_LIDAR_PROGRESS_BAR {
	position: relative;
	width: 100%;
	height: 10px;
	margin: 8px 0 14px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

#ID_PO_PROGRESS_BAR_FILL,
#ID_RADAR_PROGRESS_BAR_FILL,
#ID_CRO_PROGRESS_BAR_FILL,
#ID_LIDAR_PROGRESS_BAR_FILL {
	width: 0%;
	height: 100%;
	border-radius: inherit;
	background: var(--MP-magenta);
	transition: width 220ms ease;
}

#ID_PO_PROGRESS_L2,
#ID_RADAR_PROGRESS_L2,
#ID_CRO_PROGRESS_L2,
#ID_LIDAR_PROGRESS_L2 {
	margin-bottom: 4px;
	font-size: 16px;
	color: #fafafa;
	line-height: 1.45;
	white-space: normal;
}

#ID_PO_PROGRESS_L3,
#ID_RADAR_PROGRESS_L3,
#ID_CRO_PROGRESS_L3,
#ID_LIDAR_PROGRESS_L3 {
	font-size: 14px;
	color: #b3b3b3;
	margin-top: 2px;
	line-height: 1.45;
	white-space: normal;
}

#ID_PO_PROGRESS_DETAILS,
#ID_RADAR_PROGRESS_DETAILS,
#ID_CRO_PROGRESS_DETAILS,
#ID_LIDAR_PROGRESS_DETAILS {
	display: none;
	margin-top: 12px;
	text-align: left;
	font-size: 12px;
	color: #9ca3af;
}

#ID_PO_PROGRESS_DETAILS summary,
#ID_RADAR_PROGRESS_DETAILS summary,
#ID_CRO_PROGRESS_DETAILS summary,
#ID_LIDAR_PROGRESS_DETAILS summary {
	cursor: pointer;
	user-select: none;
}

#ID_PO_PROGRESS_DETAILS_BODY,
#ID_RADAR_PROGRESS_DETAILS_BODY,
#ID_CRO_PROGRESS_DETAILS_BODY,
#ID_LIDAR_PROGRESS_DETAILS_BODY {
	margin: 8px 0 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	color: #9ca3af;
}

/* =========================================
   FILM STRIP LAYOUT (The Missing CSS)
   ========================================= */

/* 1. Master Container */
.film-strip-master {
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
	max-width: 100%;
	overflow: hidden; /* Prevent page scroll triggers */
	padding-bottom: 80px;
}

.film-strip-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

/* 2. Header Group (Title + Arrows) */
.film-strip-header-group {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 40px; /* Match scroll container padding */
	max-width: 1800px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.film-strip-title {
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
	align-self: center;
}

.film-strip-subtitle {
	font-size: 14px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	align-self: center;
}

.film-strip-group {
	justify-items: center;
	min-width: 400px;
	justify-self: center;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 24px;
	border-radius: 2px;
	border: 1px solid color-mix(in srgb, var(--MP-off-white) 8%, transparent);
	background: rgba(57, 57, 57, 0.5);
	box-sizing: border-box;
	width: 100%;
}
.film-strip-group p {
	margin-top: 20px;
	margin-bottom: 20px;
	max-width: 1100px;
	font-size: 18px;
	text-align: justify;
}

.film-strip-group .film-strip-subtitle {
	color: var(--MP-magenta);
	font-size: 20px;
	margin-top: 20px;
}

.highlight-orange {
	color: var(--MP-magenta); /* Using your theme variable */
}

/* 3. Controls (Counter + Buttons) */
.film-controls {
	display: flex;
	gap: 12px;
	align-items: center;
}

.film-counter-badge {
	font-family: monospace;
	color: #666;
	font-size: 14px;
	margin-right: 12px;
}

.film-nav-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	background: rgba(0, 0, 0, 0.3);
}

.film-nav-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--MP-lime-green);
}

.film-nav-btn svg {
	stroke: var(--MP-lime-green);
}

/* 4. Progress Bar */
.film-progress-track {
	width: calc(100% - 80px); /* 40px padding on each side */
	height: 2px;
	background: rgba(255, 255, 255, 0.1);
	margin: 0 auto;
	position: relative;
	border-radius: 2px;
	max-width: 1800px;
}

.film-progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: var(--MP-lime-green);
	width: 0%; /* JS updates this */
	transition: width 0.2s ease-out;
	box-shadow: 0 0 10px var(--MP-lime-green);
}

/* 5. The Scrolling Strip */
.film-scroll-container {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 24px;
	padding: 20px 40px 60px 40px; /* Bottom padding for hover effects */
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; /* smooth scroll iOS */

	/* Hide scrollbar but keep functionality */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE */
}

.film-scroll-container::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* 6. Card Overrides for Strip Context */
/* We need to force the cards to behave inside the flex strip */
.film-scroll-container .iykyk-card {
	flex: 0 0 auto; /* Don't shrink */
	width: 400px; /* Tighter width for the strip look */
	margin: 0; /* Remove the huge margins from the original CSS */
	scroll-snap-align: center;
	height: auto;
	min-height: 450px;
}

/* Adjust Calculator/Checklist cards specifically in strip */
.film-scroll-container .calculator-card,
.film-scroll-container .checklist-card {
	width: 400px;
}
.pi14-form-container {
	display: flex;
	margin-bottom: 30px;
	gap: 30px;
}
#ID_BRAND_HISTRIY_MENU {
	background-color: #00000040;
}

#ID_LANDING_SECTION .film-strip-title {
	color: var(--MP-magenta);
	font-size: 24px;
}
#ID_IYKYK {
	max-width: 840px;
	border: 1px solid #00000000 !important;
	background: black;
}

#ID_XRAY_COMPOSE_CONTAINER {
	display: flex;
	width: 100%;
}

/* Hide the holding container so it doesn't take up space */
.iykyk-card-container {
	display: none;
}
.section-intro-card {
	background: linear-gradient(
		135deg,
		rgba(1, 1, 1, 0.8),
		rgba(19, 19, 19, 0.8)
	);
	/*background: linear-gradient(135deg, rgb(37,37,37), rgb(0,0,0));*/
	border-radius: 2px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
	color: var(--MP-off-white);
	display: flex;
	flex-direction: column;
	position: relative;
	width: 500px;
	min-height: 300px;
	max-height: 500px;
	padding: 20px;
	margin: 20px;
	transition: none;
}

.section-intro-card .insight-card-header.section-hash-badge {
	position: absolute;
	top: 15px;
	left: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1;

	padding: 6px 12px;
	font-size: var(--MP-font-size-xxlarge);
	font-weight: var(--MP-font-weight-bold);
	color: var(--MP-off-white);
}

.section-intro-card .insight-card-body,
.visual-card .insight-card-body {
	font-family: var(--font-sans);
	font-weight: 400;
	letter-spacing: var(--tracking-normal);
	font-size: clamp(16px, 1.05vw, 18px);
	line-height: 1.65;
	max-height: 800px;
	opacity: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.visual-card .insight-card-body {
	padding-top: 0px;
}

.section-intro-card .intro-lede {
	font-size: var(--MP-font-size-medium);
	font-weight: var(--MP-font-weight-bold);
	color: var(--MP-off-white);
	margin-bottom: 12px;
	line-height: 1.4;
}

.section-intro-card .intro-body {
	font-size: var(--MP-font-size-medium);
	color: var(--MP-off-white);
	margin-bottom: 16px;
	line-height: 1.4;
}

.section-intro-card .intro-benefits {
	list-style-type: disc;
	margin: 0 0 20px 20px;
	font-size: var(--MP-font-size-small);
	color: rgb(189, 189, 189);
	line-height: 1.4;
}

.section-intro-card .custom-learn-more-button {
	margin-top: auto;
}

.calculator-card .insight-card-title {
	font-size: 24px;
	font-weight: 500;
}

.calculator-card .insight-card-view {
	background: #00000000;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
}

.calculator-card .insight-card-body {
	font-family: var(--font-sans);
	font-weight: 400;
	letter-spacing: var(--tracking-normal);
	font-size: clamp(16px, 1.05vw, 18px);
	line-height: 1.65;
	max-height: 800px;
	opacity: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.calculator-card .insight-card-body h3,
.section-intro-card .insight-card-body h3 {
	margin-top: 50px;
	margin-bottom: 20px;
}

.calculator-card .label {
	margin-top: 30px;
}

form label {
	display: block;
	margin: 10px 0;
}

form input {
	padding: 8px;
	border-radius: 4px;
	border: 1px solid var(--MP-secondary-gray);
}

form button {
	background: var(--MP-lime-green);
	color: #000000;
	font-family: var(--font-heading);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 16px;
	border: none;
	border-radius: 2px;
	padding: 18px 32px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.2s ease;
	box-shadow: 4px 4px 0px #000000;
}

form button:hover {
	filter: brightness(1.08);
	transform: scale(1.03);
}

#ID_MAX_CPC_RESULT {
	font-weight: bold;
	margin-top: 10px;
}

.calculator-card .insight-card-footer {
	position: absolute;
	bottom: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	justify-self: flex-end;
	gap: 10px;
	font-size: 24px;
	background: linear-gradient(135deg, rgb(17, 17, 17), rgb(0, 0, 0));
	width: 480px;
}

/* Calculator card header with icon */
.calculator-card .insight-card-header {
	position: absolute;
	top: 15px;
	left: 20px;
	background: rgba(60, 60, 60, 0);
	color: rgb(189, 189, 189);
	padding: 0;
	border-radius: 20px;
	font-size: var(--MP-font-size-xxlarge);
	font-weight: var(--MP-font-weight-bold);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	width: 100%;

	/* new layout so image + text sit on one line */
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
	/* keeps vertical alignment tight */
}

/* the calculator icon */
.insight-card-icon {
	width: 50px;
	height: 40px;
	object-fit: contain;
	display: block;
	border-radius: 8px;
}

.insight-card-info {
	width: 50px;
	height: 40px;
	object-fit: contain;
	display: block;
	border-radius: 8px;
	position: absolute;
	right: 40px;
	cursor: pointer;
}

/* ===============================================
   Info Modal Styles (based on existing theme vars)
   =============================================== */

/* The <dialog> itself - backdrop and positioning */
#ID_INFO_MODAL {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80vw;
	max-width: 600px;
	height: auto;
	max-height: 80vh;
	padding: 0;
	/* No padding on dialog; use inner frame */
	background-color: transparent;
	/* Transparent to show backdrop */
	border: none;
	/* Remove default border */
	border-radius: 2px;
	/* Match menu/container radii */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	/* Deeper shadow for modal */
	overflow: hidden;
	/* Clip inner content if needed */
	z-index: 6000;
	/* Above menu (z=5000) */
}

/* Backdrop when modal is open (native <dialog> supports ::backdrop) */
#ID_INFO_MODAL::backdrop {
	background-color: rgba(0, 0, 0, 0.7);
	/* Semi-transparent dark overlay */
}

/* Inner content frame */
.info-frame {
	background-color: var(--MP-charcoal-gray);
	/* Match menu bg */
	padding: 20px;
	border-radius: 2px;
	/* Inner radius */
	color: var(--MP-off-white);
	/* Text color */
	font-family: var(--MP-primary-font);
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Spacing between elements */
	height: 100%;
	/* Fill dialog */
	overflow-y: auto;
	/* Scroll if content is long */
}

/* Title */
.info-frame h2 {
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: var(--MP-font-size-xl);
	/* 2em */
	font-weight: var(--MP-font-weight-bold);
	color: var(--MP-lime-green);
	/* Accent color for title */
	letter-spacing: var(--tracking-tight);
}

/* Content area */
#ID_INFO_CONTENT {
	font-size: var(--MP-font-size-medium);
	/* 18px */
	line-height: 1.6;
	letter-spacing: 0.02em;
}

/* Style paragraphs in content */
#ID_INFO_CONTENT p {
	margin: 0 0 12px;
	orphans: 3;
	widows: 3;
}

/* Style lists in content */
#ID_INFO_CONTENT ul {
	list-style-type: disc;
	padding-left: 20px;
	margin: 0 0 12px;
	margin-top: 40px;
	margin-bottom: 40px;
}

#ID_INFO_CONTENT li {
	margin-bottom: 8px;
}

/* Links in content */
#ID_INFO_CONTENT a {
	color: var(--MP-lime-green);
	text-decoration: underline;
	transition: color 0.3s;
}

#ID_INFO_CONTENT a:hover {
	color: #00000000;
}

/* Button container */
.dialog-buttons {
	display: flex;
	justify-content: flex-end;
	/* Align buttons to right */
	gap: 8px;
}

/* Active/hover states (match your .button:active) */
.button:active {
	opacity: 0.8;
	transform: scale(0.9);
}

/* optional: header text span if you ever want to style it separately */
.insight-card-header-text {
	display: block;
}

/* header with icon + label */
.checklist-card .insight-card-header {
	position: absolute;
	top: 15px;
	left: 20px;
	background: rgba(60, 60, 60, 0);
	color: rgb(189, 189, 189);
	padding: 0;
	border-radius: 20px;
	font-size: var(--MP-font-size-xxlarge);
	font-weight: var(--MP-font-weight-bold);
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

.checklist-card .insight-card-body h3 {
	margin-top: 50px;
	margin-bottom: 20px;
}

/* icon in header */
.checklist-card .insight-card-icon {
	width: 50px;
	height: 40px;
	object-fit: contain;
	display: block;
}

/* main body copy in the card */
.checklist-card .insight-card-body {
	font-family: var(--font-sans);
	font-weight: 400;
	letter-spacing: var(--tracking-normal);
	font-size: clamp(16px, 1.05vw, 18px);
	line-height: 1.65;
	max-height: 800px;
	opacity: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* checklist block wrapper */
.checklist-group {
	margin-top: 16px;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* each checklist row */
.checklist-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: var(--MP-font-size-medium);
	line-height: 1.3;
	color: var(--MP-off-white);
}

/* checkbox input */
.checklist-box {
	width: 18px;
	height: 18px;
	accent-color: var(--MP-lime-green);
	/* falls back to orange if var not set */
	cursor: pointer;
	margin-top: 2px;
	/* aligns box with first line of text */
	flex-shrink: 0;
}

/* text next to the checkbox */
.checklist-text {
	display: block;
	max-width: 400px;
}

/* small note at the bottom */
.checklist-note {
	margin-top: 12px;
	font-size: var(--MP-font-size-small);
	color: rgb(189, 189, 189);
}

/* footer link area matches your calculator cards */
.checklist-card .insight-card-footer {
	position: absolute;
	bottom: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 24px;
	background: linear-gradient(135deg, rgb(17, 17, 17), rgb(0, 0, 0));
}

.checklist-card .insight-card-footer-blend,
.calculator-card .insight-card-footer-blend {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(
		135deg,
		rgba(25, 25, 25, 0.38),
		rgba(5, 5, 5, 0.75)
	);
	min-height: 50px;
}

.checklist-card .insight-card-footer-blend {
	width: 450px;
}

.calculator-card .insight-card-footer-blend {
	width: 100px;
	align-self: center;
	border-radius: 2px;
}

.checklist-card.iykyk-card.product-variant .insight-card-footer-blend {
	width: 100px;
	align-self: center;
	border-radius: 2px;
}

.checklist-card .insight-card-footer-blend img,
.calculator-card .insight-card-footer-blend img {
	width: 30px;
	height: auto;
	object-fit: contain;
	transform: translateY(1px) rotate(0deg);
	transition: transform 0.6s ease;
	cursor: pointer;
}

.checklist-card .insight-card-footer a,
.calculator-card .insight-card-footer a {
	text-decoration: none;
	font-weight: var(--MP-font-weight-medium);
	font-size: var(--MP-font-size-large);
	color: #00849e;
}

.checklist-card .insight-card-footer a:hover,
.calculator-card .insight-card-footer a:hover {
	text-decoration: underline;
}

/* When card is expanded, spin the caret 180 degrees like the ^ arrow animation */
.calculator-card.calculator-expanded .insight-card-footer-blend img,
.checklist-card.calculator-expanded .insight-card-footer-blend img {
	transform: rotate(540deg) translateY(-1px);
}

/* Card base sizing and smooth width change */
.calculator-card,
.checklist-card {
	display: flex;
	flex-direction: column;
	background: linear-gradient(
		135deg,
		rgba(1, 1, 1, 0.8),
		rgba(19, 19, 19, 0.8)
	);
	border-radius: 2px;
	margin: 20px;
	color: var(--MP-off-white);
	width: 500px;
	height: 500px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	justify-content: flex-start;
	padding: 20px;
	position: relative;
	transition: height 0.6s ease;
}

/* Expanded width */
.calculator-card.calculator-expanded,
.checklist-card.calculator-expanded {
	height: 850px;
	/* height stays whatever is on the element unless you force it inline */
}

/* permalink is hidden by default */
.permalink {
	margin-left: 0.5rem;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.15s linear;
	color: currentColor;
	/* inherits the heading color */
	font-size: 0.8em;
	/* a bit smaller than the title text */
	line-height: 1;
}

/* show permalink when user hovers the title text area */
.insight-card-title:hover .permalink {
	opacity: 0.6;
}

/* hovering directly over the # makes it fully visible */
.insight-card-title:hover .permalink:hover {
	opacity: 1;
}

/* Product variant cards: make the pre-checked boxes look active but not clickable */
.product-variant .checklist-box {
	pointer-events: none;
	/* can't toggle */
	cursor: default;
	/* no hand cursor */
}

.product-quote {
	margin-top: 12px;
	margin-bottom: 12px;
	font-size: var(--MP-font-size-small);
	line-height: 1.4;
	color: var(--MP-off-white);
}

.product-quote blockquote {
	margin: 0 0 4px 0;
	font-style: italic;
	color: var(--MP-off-white);
}

.product-quote .quote-attrib {
	color: var(--MP-secondary-gray);
	font-size: var(--MP-font-size-tiny);
}

.checklist-card.iykyk-card.product-variant {
	background: linear-gradient(135deg, rgb(9 0 0 / 80%), rgb(3 77 79 / 85%));
}

/* no hand cursor */

.checklist-card.iykyk-card.product-variant .insight-card-footer {
	background: #00000000;
	width: 90%;
}

#WRAPPER_SOLUTIONS {
	display: none;
}

/* Mobile Adjustments */
/* =========================================
   Mobile layout for index.html (<= 600px)
   ========================================= */
/* ================================
   STUDIO NATIVE LOOK: IYKYK CARDS
   Scope: body.studio-iykyk
==================================*/ /* =
   STUDIO-NATIVE SKIN FOR IYKYK + FILM STRIP (CSS ONLY)
   Paste this at the VERY END of style.css so it overrides earlier rules.
   ============================================================ */

/* --- Studio tokens (matte, sparse, tiny blur for legibility) --- */
/* =========================================================
   STUDIO-NATIVE SKIN for IYKYK + Tools cards (CSS only)
   Scope: <body class="studio-mode">
   Drop this at the END of style.css so it wins.
   ========================================================= */

.studio-mode .iykyk-card {
	/* Kill the ?marketing card? look */
	background: color-mix(in srgb, var(--MP-charcoal-gray) 72%, transparent);

	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);

	/* ?Minimum blur for legibility?, not glass */
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);

	color: rgba(255, 255, 255, 0.88);
	padding: 22px 22px 18px;
	position: relative;
	overflow: hidden;
}

/* Nuke any grad-* backgrounds inside studio */
.studio-mode .iykyk-card[class*="grad-"] {
	background: color-mix(in srgb, var(--MP-charcoal-gray) 72%, transparent);
}

/* Calm hover: no glow, no neon halo, just a tighter border cue */
.studio-mode .iykyk-card:hover {
	border-color: rgba(0, 255, 72, 0.28); /* lime action cue */
	transform: translateY(-1px);
}

/* Header ?pill? becomes a studio label chip (mono, subtle) */
.studio-mode .iykyk-card .iykyk-card-top {
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	box-shadow: none;

	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);

	padding: 8px 10px;
	margin: 0 0 14px 0;
	width: fit-content;
}

/* Main title: Space Grotesk, tight, not shouty */
.studio-mode .iykyk-card .insight-card-title,
.studio-mode .iykyk-card h3 {
	font-family: var(--font-heading); /* Space Grotesk per your vars */
	font-weight: 300;
	font-size: 18px;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: rgba(255, 255, 255, 0.92);
	margin-top: 30px;
	margin-bottom: 30px;
}

/* Body copy: Inter, readable, not washed out */
.studio-mode .iykyk-card p,
.studio-mode .iykyk-card .intro-body,
.studio-mode .iykyk-card .insight-card-body {
	font-family: var(--font-sans); /* Inter per your vars */
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 300;
}

/* The magenta ?insight? callout becomes a studio inset (subtle, structural) */
.studio-mode .iykyk-card .iykyk-callout,
.studio-mode .iykyk-card .insight-card-preview {
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left: 2px solid rgba(255, 0, 210, 0.55); /* magenta info cue */
	font-family: "Courier New", Courier, monospace;
	font-style: normal; /* Overrides italics */
	padding: 10px 12px;
	margin: 12px 0 14px 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 16px;
}

/* ?Read more? = studio action: lime, mono-ish, compact */
.studio-mode .iykyk-card .insight-card-view,
.studio-mode .iykyk-card a.insight-card-view {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin-top: 16px;
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: rgba(0, 255, 72, 0.85); /* lime action */
	text-decoration: none;
	opacity: 0.95;
}

.studio-mode .iykyk-card .insight-card-view:hover,
.studio-mode .iykyk-card a.insight-card-view:hover {
	opacity: 1;
}

/* If your ?Read more ^? caret is a span, keep it calm */
.studio-mode .iykyk-card .insight-card-view span,
.studio-mode .iykyk-card .insight-card-view i {
	color: rgba(0, 255, 72, 0.85);
}

/* Calculator + checklist headers: stop being huge + ?promo-y? */
.studio-mode .calculator-card .insight-card-header,
.studio-mode .checklist-card .insight-card-header {
	position: relative;
	top: auto;
	left: auto;

	width: 100%;
	margin: 0 0 10px 0;
	padding: 0;

	background: transparent;
	box-shadow: none;

	display: flex;
	align-items: center;
	gap: 10px;

	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

/* Smaller, more ?system? icons */
.studio-mode .insight-card-icon,
.studio-mode .insight-card-info {
	width: 18px;
	height: 18px;
	border-radius: 6px;
	opacity: 0.9;
}

.studio-mode .insight-card-info {
	position: static;
	margin-left: auto;
}

/* Remove ?footer block? look in calculator cards (it reads like a banner ad) */
.studio-mode .calculator-card .insight-card-footer {
	position: static;
	width: auto;
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin-top: 14px;
	font-size: 14px;
}

/* Optional: make card internal dividers studio-thin */
.studio-mode .iykyk-card hr,
.studio-mode .iykyk-card .divider {
	border: none;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin: 14px 0;
}
/* Network readout line above insight-card-preview */
.iykyk-card .insight-card-netreadout {
	display: none;
	margin: 10px 0 8px 0;
	padding: 8px 10px;
}

.iykyk-card .netreadout-line {
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(167, 167, 167, 0.78);
	white-space: nowrap;
}

/* Make the leading ">" pop like Studio readouts */
.iykyk-card .netreadout-line::first-letter {
	color: var(--MP-magenta, #ff00d2);
	opacity: 0.95;
}

/* =========================================================
   STUDIO MODE: TRUST CHECK (Split Color Signal)
   ========================================================= */

/* 1. Checklist Items - Clean & White */
.studio-mode .checklist-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0;
}

.studio-mode .checklist-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.studio-mode .checklist-text {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

/* Force Checkboxes to be White/Neutral (Remove Magenta) */
.studio-mode .checklist-box {
	filter: grayscale(100%);
	width: 16px;
	height: 16px;
	margin-top: 2px;
	cursor: pointer;
	accent-color: var(--MP-magenta);
}

/* 2. The Signal Container - Base White */
.status-signal {
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 24px;
	color: #ffffff; /* The label part is white */
}

/* 3. The Action Colors (Applied only to the suffix) */
.signal-val-red {
	color: #ff3333;
}
.signal-val-yellow {
	color: var(--MP-gold);
}
.signal-val-green {
	color: var(--MP-lime-green);
}

/* =========================================================
   STUDIO MODE: Calculator
   ========================================================= */

/* Netreadout command link (executes doc open) */
.iykyk-card .netreadout-line.netreadout-cmd {
	display: inline-block;
	margin-top: 6px;
	text-decoration: none;
	cursor: pointer;
	font-size: medium;
	/* keep it "system", not promo */
	opacity: 0.85;
}

.iykyk-card .netreadout-line.netreadout-cmd:hover {
	opacity: 1;
	color: rgba(0, 255, 72, 0.88); /* lime action on intent */
}

.iykyk-card .netreadout-line.netreadout-cmd:focus-visible {
	outline: 1px solid rgba(0, 255, 72, 0.28);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Dark "Terminal" Input Fields */
.studio-mode input[type="number"],
.studio-mode input[type="text"],
.studio-mode input[type="email"],
.studio-mode input[type="url"] {
	background: rgba(0, 0, 0, 0.5); /* Dark bg */
	border: 1px solid rgba(255, 255, 255, 0.15); /* Thin border */
	color: var(--MP-magenta); /* Lime text for data entry */
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 18px;
	border-radius: 4px;
	padding: 10px;
}

/* Input Focus State */
.studio-mode input:focus {
	border-color: var(--MP-magenta); /* Magenta focus */
	outline: none;
	background: rgba(0, 0, 0, 0.8);
}

/* Results Text (The output of calculators) */
.studio-mode p[id$="_RESULT"] {
	font-family: "Courier New", Courier, monospace;
	color: #fff;
	background: rgba(0, 0, 0, 0.35);
	padding: 10px;
	border-left: 2px solid var(--MP-magenta);
	margin-top: 15px;
}

.film-scroll-container .calculator-card .iykyk-card-label,
.film-scroll-container .checklist-card .iykyk-card-label {
	top: 0px;
}

.studio-mode .calculator-card .insight-card-title,
.studio-mode .calculator-card h3,
.studio-mode .checklist-card .insight-card-title,
.studio-mode .checklist-card h3 {
	margin-bottom: 0px;
}

.studio-mode .calculator-card .insight-card-title,
.studio-mode .checklist-card .insight-card-title {
	margin-top: 20px;
}

.insight-card-body .checklist-group {
	min-height: 450px;
}

/* =========================================================
   STUDIO MODE: CALCULATOR BUTTON (Absolute Card Anchor)
   ========================================================= */

/* 1. Make the card the specific anchor parent */
.studio-mode .calculator-card {
	position: relative !important;
	/* Add extra padding at the bottom so text doesn't slide behind the button */
	padding-bottom: 80px !important;
	display: flex !important;
	flex-direction: column !important;
}

/* 2. Pin the button to the absolute bottom-right of the CARD */
.studio-mode .calculator-card .insight-card-body form button {
	position: absolute !important;
	bottom: 20px !important;
	right: 22px !important; /* Aligns with the card's right padding */

	width: auto !important;
	min-width: 140px; /* Ensure it feels substantial */
	margin: 0 !important;
	z-index: 10; /* Sits above any background elements */
}

/* 3. Reset form flow (so it doesn't force weird gaps) */
.studio-mode .calculator-card .insight-card-body form {
	min-height: auto !important;
	display: block !important;
	margin-bottom: 15px;
}

/* 4. Ensure Result Text stays readable above the button zone */
.studio-mode .calculator-card .insight-card-body form p[id$="_RESULT"] {
	margin-top: 15px !important;
	width: 100%;
}

/* Studio modules grid */
#ID_STUDIO_MODULES,
#ID_STUDIO_INTELLIGENCE {
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* BUTTON ARRANGEMENT */
/* Target links that have the bv-button class inside the studio modules */
#ID_STUDIO_MODULES .bv-button,
#ID_STUDIO_INTELLIGENCE .bv-button {
	display: flex; /* Force full width */
	align-self: center;
	text-align: center; /* Center text */
	text-decoration: none; /* Remove underline */
	margin-top: 20px; /* Space above */
	margin-bottom: 20px; /* Space below */
	width: 100%;
	box-sizing: border-box;
	color: black;
	max-width: 400px;
}

/* Hover effect for these specific buttons */
#ID_STUDIO_MODULES .bv-button:hover,
#ID_STUDIO_INTELLIGENCE .bv-button:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}

#ID_TARGET_CARD {
	display: none;
	align-items: center;
	align-self: center;
	width: 100%;
	max-width: 400px;
}

.member-status,
#ID_NETWORK_STATUS {
	font-weight: 700;
}

/* Module details drawer (OS-style, not marketing) */
details.module-details {
	margin-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 12px;
}

details.module-details summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	opacity: 0.95;
}

/* Hide default marker */
details.module-details summary::-webkit-details-marker {
	display: none;
}

.summary-caret {
	display: inline-block;
	width: 10px;
	transform: translateY(-1px);
}

details.module-details[open] .summary-caret {
	transform: rotate(90deg) translateY(-1px);
}

.module-meta {
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	line-height: 1.45;
	font-family: var(--MP-primary-font);
}

.module-meta .meta-label {
	color: rgba(255, 255, 255, 0.7);
	display: block;
	margin-top: 10px;
	margin-bottom: 4px;
	font-family:
		"Poppins",
		system-ui,
		-apple-system,
		Segoe UI,
		Roboto,
		sans-serif;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.module-meta ul {
	margin: 0;
	padding-left: 18px;
}

.module-meta li {
	margin: 4px 0;
}

.module-meta .member-only {
	color: rgba(0, 255, 21, 0.9);
	font-weight: 600;
}

.module-meta .constraints {
	color: rgba(255, 255, 255, 0.75);
}

.module-meta .outputs {
	color: rgba(255, 255, 255, 0.8);
}

/* Keep module links visually primary */
.bv-outcome-card a.primary-action {
	display: inline-block;
	margin-top: 10px;
}

/* Target store input */
.bv-target-card {
	padding-bottom: 18px;
}

.bv-target-input {
	width: 100%;
	max-width: 560px;
	height: 44px;
	border-radius: 2px;
	padding: 0 14px;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	outline: none;
	font-family: var(--MP-primary-font);
	letter-spacing: 0.01em;
}

.bv-target-input:focus {
	border-color: rgba(0, 255, 21, 0.55);
	box-shadow: 0 0 0 3px rgba(0, 255, 21, 0.1);
}

/* =========================
   Cockpit typography pass
   ========================= */

/* =========================================================
   STUDIO MODULES: Typography + spacing fix (REAL selectors)
   Paste BELOW the existing #ID_STUDIO_MODULES block
   ========================================================= */

#ID_STUDIO_MODULES,
#ID_STUDIO_INTELLIGENCE {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1240px;
	margin-bottom: 60px;
}

/* Card rhythm: remove “random hole” spacing and tighten hierarchy */
#ID_STUDIO_MODULES .bv-outcome-card #ID_STUDIO_INTELLIGENCE .bv-outcome-card {
	padding: 28px 28px 24px;
	gap: 10px; /* overrides the global 6px */
}

/* Kicker (ACTIVE_MONITORING / READY / etc.) */
#ID_STUDIO_MODULES .bv-outcome-card .status-text,
#ID_STUDIO_INTELLIGENCE .bv-outcome-card .status-text {
	font-size: 24px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.92;
	margin: 0 0 8px 0;
	color: var(--MP-magenta);
}

/* Title */
#ID_STUDIO_MODULES .bv-outcome-card h4,
#ID_STUDIO_INTELLIGENCE .bv-outcome-card h4 {
	font-size: 18px;
	line-height: 1.18;
	letter-spacing: 0.01em;
	margin: 0 0 6px 0;
	font-weight: 300;
}

/* Description: kill the global margin-top:20px and set readable measure */
#ID_STUDIO_MODULES .bv-outcome-card p,
#ID_STUDIO_INTELLIGENCE .bv-outcome-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	max-width: 56ch;
}

/* Tagline: make it POP and clearly not “drawer body”
   This targets ONLY the tagline that is a direct child of the card.
*/
#ID_STUDIO_MODULES > .bv-outcome-card > .module-meta,
#ID_STUDIO_INTELLIGENCE > .bv-outcome-card > .module-meta,
#ID_STUDIO_MODULES > article.bv-outcome-card > .module-meta,
#ID_STUDIO_INTELLIGENCE > article.bv-outcome-card > .module-meta {
	margin: 10px 0 6px 0;
	padding: 0 0 0 12px;

	font-size: 14px;
	line-height: 1.25;
	font-weight: 650;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0);
}

/* Button: center text properly (your current flex setup defaults left) */
#ID_STUDIO_MODULES .bv-button,
#ID_STUDIO_INTELLIGENCE .bv-button {
	display: flex;
	align-items: center;
	justify-content: center; /* THIS is what fixes the left-justified label */
	text-align: center;

	width: 100%;
	max-width: 420px;
	margin: 18px auto 16px;
	padding: 14px 18px;
	min-height: 46px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;

	cursor: pointer;
	user-select: none;
}

/* Button hover: keep your effect but make it feel less “jumpy” */
#ID_STUDIO_MODULES .bv-button:hover,
#ID_STUDIO_INTELLIGENCE .bv-button:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
}

/* Details drawer: keep it quieter than the tagline */
#ID_STUDIO_MODULES details.module-details,
#ID_STUDIO_INTELLIGENCE details.module-details {
	margin-top: 6px;
}

/* Drawer summary */
#ID_STUDIO_MODULES details.module-details summary,
#ID_STUDIO_INTELLIGENCE details.module-details summary {
	font-size: 14px;
	letter-spacing: 0.02em;
}

/* Drawer body: reset the .module-meta styling so it does NOT look like the tagline */
#ID_STUDIO_MODULES details.module-details .module-meta,
#ID_STUDIO_INTELLIGENCE details.module-details .module-meta {
	margin-top: 10px;
	padding: 0;
	border-left: none;

	font-size: 13.5px;
	line-height: 1.55;
	font-weight: 450;
	color: rgba(255, 255, 255, 0.82);
}

/* Drawer labels: slightly larger so the small type isn’t microscopic */
#ID_STUDIO_MODULES details.module-details .module-meta .meta-label,
#ID_STUDIO_INTELLIGENCE details.module-details .module-meta .meta-label {
	font-size: 12.5px;
	letter-spacing: 0.06em;
	margin-top: 12px;
	margin-bottom: 6px;
	opacity: 0.85;
}

/* XRAY */
.xray-hidden {
	display: none !important;
}

.xray-inline-marker {
	display: none;
}

.xray-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	max-width: var(--maxw);
	align-self: center;
	justify-self: center;
}

.xray-page .wrap {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.xray-input-shell {
	display: flex;
	max-width: 1300px;
	flex-direction: column;
	margin-top: 20px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.3);
	justify-content: space-between;
	justify-self: center;
}

.xray-input-shell.room-input-shell {
	border-color: rgba(255, 255, 255, 0.15);
	box-shadow:
		inset 0 0 0 1px rgba(var(--page-border-rgb), 0.14),
		0 10px 22px rgba(0, 0, 0, 0.35);
}

.xray-panel.xray-panel--catalog-substitution-comparison.xray-analysis-panel.xray-panel--catalog-compare {
	display: none;
}

#ID_LIDAR_EMPTY {
	display: block;
}

#ID_LIDAR_EMPTY.xray-hidden {
	display: none;
}

#ID_LIDAR_EMPTY.lidar-empty-state {
	margin: 10px 0 14px;
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
		rgba(6, 10, 16, 0.88);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 12px 28px rgba(0, 0, 0, 0.28);
	color: rgba(255, 255, 255, 0.92);
}

#ID_LIDAR_EMPTY.lidar-empty-state .lidar-empty-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.96);
}

#ID_LIDAR_EMPTY.lidar-empty-state .lidar-empty-subtitle {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

.xray-input-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.xray-input-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.82);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-width: 350px;
}

.xray-input-label input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	background: rgba(10, 10, 16, 0.9);
	color: #fff;
	font-size: 14px;
}

.xray-status-text {
	margin-top: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

.xray-tab-switcher {
	display: none;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.xray-tab {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.22);
	color: rgba(255, 255, 255, 0.84);
	border-radius: 999px;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.xray-tab[aria-selected="true"] {
	background: var(--primary-color);
	border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
	color: #000;
}
#ID_LIDAR_RUN_STATUS {
	display: none;
}
.xray-tab:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

.xray-results {
	display: flex;
	flex-direction: column;
	min-height: 0;
	gap: 30px;
	justify-content: space-between;
}
.xray-page .xray-results {
	flex-direction: row;
}
.xray-catalog-compare-buttons {
	display: none;
}

#ID_RADAR_PEERS_SECTION {
	margin-bottom: 30px;
}

#ID_XRAY_RESULTS {
	width: 100%;
}

#ID_LIDAR_BUTTON_CONTAINER {
	margin-top: 20px;
	display: flex;
	align-self: flex-end;
}

#ID_LIDAR_STATUS {
	margin-top: 0px;
	margin-bottom: 30px;
}
.xray-focus-layout {
	--xray-collapsed-width: 130px;
	display: flex;
	gap: 14px;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	line-height: 20px;
	width: 100%;
}
.xray-analysis-summary-panel,
.xray-analysis-narrative {
	line-height: 30px;
}
.xray-pane {
	background: linear-gradient(
		180deg,
		rgba(15, 17, 28, 0.9),
		rgba(7, 8, 16, 0.95)
	);
	overflow: hidden;
	min-width: 0;
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--xray-collapsed-width);
	max-width: var(--xray-collapsed-width);
	transition:
		flex-basis 200ms ease,
		max-width 200ms ease;
	will-change: flex-basis, max-width;
}

.xray-pane.is-active {
	flex: 1 1 0px;
	max-width: none;
}

.xray-pane.is-collapsed {
	flex: 0 0 var(--xray-collapsed-width);
	max-width: var(--xray-collapsed-width);
}

.xray-pane-header {
	width: 100%;
	min-height: 52px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
	cursor: pointer;
	border: 0;
	color: #000000;
	background: var(--MP-lime-green);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.xray-pane-header:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: -2px;
}

.xray-pane-title {
	display: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.xray-pane-subtitle {
	font-size: 18px;
	color: black;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xray-pane-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 4px;
}

.bv-embed .stat {
	border: 1px solid #00000000;
	background: rgba(0, 0, 0, 0);
	border-radius: 0px;
	padding: 16px 16px;
}

.xray-pane.is-collapsed .xray-pane-body {
	display: none;
}

.xray-analysis-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 16px;
}

.xray-analysis-controls-left {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.xray-analysis-controls-right {
	display: flex;
	align-items: center;
}

.xray-analysis-chip {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.22);
	color: rgba(255, 255, 255, 0.84);
	border-radius: 999px;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.xray-analysis-chip.is-active {
	background: var(--primary-color);
	border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
	color: #000;
}

.xray-analysis-chip:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

.xray-analysis-perspective-line {
	margin-bottom: 10px;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.78);
}

.xray-catalog-compare-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin-bottom: 10px;
}

#ID_LIDAR_HISTORY_REFRESH {
	display: none;
}

#ID_LIDAR_HISTORY_TABLE_WRAP th {
	font-size: 16px;
}

#ID_LIDAR_HISTORY_TBODY td {
	font-size: 16px;
}
.xray-catalog-compare-status {
	margin-bottom: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.78);
}

.xray-catalog-compare-unmatched {
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.86);
}

.xray-catalog-compare-pagination {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: flex-end;
}

.xray-catalog-compare-pageinfo {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.72);
}

.xray-catalog-compare-cancel {
	background: #fb7185 !important;
	color: #000000 !important;
}

.xray-catalog-compare-cancel:hover {
	background: linear-gradient(180deg, #fb7185, #ef4444) !important;
}

.xray-key-line {
	margin-top: 4px;
	margin-bottom: 12px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.66);
}

.xray-panel {
	padding: 12px;
	margin-bottom: 50px;
	margin-top: 50px;
	background: rgba(15, 16, 24, 0.72);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: var(--xray-panel-height, auto);
}

.bv-embed .wrap,
.xray-panel {
	margin: none;
	padding: 0px;
	border: 1px solid rgba(255, 255, 255, 0) !important;
}

.xray-panel h4 {
	margin: 0 0 8px;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--MP-magenta);
}

.xray-panel .film-strip-group {
	display: none;
}

/* Fixed-height XRAY panels (so Store A/B columns align). */
.xray-panel--intent {
	--xray-panel-height: 520px;
}

.xray-panel--po7 {
	--xray-panel-height: 1000px;
}

.xray-panel--cro {
	/* Ensure CRO embed has enough vertical room for a full report viewport. */
	--xray-panel-height: 1100px;
}

.xray-panel--radar {
	--xray-panel-height: 520px;
}

.xray-panel--cro .xray-panel-body {
	/* CRO panel uses a split layout so the scores table doesn't scroll with the embedded report. */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.xray-cro-scores-region {
	/* Keep the scores readable, but never let them consume the entire CRO panel. */
	flex: 0 0 auto;
	min-height: 0;
	max-height: 500px;
	overflow: auto;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0);
	background: rgba(0, 0, 0, 0.14);
}

.xray-cro-report-region {
	flex: 1 1 auto;
	min-height: 750px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.xray-panel--cro .xray-report-frame-wrap {
	flex: 1 1 auto;
	min-height: 750px;
}

.xray-panel--cro .xray-report-frame {
	height: 100%;
	min-height: 750px;
}

.xray-panel-body {
	flex: 1 1 auto;
	min-height: 0; /* Required for overflow scrolling in flex containers. */
	overflow: auto;
}

.xray-prompt {
	margin: 0;
	padding: 10px;
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.36);
	border: 1px solid rgba(255, 255, 255, 0.07);
}

.xray-segment-line {
	margin-top: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.86);
}

.xray-module-meta {
	display: none;
	margin-bottom: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.76);
}

.xray-action-btn {
	margin-top: 6px;
}

.xray-missing {
	font-size: 13px;
	color: #fda4af;
	margin-bottom: 4px;
}

.xray-loading {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 8px;
}

.xray-inline-content {
	margin-top: 8px;
}

.xray-inline-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 8px;
}

.xray-inline-subtitle {
	margin-top: 10px;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.xray-inline-empty {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.66);
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.22);
}

.xray-radar-peers {
	flex: 1;
}

.xray-radar-empty {
	color: #9ca3af;
}

.xray-panel--radar .film-strip-group {
	display: none !important;
}

.xray-report-table-wrap {
	width: 100%;
	overflow-x: auto;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: color-mix(in srgb, var(--MP-charcoal-gray) 72%, transparent);
}

.xray-report-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
}
.xray-report-table th,
.xray-report-table td {
	padding: 6px 8px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 16px;
	vertical-align: top;
}

.xray-report-table th {
	position: sticky;
	top: 0;
	background: rgba(15, 16, 24, 0.92);
	color: rgba(255, 255, 255, 0.86);
	text-align: left;
	font-weight: var(--MP-font-weight-medium);
	letter-spacing: 0.04em;
}

.xray-report-frame-wrap {
	margin-top: 10px;

	overflow: hidden;

	background: rgba(0, 0, 0, 0.2);
}

.xray-report-frame {
	width: 100%;
	height: 900px;
	border: 0;
	background: #fff;
}

.xray-scores-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
}

.xray-scores-table td {
	padding: 6px 8px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 12px;
}

.xray-scores-table td:first-child {
	color: rgba(255, 255, 255, 0.82);
}

.xray-scores-table td:last-child {
	color: #fff;
	text-align: right;
}

/* ===================================================================
   XRAY Prepare Panel
   =================================================================== */
.xray-prepare-panel {
	margin-bottom: 40px;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2px;
	background: rgba(12, 14, 24, 0.9);
	width: 100%;
	box-sizing: border-box;
}

.xray-prepare-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.xray-prepare-title {
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.03em;
}

.xray-prepare-progress-bar {
	width: 100%;
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 6px;
}

.xray-prepare-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--MP-magenta);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.xray-prepare-progress-text {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 12px;
}

.xray-prepare-tasks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 6px 12px;
}

.xray-prepare-task {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	padding: 4px 0;
}

.xray-prepare-task-icon {
	flex-shrink: 0;
	font-size: 14px;
}

.xray-prepare-task--completed .xray-prepare-task-icon,
.xray-prepare-task--skipped .xray-prepare-task-icon {
	color: var(--MP-lime-green, #7eff5e);
}

.xray-prepare-task--running .xray-prepare-task-icon,
.xray-prepare-task--pending .xray-prepare-task-icon,
.xray-prepare-task--checking .xray-prepare-task-icon {
	color: #f0c040;
}

.xray-prepare-task--failed .xray-prepare-task-icon {
	color: #ff5e5e;
}

.xray-prepare-task--waiting {
	opacity: 0.5;
}

.xray-prepare-task-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xray-prepare-task-substep {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	margin-left: 4px;
}

/* =========================================================================
   SOFIA CHAT — Floating Panel
   ========================================================================= */

/* ---- FAB (Floating Action Button) ---- */
#sofia-fab {
	display: none;
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 2199;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, #c14dbf, #aa04c4);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(170, 4, 196, 0.45);
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	animation: sofia-fab-pulse 2s ease-in-out 1;
}
#sofia-fab:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 28px rgba(170, 4, 196, 0.6);
}
#sofia-fab:active {
	transform: scale(0.95);
}
#sofia-fab .sofia-fab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

@keyframes sofia-fab-pulse {
	0%   { box-shadow: 0 4px 20px rgba(170, 4, 196, 0.45); }
	50%  { box-shadow: 0 4px 32px rgba(170, 4, 196, 0.8); }
	100% { box-shadow: 0 4px 20px rgba(170, 4, 196, 0.45); }
}

/* ---- Drawer overlay ---- */
.sofia-drawer {
	position: fixed;
	inset: 0;
	z-index: 2200;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}
.sofia-drawer.is-open {
	pointer-events: auto;
}

/* ---- Backdrop ---- */
.sofia-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}
.sofia-drawer.is-open .sofia-drawer-backdrop {
	opacity: 1;
}

/* ---- Panel ---- */
.sofia-drawer-panel {
	position: relative;
	z-index: 1;
	width: min(90vw, 460px);
	height: 100vh;
	background: linear-gradient(170deg, #0f1014, #090a0d);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translate3d(42px, 0, 0) scale(0.99);
	transition:
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
	will-change: transform, opacity;
}
.sofia-drawer.is-open .sofia-drawer-panel {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* ---- Header ---- */
.sofia-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
	flex-shrink: 0;
}
.sofia-drawer-title {
	font-family: var(--MP-primary-font, "Space Grotesk", sans-serif);
	font-size: 18px;
	font-weight: 700;
	color: #fafafa;
	margin: 0;
}
.sofia-drawer-subtitle {
	font-size: 11px;
	color: var(--text-muted, #b3b3b3);
	margin-top: 2px;
}
.sofia-close-btn {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 24px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}
.sofia-close-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

/* ---- Body (message area) ---- */
.sofia-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- Footer (input area) ---- */
.sofia-drawer-footer {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(9, 10, 13, 0.94);
	backdrop-filter: blur(6px);
	flex-shrink: 0;
}
#sofia-input {
	flex: 1;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	color: #fafafa;
	font-family: var(--MP-secondary-font, "Inter", sans-serif);
	font-size: 14px;
	padding: 10px 14px;
	outline: none;
	transition: border-color 0.15s;
	resize: none;
	min-height: 20px;
	max-height: 120px;
}
#sofia-input:focus {
	border-color: var(--MP-magenta, #aa04c4);
}
#sofia-input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}
#sofia-send-btn {
	background: linear-gradient(135deg, #c14dbf, #aa04c4);
	border: none;
	border-radius: 8px;
	color: #fff;
	font-family: var(--MP-primary-font, "Space Grotesk", sans-serif);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 16px;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
	white-space: nowrap;
}
#sofia-send-btn:hover {
	opacity: 0.9;
}
#sofia-send-btn:active {
	transform: scale(0.96);
}
#sofia-send-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---- Messages ---- */
.sofia-msg {
	display: flex;
}
.sofia-msg-user {
	justify-content: flex-end;
}
.sofia-msg-sofia {
	justify-content: flex-start;
}
.sofia-msg-bubble {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	font-family: var(--MP-secondary-font, "Inter", sans-serif);
	font-size: 14px;
	line-height: 1.5;
	word-break: break-word;
}
.sofia-msg-user .sofia-msg-bubble {
	background: rgba(170, 4, 196, 0.18);
	border: 1px solid rgba(170, 4, 196, 0.3);
	color: #fafafa;
	border-bottom-right-radius: 4px;
}
.sofia-msg-sofia .sofia-msg-bubble {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #e0e0e0;
	border-bottom-left-radius: 4px;
}

/* ---- Citations ---- */
.sofia-msg-citations {
	margin-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 6px;
}
.sofia-citations-toggle {
	background: none;
	border: none;
	color: var(--MP-magenta, #aa04c4);
	font-size: 12px;
	cursor: pointer;
	padding: 2px 0;
	font-family: var(--MP-secondary-font, "Inter", sans-serif);
}
.sofia-citations-toggle:hover {
	text-decoration: underline;
}
.sofia-citations-list {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sofia-citation {
	font-size: 11px;
	color: var(--text-muted, #b3b3b3);
	padding: 4px 8px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 4px;
	border-left: 2px solid rgba(170, 4, 196, 0.4);
}
.sofia-citation-artifact {
	font-weight: 600;
	color: #ccc;
}
.sofia-citation-path {
	font-family: "SFMono-Regular", "Consolas", monospace;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	margin-left: 6px;
}
.sofia-citation-excerpt {
	display: block;
	margin-top: 2px;
	font-style: italic;
	color: rgba(255, 255, 255, 0.5);
}

/* ---- Meta (confidence + timing) ---- */
.sofia-msg-meta {
	display: flex;
	gap: 10px;
	margin-top: 8px;
	font-size: 11px;
	color: var(--text-muted, #b3b3b3);
}
.sofia-confidence {
	display: flex;
	align-items: center;
	gap: 4px;
}
.sofia-confidence::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
}
.sofia-confidence-high::before { background: #4caf50; }
.sofia-confidence-medium::before { background: #ff9800; }
.sofia-confidence-low::before { background: #f44336; }

/* ---- Status-specific bubbles ---- */
.sofia-msg-unavailable {
	border-color: rgba(255, 152, 0, 0.25) !important;
	background: rgba(255, 152, 0, 0.06) !important;
}
.sofia-msg-generation {
	border-color: rgba(0, 255, 21, 0.2) !important;
	background: rgba(0, 255, 21, 0.04) !important;
}
.sofia-msg-nomatch {
	color: var(--text-muted, #b3b3b3) !important;
}

.sofia-msg-missing {
	margin-top: 8px;
	font-size: 12px;
}
.sofia-missing-label {
	color: rgba(255, 152, 0, 0.8);
	font-weight: 600;
}
.sofia-missing-item {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	font-size: 11px;
}

.sofia-generation-actions {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sofia-report-actions {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sofia-report-link {
	text-decoration: none;
}
.sofia-trigger-btn {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--MP-lime-green, #00ff15);
	font-family: var(--MP-secondary-font, "Inter", sans-serif);
	font-size: 12px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.sofia-trigger-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--MP-lime-green, #00ff15);
}
.sofia-msg-hint {
	margin-top: 8px;
	font-size: 11px;
	color: var(--text-muted, #b3b3b3);
	font-style: italic;
}

/* ---- Loading dots ---- */
.sofia-typing-dots {
	display: flex;
	gap: 4px;
	padding: 4px 0;
}
.sofia-typing-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	animation: sofia-dot-bounce 1.2s infinite ease-in-out;
}
.sofia-typing-dots span:nth-child(2) {
	animation-delay: 0.2s;
}
.sofia-typing-dots span:nth-child(3) {
	animation-delay: 0.4s;
}
@keyframes sofia-dot-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
	40% { transform: translateY(-6px); opacity: 1; }
}

/* ---- Welcome / Suggestions ---- */
.sofia-welcome {
	text-align: center;
	padding: 32px 16px;
}
.sofia-welcome-title {
	font-family: var(--MP-primary-font, "Space Grotesk", sans-serif);
	font-size: 16px;
	font-weight: 700;
	color: #fafafa;
	margin-bottom: 6px;
}
.sofia-welcome-subtitle {
	font-size: 13px;
	color: var(--text-muted, #b3b3b3);
	margin-bottom: 20px;
}
.sofia-suggestions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.sofia-suggestion-chip {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #ccc;
	font-family: var(--MP-secondary-font, "Inter", sans-serif);
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 20px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sofia-suggestion-chip:hover {
	background: rgba(170, 4, 196, 0.1);
	border-color: rgba(170, 4, 196, 0.4);
	color: #fff;
}

/* ---- Error message ---- */
.sofia-msg-error .sofia-msg-bubble {
	border-color: rgba(244, 67, 54, 0.3) !important;
	background: rgba(244, 67, 54, 0.08) !important;
}

/* ---- Responsive ---- */
/* ── Sofia trigger forms (inline input for generation) ─────────────── */
.sofia-trigger-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sofia-trigger-input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	padding: 8px 12px;
	color: #fff;
	font-size: 13px;
	font-family: var(--MP-secondary-font);
}
.sofia-trigger-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.sofia-trigger-input:focus {
	border-color: var(--MP-magenta);
	outline: none;
}
.sofia-trigger-error {
	color: #f44336;
	font-size: 12px;
	margin-top: 4px;
}

/* ── Long-Run Email Prompt Modal ── */
.long-run-email-modal {
	position: fixed;
	inset: 0;
	z-index: 12000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.long-run-email-modal.xray-hidden {
	display: none;
}
.long-run-email-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.68);
	backdrop-filter: blur(4px);
}
.long-run-email-card {
	position: relative;
	z-index: 1;
	width: min(100%, 560px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, rgba(17, 17, 17, 0.96), rgba(5, 5, 5, 0.98));
	color: #f5f5f5;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
	padding: 24px 24px 20px;
	border-radius: 18px;
}
.long-run-email-title {
	font-family: "Space Grotesk", sans-serif;
	font-size: 26px;
	line-height: 1.1;
	margin: 0 0 12px;
}
.long-run-email-copy {
	font-size: 15px;
	line-height: 1.5;
	color: #d4d4d4;
	margin: 0 0 18px;
}
.long-run-email-current {
	font-size: 14px;
	color: var(--MP-magenta);
	margin: 0 0 14px;
}
.long-run-email-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #a3a3a3;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.long-run-email-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #0f0f10;
	color: #fff;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
}
.long-run-email-error {
	min-height: 18px;
	margin-top: 8px;
	color: #fda4af;
	font-size: 12px;
}
.long-run-email-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 20px;
}
.long-run-email-actions .btn {
	min-width: 110px;
}
body.bv-long-run-prompt-open {
	overflow: hidden;
}

/* ============================
   Welcome Overlay
   ============================ */
.welcome-overlay {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(12px);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.35s ease,
		visibility 0.35s ease;
}

.welcome-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

.welcome-card {
	background: linear-gradient(165deg, #1a1a24 0%, #0d0d14 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	width: 92%;
	max-width: 620px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
	transform: translateY(20px) scale(0.97);
	transition: transform 0.35s ease;
}

.welcome-overlay.is-visible .welcome-card {
	transform: translateY(0) scale(1);
}

.welcome-header {
	padding: 32px 32px 0;
	text-align: center;
}

.welcome-kicker {
	display: block;
	font-family: var(--MP-primary-font);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.25em;
	color: var(--MP-magenta);
	margin-bottom: 6px;
}

.welcome-title {
	font-family: var(--MP-primary-font);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #fff;
	margin: 0;
}

.welcome-body {
	padding: 24px 32px 8px;
}

.welcome-lead {
	font-family: var(--MP-secondary-font);
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 24px;
}

.welcome-analogy {
	display: none;
	background: rgba(255, 255, 255, 0.03);
	border-left: 3px solid var(--MP-magenta);
	border-radius: 0 4px 4px 0;
	padding: 16px 20px;
	margin-bottom: 24px;
}

.welcome-analogy-label {
	display: block;
	font-family: var(--MP-primary-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--MP-magenta);
	margin-bottom: 8px;
}

.welcome-analogy p {
	font-family: var(--MP-secondary-font);
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}

.welcome-how {
	margin-bottom: 8px;
}

.welcome-how ul {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}

.welcome-how li {
	font-family: var(--MP-secondary-font);
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	padding: 8px 0 8px 20px;
	position: relative;
}

.welcome-how li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--MP-magenta);
}

.welcome-how li strong {
	color: #fff;
	font-weight: 600;
}

.welcome-dismiss {
	display: block;
	width: calc(100% - 64px);
	margin: 8px 32px 28px;
	padding: 16px;
	background: var(--MP-lime-green);
	color: #000;
	border: none;
	border-radius: 4px;
	font-family: var(--MP-primary-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.15em;
	cursor: pointer;
	transition:
		background 0.2s ease,
		transform 0.15s ease;
}

.welcome-dismiss:hover {

	transform: translateY(-1px);
}

.welcome-dismiss:active {
	transform: translateY(0);
}

/* ── Fixed info "?" button (bottom-left) ── */
.welcome-info-btn {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;

	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--MP-primary-font);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition:
		border-color 0.2s,
		color 0.2s,
		background 0.2s;
	outline: none;
	box-shadow: 4px 4px 0px #00000000 !important;
	padding: 9px 9px;
}
.welcome-info-btn:focus {
	outline: none;
}
.welcome-info-btn:hover {
	border-color: var(--MP-lime-green);
	color: var(--MP-lime-green);
	background: rgba(0, 0, 0, 0.8);
	outline: none;
}

/* ── Mobile adjustments ── */
/* =========================================================
   Mobile Optimization: Groups 4-7
   Touch targets, drawer overflow, forms, typography
   ========================================================= */

/* ===========================================
   RESPONSIVE OVERRIDES — All media queries
   Consolidated at bottom of file for cascade
   =========================================== */

/* ---- Desktop-up (min-width: 1024px) ---- */
@media (min-width: 1024px) {
	.bv-outcomes-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bv-layout-two-column {
		flex-direction: row;
		align-items: flex-start;
	}
	.bv-layout-two-column > .bv-column-primary {
		flex: 2 1 0;
	}
	.bv-layout-two-column > .bv-column-secondary {
		flex: 1 1 0;
	}
}

/* ---- Tablet / mobile (max-width: 1023px) — main mobile breakpoint ---- */
@media (max-width: 1023px) {
	/* Global breathing room — 1% padding on each side */
	main {
		padding-left: 1%;
		padding-right: 1%;
		box-sizing: border-box;
	}

	#ID_PI14_HERO .stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.pi14-intent-grid {
		grid-template-columns: 1fr;
	}

	.pi14-consumer-header {
		align-items: flex-start;
	}

	.pi14-consumer-actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.pi14-mode-tabs {
		flex-wrap: wrap;
	}

	.pi14-summary-modal {
		padding: 10px;
	}

	.stats {
		justify-content: flex-start;
		align-items: stretch;
	}

	.pillrow {
		justify-content: flex-start;
	}

	.detailGrid {
		grid-template-columns: 1fr;
	}

	.modal-body {
		padding: 12px 16px;
	}

	.modal-content {
		width: 96%;
		max-height: 95vh;
	}

	.brand-documents-title {
		margin-bottom: 10px;
	}

	.card-actions .bv-button {
		max-width: 125px;
		min-height: 44px;
	}

	.tierGrid {
		grid-template-columns: 1fr;
	}

	.cro-report-drawer-panel {
		width: 100%;
		transform: translate3d(0, 42px, 0) scale(0.995);
	}

	.cro-report-drawer-title {
		font-size: 14px;
	}

	.cro-report-drawer-actions .bv-button {
		padding-left: 10px;
		padding-right: 10px;
	}

	.dashboard-brief-drawer-panel {
		width: 100%;
		transform: translate3d(0, 42px, 0) scale(0.995);
	}

	.dashboard-brief-drawer-body #aiBriefOutputContainer {
		flex-direction: column;
	}

	.po7-results-drawer-panel {
		width: 100%;
		transform: translate3d(0, 42px, 0) scale(0.995);
	}

	.radar-results-drawer-panel {
		width: 100%;
		transform: translate3d(0, 42px, 0) scale(0.995);
	}

	.lidar-results-drawer-panel {
		width: 100%;
		transform: translate3d(0, 42px, 0) scale(0.995);
	}

	.xray-results-drawer-panel {
		width: 100%;
		transform: translate3d(0, 42px, 0) scale(0.995);
	}

	#ID_PO_TOP_SUBCONTAINER {
		display: flex;
		justify-self: center;
		align-self: center;
		margin-bottom: 20px;
		width: 100%;
		max-width: 400px;
	}

	#ID_PO_TOP_SUBCONTAINER .card-header {
		width: 100%;
		margin-bottom: 0px;
	}

	.cockpit-card-container {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 16px;
	}

	.cockpit-grid {
		grid-template-columns: 1fr;
	}

	.hero {
		max-width: 350px;
		min-width: 50px;
	}

	.historyWrapper {
		grid-template-columns: 1fr;
	}

	#ID_CRO_CTA_ROW {
		flex-direction: column;
	}

	#brandUrlInput {
		margin-top: 10px;
		max-width: 94vw;
	}

	.room-input-row {
		flex-direction: column;
		align-items: stretch;
		max-width: 98vw;
	}

.top-subcontainer.room-input-shell.url-jumpstart{
	flex-direction: column;

}

	.room-input-actions {
		justify-content: flex-start;
	}

	#ID_RADAR_BUTTON_CONTAINER{
		justify-content: center
	}

	.film-strip-header-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 0 20px;
	}

	.film-controls {
		width: 100%;
		justify-content: space-between;
	}

	.film-scroll-container {
		padding: 10px 20px 40px 20px;
		gap: 16px;
	}

	.film-scroll-container .iykyk-card {
		width: 85vw; /* Full width on mobile */
	}

	.film-progress-track {
		width: calc(100% - 40px);
	}

	.film-strip-group {
		align-self: center;
		justify-self: center;
		margin-left: auto;
		margin-right: auto;
		max-width: 400px;
		width: calc(100% - 16px);
		padding: 18px;
	}

	/* Global page spacing */
	.url-input-row {
		flex-direction: column;
	}
	.bv-header h1 {
		font-size: var(--MP-font-size-sm);
		margin-bottom: 0;
	}

	/* Paragraphs and small text */
	.bv-hero-header p {
		font-size: 12px;
	}
	/* Card 0: Uses the Deep Navy Gradient (Neutral/Tech start) */
	.bv-outcome-card-0 {
		background: linear-gradient(
			135deg,
			var(--MP-card-two-one),
			var(--MP-card-two-two)
		);
	}

	/* Card 1: Deep Blue to Purple */
	.bv-outcome-card-1 {
		background: linear-gradient(
			135deg,
			var(--MP-card-three-one),
			var(--MP-card-three-two)
		);
	}

	/* Card 2: Inky Grape to Berry Magenta */
	.bv-outcome-card-2 {
		background: linear-gradient(
			135deg,
			var(--MP-card-two-one),
			var(--MP-card-two-two)
		);
	}

	/* Card 3: Deep Indigo to Violet */
	.bv-outcome-card-3 {
		background: linear-gradient(
			135deg,
			var(--MP-card-three-one),
			var(--MP-card-three-two)
		);
	}

	/* Card 4: Deep Plum to Cool Raspberry */
	.bv-outcome-card-4 {
		background: linear-gradient(
			135deg,
			var(--MP-card-four-one),
			var(--MP-card-four-two)
		);
	}

	/* Card 5: Cool Eggplant to Magenta */
	.bv-outcome-card-5 {
		background: linear-gradient(
			135deg,
			var(--MP-card-three-one),
			var(--MP-card-three-two)
		);
	}

	.bv-footer {
		display: none;
	}

	.card-actions-container {
		flex-direction: column;
		gap: 12px;
	}

	.card-actions-container .bv-button {
		min-width: 150px;
		max-width: 150px;
	}

	.button-actions .bv-button {
		max-width: 150px;
		justify-content: center;
	}

	/* Group 3: Fixed-width overflow fixes */
	#ID_RADAR_INPUT {
		min-width: 0;
		width: 100%;
		margin-left: 0;
	}

	.film-strip-group {
		min-width: 0;
	}

	.market-intelligence-suite {
		grid-template-columns: 1fr;
	}

	#ID_PO_TOP_SUBCONTAINER {
		padding: 16px;
		box-sizing: border-box;
	}

	#ID_PO_PROGRESS_PANEL,
	#ID_RADAR_PROGRESS_PANEL,
	#ID_CRO_PROGRESS_PANEL,
	#ID_LIDAR_PROGRESS_PANEL {
		min-width: 0;
		width: calc(100% - 32px);
		max-width: 400px;
	}

	#ID_STUDIO_MODULES {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Group 4: Touch target sizing */
	.bv-button,
	.btn,
	button[class] {
		min-height: 36px;
	}

	.pi14-mode-tab {
		padding: 12px 8px;
		min-height: 44px;
	}

	/* Group 5: Drawer content overflow */
	.cro-report-drawer-body,
	.dashboard-brief-drawer-body,
	.po7-results-drawer-body,
	.radar-results-drawer-body,
	.lidar-results-drawer-body,
	.xray-results-drawer-body {
		overflow-x: hidden;
		word-break: break-word;
	}

	.report-viewer-container {
		min-height: 400px;
	}

	.dashboard-brief-drawer-body #aiBriefTextarea {
		min-height: 50vh;
	}

	.tableWrap {
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	/* Group 6: Form layout */
	.pi14-form-container {
		flex-direction: column;
		gap: 16px;
	}

	.pi14-form-row {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	/* Group 7: Typography refinements */
	.suite-heading {
		font-size: 22px;
		letter-spacing: 1.5px;
	}

	.film-strip-title {
		font-size: 24px;
	}

	.bv-hero h2 {
		font-size: var(--MP-font-size-xl);
	}

	/* Group 8: History tables — tall & thin on mobile */

	/* All history containers: constrain width, allow vertical scroll */
	#ID_BRAND_HISTORY_MENU,
	#ID_CRO_HISTORY_MENU,
	#ID_HISTORY_MENU,
	#ID_PI14_HISTORY,
	#ID_XRAY_COMPOSE_HISTORY,
	#ID_RADAR_HISTORY_EMPTY,
	#ID_RADAR_HISTORY_TABLE_WRAP,
	#ID_LIDAR_HISTORY_EMPTY,
	#ID_LIDAR_HISTORY_TABLE_WRAP {
		max-width: 100%;
		max-height: none;
		overflow-x: hidden;
		overflow-y: auto;
	}

	/* History items: prevent horizontal overflow */
	.historyItem {
		max-width: 100%;
		overflow: hidden;
		word-break: break-word;
	}

	/* Inline flex rows inside history items: stack vertically */
	.historyItem > div[style*="display:flex"],
	.historyItem > div[style*="display: flex"] {
		flex-wrap: wrap;
	}

	/* PO7 history header: stack name above date/buttons */
	.po7-history-item-header {
		flex-wrap: wrap;
	}

	.po7-history-item-header-right {
		flex-shrink: 1;
		min-width: 0;
	}

	/* Radar & Lidar actual <table> elements: card layout */
	#ID_RADAR_HISTORY_TABLE_WRAP table,
	#ID_LIDAR_HISTORY_TABLE_WRAP table {
		display: block;
		width: 100%;
	}

	#ID_RADAR_HISTORY_TABLE_WRAP thead,
	#ID_LIDAR_HISTORY_TABLE_WRAP thead {
		display: none;
	}

	#ID_RADAR_HISTORY_TABLE_WRAP tbody,
	#ID_LIDAR_HISTORY_TABLE_WRAP tbody {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	#ID_RADAR_HISTORY_TABLE_WRAP tr,
	#ID_LIDAR_HISTORY_TABLE_WRAP tr {
		display: flex;
		flex-direction: column;
		padding: 10px 12px;
		border-bottom: 1px solid #222;
		gap: 4px;
	}

	#ID_RADAR_HISTORY_TABLE_WRAP td,
	#ID_LIDAR_HISTORY_TABLE_WRAP td {
		display: block;
		padding: 2px 0;
		font-size: 14px;
		word-break: break-all;
	}

	#ID_RADAR_HISTORY_TABLE_WRAP td:last-child,
	#ID_LIDAR_HISTORY_TABLE_WRAP td:last-child {
		margin-top: 4px;
	}

	/* Lidar table text size override for mobile */
	#ID_LIDAR_HISTORY_TABLE_WRAP th,
	#ID_LIDAR_HISTORY_TBODY td {
		font-size: 14px;
	}
}

/* ---- X-ray layout (max-width: 980px) ---- */
@media (max-width: 980px) {
	.xray-input-grid {
		grid-template-columns: 1fr;
	}

	.xray-focus-layout {
		display: block;
	}

	.xray-pane {
		display: none;
		max-width: none;
	}

	.xray-focus-layout[data-active-view="a"] .xray-pane--a {
		display: flex;
	}

	.xray-focus-layout[data-active-view="c"] .xray-pane--c {
		display: flex;
	}

	.xray-focus-layout[data-active-view="b"] .xray-pane--b {
		display: flex;
	}

	.xray-pane.is-collapsed {
		flex: 1 1 auto;
		max-width: none;
	}
}

/* ---- Nav suffix (max-width: 800px) ---- */
@media (max-width: 800px) {
	.nav-room-suffix {
		display: none;
	}
}

/* ---- Mobile nav / hamburger (max-width: 750px) ---- */
@media (max-width: 750px) {
	.nav-hamburger {
		display: block;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0);
	}

	.bv-header {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 10px 16px;
		margin-left: 0;
	}

	.bv-header nav {
		display: none;
		width: 100%;
		order: 3;
	}

	.bv-header nav.nav-open {
		display: block;
	}

	.bv-header nav ul {
		flex-direction: column;
		gap: 8px;
		padding: 12px 0;
	}

	.bv-header nav li {
		width: 100%;
	}

	.bv-header nav a {
		display: block;
		padding: 12px 0;
	}

	.nav-hamburger {
		min-width: 44px;
		min-height: 44px;
		padding: 12px;
	}
}

/* ---- Small mobile tweaks (max-width: 640px) ---- */
@media (max-width: 640px) {
	.long-run-email-card {
		padding: 20px 18px 18px;
	}
	.long-run-email-title {
		font-size: 22px;
	}
	.long-run-email-actions {
		flex-direction: column-reverse;
	}
	.long-run-email-actions .btn {
		width: 100%;
	}
}

/* ---- Extra-small mobile (max-width: 600px) ---- */
@media (max-width: 600px) {
	#sofia-fab {
		width: 48px;
		height: 48px;
		bottom: 16px;
		right: 16px;
		font-size: 20px;
	}
	.sofia-drawer-panel {
		width: 100%;
	}
	#ID_STUDIO_INTELLIGENCE{
		grid-template-columns: repeat(1, 1fr);
	}

	.welcome-card {
		width: 96%;
		max-height: 94vh;
	}
	.welcome-header {
		padding: 24px 20px 0;
	}
	.welcome-title {
		font-size: 26px;
	}
	.welcome-body {
		padding: 20px 20px 8px;
	}
	.welcome-lead {
		font-size: 15px;
	}
	.welcome-dismiss {
		width: calc(100% - 40px);
		margin: 8px 20px 24px;
	}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.dashboard-brief-drawer-backdrop,
	.dashboard-brief-drawer-panel,
	.cro-report-drawer-backdrop,
	.cro-report-drawer-panel,
	.po7-results-drawer-backdrop,
	.po7-results-drawer-panel,
	.radar-results-drawer-backdrop,
	.radar-results-drawer-panel,
	.lidar-results-drawer-backdrop,
	.lidar-results-drawer-panel,
	.xray-results-drawer-backdrop,
	.xray-results-drawer-panel {
		transition: none;
	}
}