/* =========================================================
   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: "Poppins", sans-serif;
	--MP-secondary-font: "Bauhaus", sans-serif;

	/* 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);
}

html {
	height: 100vh;
}
/* Global base */
html,
body {
	font-family: var(--MP-primary-font);
	background-color: black;
	color: var(--text-main);
	margin: 0;
	padding: 0;
}

strong {
	color: white;
}

.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: 1330px;
	margin: 40px auto 80px;
	padding: 0 24px 96px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	box-sizing: border-box;
}

.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;
	background: radial-gradient(
			circle at top right,
			rgba(0, 255, 21, 0.14),
			transparent 55%
		),
		linear-gradient(135deg, #11131d, #02030a);
	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;
}

.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: 0;
}

.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.96);
	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);
}

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

.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;
}

.bv-header nav a:hover,
.bv-header nav a:focus-visible {
	color: var(--text-main);
	border-color: var(--primary-color);
}

/* -------------------------
   Hero section
   ------------------------- */
.bv-hero {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 28px;
	margin-top: 32px;
	background: radial-gradient(
			circle at top right,
			rgba(0, 255, 21, 0.14),
			transparent 55%
		),
		linear-gradient(135deg, #11131d, #02030a);
	border-radius: 24px;
	border: 1px solid var(--surface-border);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.75);
	align-items: center;
}

.bv-hero h2 {
	font-size: var(--MP-font-size-xxl);
	margin-bottom: 4px;
}

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

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

/* -------------------------
   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: 12px;
}


#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;
}

.bv-field-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#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: var(--MP-font-size-xxs);
	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: 10px;
	border-left: 3px solid rgba(41, 121, 255, 0.8);
	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: 12px;
	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: var(--MP-font-size-sm);
	color: var(--text-main);
	font-family: "Poppins", system-ui, sans-serif;
}

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

/* 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: 10px;
	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 */
}

.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: 10px;
	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;
}

.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 {
	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;
}

.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: 1330px;
	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;
}

.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: 999px;
	padding: 0.5rem;
	background: #a020f0;
	color: #ffffff;
	font-size: var(--MP-font-size-xs);
	cursor: pointer;
	max-width: 350px;
}

#survey-save-all-exit:hover {
	background: #bc47ff;
}

/* 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: 12px;
	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 {
	position: static;
	bottom: 0;
	right: 0;
	max-width: 1330px;
	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;
}

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

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

.cockpit-card {
	background: linear-gradient(145deg, #1e1e24, #121214);
	border: 1px solid var(--surface-border);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 260px;
	transition: transform 0.2s, border-color 0.2s;
	position: relative;
}

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

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

.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;
}

/* 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(--primary-color);
	width: 0%;
	transition: width 0.6s ease-out;
}

.status-text {
	font-size: 0.75rem;
	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;
}

.card-actions .bv-button {
	flex: 1;
	font-size: 0.75rem;
	padding: 0.6rem;
}

.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 {
	background: linear-gradient(135deg, #1a1a2e, #101426);
	padding: 24px;
	border-radius: 16px;
	border: 1px dashed rgba(41, 121, 255, 0.4);
	margin-bottom: 32px;
}

.url-input-row {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}

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

/* JSON Reward Card (The Goal) */
.card-json {
	border-color: rgba(255, 215, 0, 0.3);
	background: radial-gradient(
			circle at top right,
			rgba(255, 215, 0, 0.05),
			transparent 60%
		),
		#121214;
}

.card-json h3 {
	color: var(--MP-gold);
}

/* 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 {
	flex: 1;
	padding: 0.85rem 1rem;
	border-radius: 999px;
	border: none;
	background: linear-gradient(
		90deg,
		var(--MP-magenta),
		var(--MP-vivid-purple)
	);
	color: #ffffff;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: var(--MP-font-weight-semi-bold);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease,
		background 0.15s ease;
}

.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)
   ============================ */
.cockpit-card {
	position: relative; /* Ensure overlay sits inside */
	overflow: hidden; /* Clip the overlay */
}

/* 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(0, 255, 21, 0.1);
	border-left-color: var(--primary-color);
	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(--primary-color);
	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;
}

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

.modal-content {
	background: #1e1e24;
	border: 1px solid var(--surface-border);
	border-radius: 16px;
	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);
}

.btn-close-modal {
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.btn-close-modal:hover {
	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;
}

/* ============================
   Signature Close Button
   ============================ */
.btn-close-modal {
	background: transparent;
	border: none;
	color: var(--MP-magenta);

	/* 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-magenta);
	background: rgba(255, 255, 255, 0.05); /* Subtle highlight circle */
	transform: rotate(270deg);
}

/* Brand Book / AI Brief pill-style buttons */
.action-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 10px;
	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 !important; /* Force space between major blocks */
	padding: 30px !important; /* Add breathing room inside the boxes */
}

/* 2. De-cramp the Inputs */
.bv-field-container {
	margin-bottom: 25px !important; /* More space between input groups */
}

.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);
	}
}
@media (max-aspect-ratio: 3/5) {
	.bv-outcomes-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.bv-outcomes-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.bv-outcomes-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.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;
	}
}

/* =========================
   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: 10px;
	white-space: pre-wrap;
}

.av-message.is-info {
	background: rgba(41, 121, 255, 0.10);
	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: 12px;
	border: 1px solid var(--surface-border);
	background: rgba(0,0,0,0.25);
	color: var(--text-color);
	padding: 10px 12px;
}

.av-textarea {
	border-radius: 12px;
	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: grid;
	grid-template-columns: 1fr 1fr;
	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.20);
	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.20);
	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.20);
	border-radius: 16px;
	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;
}

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

.av-qa-q {
	font-weight: 800;
	margin-bottom: 6px;
}

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

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

.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.80);
  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: 10px;
  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.20);
  border-radius: 12px;
  padding: 10px 12px;
}

.av-qa-q {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.70);
  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;
}

.av-modal {
	width: min(980px, 96vw);
	max-height: 92vh;
	overflow: auto;
	background: linear-gradient(145deg, #1e1e24, #121214);
	border: 1px solid var(--surface-border);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(0,0,0,0.85);
	padding: 18px;
}

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

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

.av-modal-close {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--surface-border);
	background: rgba(0,0,0,0.25);
	color: var(--text-color);
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
}

.av-modal-body {
	margin-top: 8px;
}

.av-modal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.av-span-2 {
	grid-column: span 2;
}

.av-modal-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

.no-scroll {
	overflow: hidden;
}

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

/* =========================================================
   Edit Modal v2: Readable "Document" Style
   ========================================================= */

/* 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: 16px;
    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 !important; /* Force readable font */
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
    
    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; } 

/* =========================================
   Mobile layout for index.html (<= 600px)
   ========================================= */
@media (max-aspect-ratio: 3/5) {
	/* Global page spacing */
	.url-input-row {
		flex-direction: column;
	}
	.bv-header h1 {
		display: none;
		font-size: var(--MP-font-size-huge);
		margin-bottom: 8px;
	}
	/* 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 {
		width: 100%;
		justify-content: center;
	}
}