/* ============================================================ 
Brand Style Root / Header 
============================================================ */

.mbs-root {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}

body:has(.mbs-profile-required) #mbs-root,
body:has(.marby-form-profile-required) #mbs-root,
.marby-form-profile-required ~ #mbs-root,
.mbs-profile-required ~ #mbs-root {
	display: none !important;
}

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

.mbs-title {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 1.2;
}

.mbs-subtitle {
	margin: 0;
	color: #666;
	max-width: none;
}

/* ============================================================ Current Brand Sources - first-pass analysis foundation ============================================================ */

.mbs-source-card,
.mbs-identity-card {
	margin: 0 0 24px;
	padding: 28px;
	border: 1px solid #e3e6e8;
	border-radius: 16px;
	background: #fff;
	box-sizing: border-box;
}

.mbs-section-heading {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 22px;
}

.mbs-section-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--marby-color-marby-blue, #8fb1ce);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.mbs-section-heading h3 {
	margin: 0 0 5px;
	font-size: 22px;
}

.mbs-section-heading p,
.mbs-existing-work p {
	margin: 0;
	color: #646b70;
}

.mbs-source-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.mbs-field {
	display: grid;
	gap: 7px;
	color: #30363a;
	font-size: 14px;
	font-weight: 700;
}

.mbs-field em {
	color: #7a8389;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
}

.mbs-field input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #cfd5d8;
	border-radius: 8px;
	box-sizing: border-box;
	background: #fff;
	color: #202427;
	font: inherit;
}

.mbs-source-note {
	margin: 18px 0 0;
	padding: 14px 16px;
	border-left: 3px solid var(--marby-color-marby-blue, #8fb1ce);
	background: #f3f8fb;
	color: #536069;
	font-size: 14px;
}

.mbs-identity-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.mbs-identity-option {
	display: grid;
	gap: 7px;
	min-height: 174px;
	padding: 22px;
	border: 1px solid #d8dde0;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	box-sizing: border-box;
}

.mbs-identity-option.is-selected {
	border: 2px solid var(--marby-color-marby-blue, #8fb1ce);
	background: #f3f8fb;
}

.mbs-identity-option input {
	position: absolute;
	opacity: 0;
}

.mbs-option-kicker,
.mbs-existing-work > span {
	color: #8d7b66;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mbs-identity-option strong {
	font-size: 19px;
	line-height: 1.25;
}

.mbs-identity-option small {
	color: #5f686d;
	font-size: 14px;
	line-height: 1.5;
}

.mbs-source-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
}

.mbs-source-status {
	min-height: 20px;
	color: #52616a;
	font-size: 14px;
}

.mbs-existing-work {
	margin: 0 0 22px;
	padding: 16px 0 0;
	border-top: 1px solid #e5e8ea;
}

.mbs-existing-work p {
	margin-top: 5px;
}

@media (max-width: 760px) {
	.mbs-source-card,
	.mbs-identity-card {
		padding: 20px;
	}

	.mbs-source-grid,
	.mbs-identity-options {
		grid-template-columns: 1fr;
	}

	.mbs-source-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.mbs-source-actions .mbs-button {
		width: 100%;
	}
}

.mbs-global-status {
	margin-bottom: 20px;
	color: #555;
	font-size: 14px;
}

body:has(#mbs-root) .marby-form .marby-inputs input[type="text"],
body:has(#mbs-root) .marby-form .marby-inputs textarea,
body:has(#mbs-root) .marby-form .marby-inputs select,
body:has(#mbs-root) .marby-form .marby-inputs .marby-input {
	color: var(--marby-color-marby-blue, #8fb1ce) !important;
}

/* ============================================================ Option Card Layout ============================================================ */

.mbs-options-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.mbs-option-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	gap: 16px;
	padding: 18px;
	box-sizing: border-box;
	border: 2px solid #e4e4e4;
	border-radius: 18px;
	background: #fff;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.mbs-option-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mbs-option-name {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
}

.mbs-option-status {
	min-height: 20px;
	font-size: 24px;
	color: #666;
	text-align: center;
}

/* ============================================================ Storyboard Board Layout ============================================================ */

.mbs-style-board-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	min-width: 0;
	max-width: 100%;
	gap: 0;
	align-items: start;
}

.mbs-image-variants,
.mbs-image-variant {
	min-width: 0;
	max-width: 100%;
}

/* ============================================================ Storyboard Images / Variants ============================================================ */

.mbs-image-variants {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.mbs-image-variant {
	position: relative;
}

.mbs-image-variant img,
.mbs-option-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.mbs-storyboard-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: 100%;
	gap: 10px;
}

.mbs-storyboard-tile {
	position: relative;
	width: 100%;
	min-width: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 14px;
	clip-path: inset(0 round 14px);
	background: #f4f4f4;
	background-clip: border-box;
	background-repeat: no-repeat;
	background-position: var(--mbs-panel-x) var(--mbs-panel-y);
	background-size: 432% 216%;
}

.mbs-image-variant.is-selected {
	padding: 5px;
	border-radius: 16px;
	border-color: #555;
	box-shadow: 7px 7px 10px 3px rgba(0, 0, 0, 0.2);
}

.mbs-image-variant.is-selected::after {
	content: "Selected";
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	padding: 5px 8px;
	border-radius: 999px;
	background: #dddddd85;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.mbs-image-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 10px;
}

/* ============================================================ Single Storyboard Mode ============================================================ */

.mbs-option-card.is-single-storyboard-mode .mbs-style-board-grid {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.mbs-option-card.is-single-storyboard-mode .mbs-image-variants {
	display: block;
	width: 100%;
}

.mbs-option-card.is-single-storyboard-mode .mbs-image-variant {
	width: 100%;
	max-width: none;
}

.mbs-option-card.is-single-storyboard-mode .mbs-image-variant.is-selected {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.mbs-option-card.is-single-storyboard-mode .mbs-option-image {
	width: 100%;
	max-width: 760px;
	height: auto;
	object-fit: contain;
	border-radius: 14px;
}

.mbs-option-card.is-single-storyboard-mode
	.mbs-image-variant.is-processing
	.mbs-option-image {
	margin-right: auto;
	margin-left: auto;
}

.mbs-option-card.is-single-storyboard-mode .mbs-image-actions {
	justify-content: center;
}

/* ============================================================ Buttons ============================================================ */

.mbs-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.mbs-icon-btn:hover:not(:disabled) {
	background: #f7f7f7;
	border-color: #bfbfbf;
	transform: translateY(-1px);
}

.mbs-icon-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.mbs-icon-btn .dashicons {
	width: 25px;
	height: 25px;
	font-size: 25px;
}

.mbs-text-btn {
	width: 200px;
	height: 50px;
}

/* ============================================================ Selected Badge ============================================================ */

.mbs-selected-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: #555;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.mbs-selected-badge[hidden] {
	display: none !important;
}

/* ============================================================ Image Lightbox ============================================================ */

.mbs-image-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.mbs-image-lightbox-backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.72);
}

.mbs-image-lightbox-content {
	position: relative;
	z-index: 2;
	width: min(92vw, 1100px);
	max-height: 90vh;
	overflow: visible;
}

.mbs-image-lightbox-content img {
	display: block;
	width: 100%;
	max-height: 86vh;
	object-fit: contain;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.mbs-image-lightbox-close {
	position: absolute;
	top: -16px;
	right: -16px;
	z-index: 3;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.mbs-profile-required .mbs-button {
	min-height: 42px;
}

/* ============================================================ Brand Identity / Typography ============================================================ */

.mbs-heading-font-name,
.mbs-body-font-name {
	font-size: 22px;
}

.mbs-font-family-meta {
	margin-bottom: 10px;
	font-size: 16px;
}

.mbs-brand-identity h2 {
	margin: 0 0 6px;
}

.mbs-typography-wrap {
	margin-top: 12px;
}

.mbs-type-samples {
	padding: 10px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.03);
}

/* ============================================================ Responsive ============================================================ */

@media (max-width: 1100px) {
	.mbs-options-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.mbs-style-board-grid,
	.mbs-option-card.is-single-storyboard-mode .mbs-style-board-grid {
		grid-template-columns: 1fr;
	}

	.mbs-storyboard-tile-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.mbs-header {
		flex-direction: column;
		align-items: stretch;
	}

	.mbs-options-grid {
		grid-template-columns: 1fr;
	}

	.mbs-option-status {
		font-size: 18px;
	}

	.mbs-option-card {
		padding: 12px;
	}
}

@media (max-width: 600px) {
	.mbs-storyboard-tile-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ============================================================ Brand Style Form / Kim Design Integration ============================================================ */

/* Shared shell migration 2026-08-08: page header, builder, and base form reset
 * are now owned by marby-forms-public.css. Preserved here for reference only. */
@media not all {
.frm-brand-style-page {
	width: calc(100vw - (2 * var(--marby-page-gutter)));
	max-width: none;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

.frm-brand-style-header {
	margin-bottom: 26px;
}

.frm-brand-style-header > div {
	max-width: 980px;
}

.frm-brand-style-header h1 {
	margin: 18px 0 10px;
	font-size: clamp(42px, 5vw, 68px);
	line-height: 1;
	letter-spacing: -0.035em;
}

.frm-brand-style-header p {
	max-width: 900px;
	margin: 0;
	color: var(--marby-color-marby-blue);
	font-size: clamp(20px, 2.1vw, 30px);
	line-height: 1.2;
}

.frm-brand-style-builder {
	margin-bottom: 24px;
}

.frm-brand-style-page .marby-form,
.frm-brand-style-page .marby-question {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.frm-brand-style-page .marby-q-header[hidden],
.frm-brand-style-page .frm-response-source[hidden] {
	display: none !important;
}

}

/* Shared question-card ownership 2026-08-08. */
@media not all {
.frm-brand-style-question {
	min-width: 0;
	border: 1px solid var(--marby-color-border-light) !important;
	background: var(--marby-color-white) !important;
	box-shadow: var(--marby-shadow-soft);
}
}

.frm-brand-style-create {
	border-bottom: 1px solid var(--marby-color-border-light);
}

.frm-brand-style-create-main {
	padding: 28px 30px;
	background: var(--marby-color-soft-blue);
}

.frm-brand-style-create-copy {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.frm-brand-style-create-icon,
.mbs-header-icon {
	display: grid;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	place-items: center;
	border-radius: 50%;
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
	font-size: 21px;
	font-weight: 700;
}

.frm-brand-style-create-copy h2 {
	margin: 0 0 8px;
	font-size: 27px;
}

.frm-brand-style-create-copy p {
	max-width: 980px;
	margin: 0;
	line-height: 1.55;
}

/* Shared Ask MAI action migration 2026-08-08. */
@media not all {
body .frm-brand-style-page .frm-brand-style-create-action {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 14px;
	row-gap: 6px;
	margin: 0;
	padding: 24px 30px;
	border-top: 0;
	background: var(--marby-color-soft-blue);
}

.frm-brand-style-build-copy h3 {
	margin: 0 0 3px;
	font-size: 22px;
}

.frm-brand-style-build-copy p {
	max-width: none;
	margin: 0;
}

.frm-brand-style-build-copy {
	flex: 1 0 100%;
}

.frm-brand-style-source-disclaimer {
	margin-top: 6px !important;
	padding-top: 0;
	border-top: 0;
	color: var(--marby-color-text);
	font-size: 13px;
	line-height: 1.5;
}

body .frm-brand-style-page .frm-brand-style-create-action .ask-mai-btn {
	order: 2;
	align-self: flex-start;
	margin: 0;
}

body .frm-brand-style-page .frm-brand-style-create-action .marby-q-status {
	order: 3;
	align-self: center;
	margin: 0;
	text-align: right;
}
}

/* The retained legacy form report remains hidden; Brand Style renders its
   current analysis through the dedicated mbs-root response surface. */
.frm-brand-style-page .frm-brand-style-response,
.frm-brand-style-page .marby-colour-palette-panel {
	display: none !important;
}

/* The generic form Save action belongs to the retained legacy workflow. */

.frm-brand-style-page .frm-brand-style-question > .marby-save-actions {
	display: none !important;
}

/* Shared Ask MAI button migration 2026-08-08. */
@media not all {
body .frm-brand-style-page .ask-mai-btn {
	border-color: var(--marby-color-marby-blue) !important;
	background: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
}

body .frm-brand-style-page .ask-mai-btn:hover,
body .frm-brand-style-page .ask-mai-btn:focus-visible {
	border-color: var(--marby-color-marby-blue) !important;
	background: var(--marby-color-white) !important;
	color: var(--marby-color-marby-blue) !important;
}
}

/* Shared control-column migration 2026-08-08. */
@media not all {
.frm-brand-style-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}

.frm-brand-style-control-panel {
	min-width: 0;
	padding: 28px 30px;
	background: var(--marby-color-white);
}

.frm-brand-style-control-panel + .frm-brand-style-control-panel {
	border-top: 1px solid var(--marby-color-border-light);
	border-left: 0;
	background: var(--marby-color-soft);
}

.frm-brand-style-primary-grid,
.frm-brand-style-url-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.frm-brand-style-url-grid {
	margin-top: 24px;
}

.frm-brand-style-url-grid.is-read-only input[readonly] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--marby-color-border);
	border-radius: var(--marby-radius-xs);
	background: var(--marby-color-soft);
	color: var(--marby-color-marby-blue);
	font-size: 15px;
	cursor: default;
}

.mbs-social-source-empty {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--marby-color-border);
	border-radius: var(--marby-radius-xs);
	background: var(--marby-color-soft);
}

.mbs-social-source-empty p,
.frm-brand-style-screenshot-help {
	margin: 0;
	color: var(--marby-color-text);
	font-size: 14px;
	line-height: 1.5;
}

.frm-brand-style-screenshot-help {
	margin-bottom: 14px;
}

.frm-brand-style-page .marby-input-row {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.frm-brand-style-page .marby-input-row + .marby-input-row {
	margin-top: 20px;
}

.frm-brand-style-primary-grid .marby-input-row + .marby-input-row,
.frm-brand-style-url-grid .marby-input-row + .marby-input-row {
	margin-top: 0;
}

.frm-brand-style-page .marby-input-label {
	display: block;
	margin-bottom: 9px;
	font-size: 15px;
	font-weight: 700;
}

.frm-brand-style-question .marby-url-input-row .marby-input-help {
	display: none;
}

.frm-brand-style-question .marby-url-input-row input[data-mbs-source-field] {
	color: var(--marby-color-marby-blue);
}

.frm-brand-style-question
	.marby-url-input-row
	input[data-mbs-source-field]::placeholder {
	color: var(--marby-color-marby-blue);
	opacity: 0.68;
}

.frm-brand-style-question .mbs-source-field-error {
	min-height: 18px;
	margin: 6px 0 0;
	color: #7d1d1d;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.frm-brand-style-question input[data-mbs-source-field][aria-invalid="true"] {
	border-color: #7d1d1d;
}

.frm-brand-style-page .marby-input-row textarea,
.frm-brand-style-page .marby-input-row select {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-width: 0;
	padding: 13px 14px;
	border: 1px solid var(--marby-color-border);
	border-radius: var(--marby-radius-xs);
	background: var(--marby-color-white);
	color: var(--marby-color-marby-blue) !important;
	font-size: 16px;
	line-height: 1.5;
}

.frm-brand-style-page .marby-photo-style-row select {
	width: 100%;
	max-width: none;
}

.frm-brand-style-page .marby-photo-style-description {
	margin: 9px 0 0;
	color: var(--marby-color-text);
	font-size: 13px;
	line-height: 1.5;
}

.frm-brand-style-page .marby-image-upload-row {
	height: 100%;
}
}

/* The current analysis preview appears below Ask MAI. Legacy controls remain preserved in code while the new results journey is built section by section. */

body:has(.frm-brand-style-question) #mbs-root .mbs-header,
body:has(.frm-brand-style-question) #mbs-root .mbs-source-card,
body:has(.frm-brand-style-question) #mbs-root .mbs-identity-card,
body:has(.frm-brand-style-question) #mbs-root .mbs-existing-work,
body:has(.frm-brand-style-question) #mbs-root .mbs-option-card {
	display: none !important;
}

.mbs-current-analysis {
	margin: 0 0 28px;
	padding: 30px;
	border: 1px solid #e3e6e8;
	border-radius: 16px;
	background: #fff;
}

.mbs-brand-analysis {
	margin: 0 0 28px;
	overflow: hidden;
	border: 1px solid #e3e6e8;
	border-radius: 16px;
	background: #fff;
}

.mbs-brand-analysis .mbs-current-analysis {
	margin: 0;
	border: 0;
	border-radius: 0;
}

.mbs-brand-analysis .mbs-web-social-review {
	margin: 0;
	padding: 0 30px 30px;
}

.mbs-results-heading {
	margin-bottom: 24px;
}

.mbs-results-heading > div {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mbs-results-heading h2 {
	margin: 0;
	font-size: 26px;
}

.mbs-results-heading p {
	margin: 8px 0 0;
	color: #687178;
	font-size: 14px;
}

.mbs-analysis-layout {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
	gap: 28px;
	align-items: stretch;
}

.mbs-brand-score-card {
	display: grid;
	align-content: center;
	justify-items: center;
	padding: 26px;
	border-radius: 12px;
	background: var(--marby-color-soft-blue, #eef6fc);
	text-align: center;
}

.mbs-score-ring {
	display: grid;
	width: 156px;
	height: 156px;
	margin-bottom: 16px;
	place-items: center;
	border-radius: 50%;
	background: conic-gradient(
		var(--marby-color-marby-blue, #8fb1ce) calc(var(--mbs-score) * 1%),
		#dce5ea 0
	);
}

.mbs-score-ring > div {
	display: grid;
	width: 124px;
	height: 124px;
	place-content: center;
	border-radius: 50%;
	background: #fff;
}

.mbs-score-ring strong {
	font-size: 40px;
	line-height: 1;
}

.mbs-score-ring span,
.mbs-brand-score-card > span {
	color: #647078;
	font-size: 13px;
}

.mbs-score-label {
	margin-bottom: 4px;
}

.mbs-analysis-summary h3 {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.35;
}

.mbs-analysis-summary > p {
	margin: 0 0 22px;
	color: #5c666c;
	line-height: 1.55;
}

.mbs-score-metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
}

.mbs-score-metric > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
	font-size: 14px;
}

.mbs-score-metric > div span {
	color: var(--marby-color-marby-blue, #8fb1ce);
	font-weight: 700;
}

.mbs-score-metric i {
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #e6ecef;
}

.mbs-score-metric b {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--marby-color-marby-blue, #8fb1ce);
}

.mbs-web-social-review {
	margin: 0 0 28px;
}

.mbs-review-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.mbs-review-card {
	padding: 24px;
	border: 1px solid #e1e3e2;
	border-radius: 12px;
	background: #fff;
}

.mbs-review-card.is-homepage {
	border-left: 4px solid var(--marby-color-marby-blue, #8fb1ce);
	background: var(--marby-color-soft-blue, #eef6fc);
}

.mbs-review-card.is-social {
	border-left: 4px solid var(--marby-color-marby-blue, #b79a79);
	background: var(--marby-color-light-tan, #f8f3ed);
}

.mbs-review-card h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 20px;
}

.mbs-review-icon {
	display: inline-grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 1px solid #e0e3e4;
	border-radius: 50%;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
}

.mbs-review-finding {
	padding: 17px 0;
	border-top: 1px solid rgba(80, 92, 98, 0.16);
}

.mbs-review-finding:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.mbs-review-finding > span {
	display: inline-block;
	margin: 0 7px 5px 0;
	padding: 3px 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mbs-review-finding > span.is-working {
	background: #f2f5ed;
	color: #66846b;
}

.mbs-review-finding > span.is-opportunity {
	background: #fdf4e6;
	color: #b8812c;
}

.mbs-review-finding strong {
	font-size: 16px;
	line-height: 1.35;
}

.mbs-review-finding p {
	margin: 5px 0 0;
	line-height: 1.55;
}

.mbs-perception-gap {
	margin: 0 0 28px;
	padding: 30px;
	border: 1px solid #e3e6e8;
	border-radius: 16px;
	background: #fff;
}

.mbs-perception-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.mbs-perception-card {
	padding: 24px;
	border: 1px solid #e1e3e2;
	border-radius: 12px;
}

.mbs-perception-card.is-dna {
	border-left: 4px solid var(--marby-color-marby-blue, #b79a79);
	background: var(--marby-color-light-tan, #f8f3ed);
}

.mbs-perception-card.is-current {
	border-left: 4px solid var(--marby-color-marby-blue, #8fb1ce);
	background: var(--marby-color-soft-blue, #eef6fc);
}

.mbs-perception-card h3 {
	margin: 0 0 8px;
	font-size: 20px;
}

.mbs-perception-card > p {
	margin: 0;
	color: #58636a;
	font-size: 14px;
	line-height: 1.55;
}

.mbs-trait-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 18px 0;
}

.mbs-trait-buttons button {
	padding: 10px 12px;
	border: 1px solid #d9ddde;
	border-radius: 8px;
	background: #fff;
	color: #252a2d;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.mbs-trait-buttons button:hover,
.mbs-trait-buttons button:focus-visible,
.mbs-trait-buttons button.is-selected {
	border-color: var(--marby-color-marby-blue, #8fb1ce);
	background: #fff;
	outline: 0;
}

.mbs-perception-card.is-dna .mbs-trait-buttons button.is-selected {
	border-color: var(--marby-color-marby-blue, #b79a79);
}

.mbs-perception-card .mbs-trait-explanation {
	min-height: 44px;
	margin-top: 0;
	padding-top: 15px;
	border-top: 1px solid rgba(80, 92, 98, 0.16);
	color: #344047;
}

.mbs-gap-comparison {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 24px;
	border: 1px solid #e3e1dc;
	background: var(--marby-color-soft-tan, #f8f5f0);
}

.mbs-gap-traits > span {
	display: block;
	margin-bottom: 12px;
	color: #a99278;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mbs-gap-traits > div {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.mbs-gap-traits b {
	display: inline-block;
	padding: 10px 12px;
	border: 1px solid #dedfdc;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
}

.mbs-gap-arrow {
	color: var(--marby-color-marby-blue, #8fb1ce);
	font-size: 28px;
	font-weight: 300;
	text-align: center;
}

.mbs-gap-insight {
	margin-top: 18px;
	padding: 20px 18px;
	border-left: 4px solid #bfb6a8;
	background: #fff;
}

.mbs-gap-insight strong {
	font-size: 16px;
}

.mbs-gap-insight p {
	margin: 6px 0 0;
	line-height: 1.55;
}

/* Direction comparison keeps the two future MAI outputs visually comparable. */

.mbs-perception-card.is-current {
	order: 1;
}

.mbs-perception-card.is-dna {
	order: 2;
}

.mbs-perception-card.is-current {
	border-left-color: var(--marby-color-marby-blue);
	background: var(--marby-color-light-tan);
}

.mbs-perception-card.is-dna {
	border-left-color: var(--marby-color-marby-blue);
	background: var(--marby-color-soft-blue);
}

.mbs-compare-directions {
	margin: 0 0 28px;
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 16px;
	background: var(--marby-color-white);
}

.mbs-direction-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.mbs-direction-board {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 12px;
	background: var(--marby-color-white);
}

.mbs-direction-board.is-current {
	border-color: var(--marby-color-marby-blue);
	background: var(--marby-color-soft-blue);
}

.mbs-direction-board.is-reimagined {
	border-color: var(--marby-color-marby-blue);
	background: var(--marby-color-light-tan);
}

.mbs-direction-kicker,
.mbs-palette-heading > span,
.mbs-storyboard-heading {
	display: block;
	color: var(--marby-color-marby-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mbs-direction-board h3 {
	margin: 7px 0 4px;
	font-size: 25px;
}

.mbs-direction-lead {
	margin: 0;
	line-height: 1.5;
}

.mbs-direction-summary {
	margin: 22px 0;
	padding: 16px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.7);
}

.mbs-direction-summary strong {
	display: block;
	margin-bottom: 5px;
}

.mbs-direction-summary p {
	margin: 0;
	line-height: 1.5;
}

.mbs-palette-heading {
	margin-top: 24px;
}

.mbs-palette-editor {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-top: 20px;
}

.mbs-palette-card {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 5px 7px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 0;
	background: transparent;
}

/* Typography for palette labels is owned by the semantic H4 in marby-master.css. */

.mbs-palette-card input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 40px;
	padding: 8px 10px;
	border: 1px solid var(--marby-color-border);
	border-radius: var(--marby-radius-xs);
	background: var(--marby-color-white);
	font: inherit;
	font-size: 13px;
}

.mbs-palette-card input[type="color"] {
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.mbs-storyboard-heading {
	margin-top: 24px;
}

.mbs-storyboard-heading span {
	margin-left: 7px;
	color: var(--marby-color-text);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.mbs-direction-storyboard {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
	margin-top: 9px;
	overflow: hidden;
}

.frm-brand-style-page,
.frm-brand-style-page input,
.frm-brand-style-page button,
.frm-brand-style-page textarea {
	font-family: var(--marby-font-body);
}

.mbs-direction-storyboard i {
	display: block;
	position: relative;
	aspect-ratio: 1.25;
	overflow: hidden;
	border-radius: 4px;
	background: linear-gradient(
		135deg,
		#f1ece5 0 33%,
		#89a8bd 33% 58%,
		#d7ba91 58% 78%,
		#474b4e 78%
	);
}

.mbs-direction-storyboard i img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mbs-direction-storyboard i.has-image {
	background: transparent !important;
}

.mbs-direction-storyboard.is-current i.has-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mbs-direction-storyboard.is-current i.is-logo-reference img {
	position: static;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: contain !important;
}

.mbs-direction-storyboard.is-current i.is-cropped-reference img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
}

.mbs-direction-storyboard i.has-palette-background {
	background-repeat: no-repeat;
	background-size: cover;
}

.mbs-direction-storyboard i.has-square-image img {
	object-fit: contain;
}

.mbs-direction-storyboard i.has-composite {
	background-color: transparent;
	background-repeat: no-repeat;
	cursor: pointer;
}

.mbs-direction-storyboard.is-current i:nth-child(2n) {
	background: linear-gradient(
		145deg,
		#f6f2eb 0 36%,
		#a9bac4 36% 58%,
		#d9c4a1 58% 78%,
		#6e6961 78%
	);
}

.mbs-direction-storyboard.is-current i:nth-child(3n) {
	background: linear-gradient(
		125deg,
		#eff0ec 0 38%,
		#c0d0d4 38% 64%,
		#786f67 64%
	);
}

.mbs-direction-storyboard.is-reimagined i {
	background: linear-gradient(
		135deg,
		#f5f2e9 0 33%,
		#92aa9e 33% 54%,
		#d3ad76 54% 76%,
		#293a40 76%
	);
}

.mbs-direction-storyboard.is-reimagined i:nth-child(2n) {
	background: linear-gradient(
		145deg,
		#f7f3ec 0 35%,
		#a4b6a4 35% 57%,
		#ca9c65 57% 78%,
		#2d3c3c 78%
	);
}

.mbs-direction-storyboard.is-reimagined i:nth-child(3n) {
	background: linear-gradient(
		125deg,
		#f4efe6 0 40%,
		#d5b182 40% 64%,
		#78978c 64% 79%,
		#26373b 79%
	);
}

.mbs-image-lightbox-panel {
	width: min(90vw, 1100px);
	aspect-ratio: 1.25;
	max-height: 86vh;
	border-radius: 6px;
	background-repeat: no-repeat;
}

.mbs-direction-details {
	margin: 20px 0 0;
}

.mbs-direction-details div {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--marby-color-border-light);
}

.mbs-direction-details dt {
	font-size: 12px;
	font-weight: 700;
}

.mbs-direction-details dd {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}

.mbs-choose-identity,
.mbs-brand-consistency {
	margin: 0 0 28px;
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 16px;
	background: var(--marby-color-white);
}

.mbs-identity-choice-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.mbs-identity-choice {
	display: flex;
	min-width: 0;
	min-height: 300px;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 12px;
}

.mbs-identity-choice.is-preserve {
	border-color: var(--marby-color-marby-blue);
	background: var(--marby-color-white);
}

.mbs-identity-choice.is-reimagine {
	border-color: var(--marby-color-marby-blue);
	background: var(--marby-color-soft-blue);
}

.mbs-identity-choice h3 {
	margin: 8px 0 10px;
	font-size: 24px;
}

.mbs-identity-choice p {
	margin: 0;
	line-height: 1.55;
}

.mbs-identity-choice ul {
	margin: 22px 0;
	padding-left: 20px;
	line-height: 1.7;
}

.mbs-identity-toggle {
	width: 100%;
	margin-top: auto;
	min-height: 43px;
	border: 1px solid currentColor;
	border-radius: 5px;
	background: transparent;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.mbs-identity-choice.is-preserve .mbs-identity-toggle {
	color: var(--marby-color-marby-blue);
}

.mbs-identity-choice.is-reimagine .mbs-identity-toggle {
	color: var(--marby-color-marby-blue);
}

.mbs-identity-choice.is-selected.is-preserve .mbs-identity-toggle {
	border-color: var(--marby-color-marby-blue);
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

.mbs-identity-choice.is-selected.is-reimagine .mbs-identity-toggle {
	border-color: var(--marby-color-marby-blue);
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

/* Shared migration 2026-08-08:
   Drift Protection and the Brand Style save panel now use the shared Forms
   response/action patterns in marby-forms-public.css. The old slider and
   page-owned save styling are retained as comments for reference so they
   cannot override the shared components.

.mbs-drift-protection {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px;
	border-left: 4px solid var(--marby-color-marby-blue);
	border-radius: 0 10px 10px 0;
	background: var(--marby-color-soft-blue);
}

.mbs-drift-protection strong {
	font-size: 17px;
}

.mbs-drift-protection p {
	max-width: 920px;
	margin: 8px 0 0;
	line-height: 1.5;
}

.mbs-switch {
	position: relative;
	width: 44px;
	height: 25px;
	flex: 0 0 44px;
	cursor: pointer;
}

.mbs-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.mbs-switch span {
	position: absolute;
	inset: 0;
	border-radius: 100px;
	background: #b7c0c8;
	transition: 0.2s ease;
}

.mbs-switch span::after {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--marby-color-white);
	content: "";
	transition: 0.2s ease;
}

.mbs-switch input:checked + span {
	background: var(--marby-color-marby-blue);
}

.mbs-switch input:checked + span::after {
	transform: translateX(19px);
}

.mbs-switch input:focus-visible + span {
	outline: 3px solid var(--marby-color-marby-blue);
	outline-offset: 2px;
}

.mbs-brand-style-save {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 28px;
	padding: 26px 30px;
	border-radius: 14px;
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

.mbs-brand-style-save h2 {
	margin: 0 0 7px;
	color: var(--marby-color-white);
	font-size: 24px;
}

.mbs-brand-style-save p {
	margin: 0;
	line-height: 1.5;
}

.mbs-save-identity-status {
	display: inline-block;
	color: var(--marby-color-white);
	font-size: 13px;
	font-weight: 400;
	text-align: right;
}

.mbs-save-action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.mbs-save-identity {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 0 20px;
	border: 1px solid var(--marby-color-white);
	border-radius: 5px;
	background: var(--marby-color-white);
	color: var(--marby-color-marby-blue);
	font: inherit;
	font-weight: 400;
	cursor: pointer;
}

.mbs-save-identity:hover,
.mbs-save-identity:focus-visible {
	border-color: var(--marby-color-white);
	background: transparent;
	color: var(--marby-color-white);
	outline: 0;
}
*/

.frm-brand-style-page .marby-image-dropzone {
	display: grid;
	min-height: 150px;
	padding: 22px;
	place-content: center;
	border: 1px dashed var(--marby-color-marby-blue);
	border-radius: var(--marby-radius-xs);
	background: var(--marby-color-white);
}

.frm-brand-style-page .marby-image-dropzone::before {
	content: "+";
	display: grid;
	width: 40px;
	height: 40px;
	margin: 0 auto 9px;
	place-items: center;
	border-radius: 50%;
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
	font-size: 27px;
	font-weight: 300;
	line-height: 1;
}

.frm-brand-style-page .marby-image-upload-preview-list {
	grid-template-columns: repeat(5, minmax(64px, 1fr));
	gap: 9px;
}

.frm-brand-style-page .marby-ai-editor-wrap {
	margin: 0;
	padding: 0;
	background: var(--marby-color-soft);
}

.frm-brand-style-response {
	display: grid;
	gap: 18px;
	padding: 22px;
}

.frm-brand-style-report-card,
.frm-brand-style-detail-card {
	border: 1px solid var(--marby-color-border-light);
	background: var(--marby-color-white);
}

.frm-brand-style-section-heading {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 76px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--marby-color-border-light);
}

.frm-brand-style-section-heading > span {
	display: grid;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	place-items: center;
	border-radius: 50%;
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
	font-size: 15px;
	font-weight: 700;
}

.frm-brand-style-section-heading h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
}

.frm-brand-style-overview-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.frm-brand-style-overview-card {
	min-width: 0;
	padding: 21px;
}

.frm-brand-style-overview-card + .frm-brand-style-overview-card {
	border-left: 1px solid var(--marby-color-border-light);
}

.frm-brand-style-overview-card > strong,
.frm-brand-style-detail-row > strong {
	display: block;
	margin-bottom: 7px;
	color: var(--marby-color-marby-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.frm-brand-style-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.frm-brand-style-detail-card {
	min-width: 0;
}

.frm-brand-style-detail-card.is-tan {
	background: var(--marby-color-light-tan);
}

.frm-brand-style-detail-card.is-blue {
	background: var(--marby-color-soft-blue);
}

.frm-brand-style-detail-body {
	display: grid;
}

.frm-brand-style-detail-row {
	min-width: 0;
	padding: 18px 20px;
}

.frm-brand-style-detail-row + .frm-brand-style-detail-row {
	border-top: 1px solid var(--marby-color-border-light);
}

.frm-brand-style-response-textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 74px;
	padding: 8px 0;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--marby-radius-xs);
	outline: 0;
	background: transparent;
	color: var(--marby-color-text);
	font: inherit;
	line-height: 1.55;
	resize: none;
}

.frm-brand-style-response-textarea:hover,
.frm-brand-style-response-textarea:focus {
	padding: 8px 10px;
	border-color: var(--marby-color-border);
	background: var(--marby-color-white);
	resize: vertical;
}

.frm-brand-style-page .marby-colour-palette-panel {
	margin: 0 22px 22px;
	padding: 0;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 0;
	background: var(--marby-color-white);
}

.frm-brand-style-page .marby-colour-palette-title {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 76px;
	margin: 0;
	padding: 15px 20px;
	border-bottom: 1px solid var(--marby-color-border-light);
	font-size: 24px;
}

.frm-brand-style-page .marby-colour-palette-title::before {
	content: "6";
	display: grid;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	place-items: center;
	border-radius: 50%;
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
	font-size: 15px;
	font-weight: 700;
}

.frm-brand-style-page .marby-colour-palette-help {
	margin: 14px 20px 0;
	color: var(--marby-color-text);
}

.frm-brand-style-page .marby-colour-palette-help + .marby-colour-palette-help {
	margin-top: 4px;
}

.frm-brand-style-page .marby-colour-palette-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	padding: 20px;
}

.frm-brand-style-page .marby-colour-palette-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--marby-color-border-light);
	background: var(--marby-color-soft);
}

.frm-brand-style-page .marby-colour-picker {
	width: 100%;
	height: 88px;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.frm-brand-style-page .marby-colour-name,
.frm-brand-style-page .marby-colour-hex {
	height: 40px;
	padding: 8px 10px;
	border: 1px solid var(--marby-color-border);
	border-radius: var(--marby-radius-xs);
	background: var(--marby-color-white);
}

/* Save layout, type, and actions are owned by marby-master.css so Brand Style
   stays identical to every other form. */

/* Storyboard shortcode: preserve media generation while matching the new report. */

.mbs-root {
	position: relative;
	left: 50%;
	width: calc(100vw - (2 * var(--marby-page-gutter)));
	max-width: none;
	margin-top: 22px;
	transform: translateX(-50%);
}

.mbs-header {
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	margin-bottom: 0;
	padding: 25px 28px;
	border: 1px solid var(--marby-color-border-light);
	border-bottom: 0;
	background: var(--marby-color-light-tan);
}

.mbs-header-copy {
	min-width: 0;
	flex: 1 1 auto;
}

.mbs-header-actions {
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-end;
}

.mbs-header-actions .mbs-regenerate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 245px;
	margin: 0;
	padding: 0 20px;
	border-color: var(--marby-color-marby-blue);
	border-radius: var(--marby-radius-xs);
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}

.mbs-header-actions .mbs-regenerate-btn:hover,
.mbs-header-actions .mbs-regenerate-btn:focus-visible {
	border-color: var(--marby-color-marby-blue);
	background: var(--marby-color-white);
	color: var(--marby-color-marby-blue);
}

.mbs-header-actions .mbs-regenerate-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.mbs-title {
	font-size: 26px;
}

.mbs-subtitle {
	color: var(--marby-color-text);
}

.mbs-option-card {
	padding: 20px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 0;
}

.mbs-storyboard-tile-grid {
	gap: 12px;
}

.mbs-storyboard-card {
	display: flex;
	min-width: 0;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xs);
	background: var(--marby-color-white);
}

.mbs-storyboard-tile {
	flex: 0 0 auto;
	border-radius: 0;
	clip-path: none;
}

.mbs-storyboard-caption {
	padding: 15px 16px 17px;
}

.mbs-storyboard-caption h3 {
	margin: 0 0 5px;
	font-size: 18px;
	line-height: 1.25;
}

.mbs-storyboard-caption p {
	margin: 0;
	color: var(--marby-color-text);
	font-size: 14px;
	line-height: 1.45;
}

@media (max-width: 900px) {
	.frm-brand-style-create-main,
	.frm-brand-style-controls,
	.frm-brand-style-primary-grid,
	.frm-brand-style-url-grid,
	.mbs-analysis-layout,
	.mbs-review-grid,
	.mbs-perception-columns,
	.mbs-direction-grid,
	.mbs-identity-choice-grid,
	.frm-brand-style-overview-grid,
	.frm-brand-style-detail-grid {
		grid-template-columns: 1fr;
	}

	.mbs-gap-comparison {
		grid-template-columns: 1fr;
	}

	.mbs-gap-arrow {
		transform: rotate(90deg);
	}

	.mbs-direction-storyboard {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.frm-brand-style-control-panel + .frm-brand-style-control-panel,
	.frm-brand-style-overview-card + .frm-brand-style-overview-card {
		border-top: 1px solid var(--marby-color-border-light);
		border-left: 0;
	}

	.frm-brand-style-page .marby-colour-palette-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.mbs-palette-editor {
		grid-template-columns: 1fr;
	}

	.mbs-palette-card:first-child {
		grid-column: auto;
	}

	.mbs-current-analysis {
		padding: 22px 18px;
	}

	.mbs-brand-analysis .mbs-web-social-review {
		padding: 0 18px 22px;
	}

	.mbs-perception-gap,
	.mbs-compare-directions {
		padding: 22px 18px;
	}

	.mbs-gap-comparison {
		padding: 18px;
	}

	.mbs-results-heading h2 {
		font-size: 23px;
	}

	.mbs-direction-board {
		padding: 18px;
	}

	.mbs-direction-board h3 {
		font-size: 22px;
	}

	.mbs-palette-card {
		grid-template-columns: 90px minmax(95px, 1fr) minmax(120px, 1.25fr) 82px;
	}

	.mbs-score-metrics {
		grid-template-columns: 1fr;
	}

	.frm-brand-style-page {
		width: calc(100vw - (2 * var(--marby-page-gutter)));
	}

	.frm-brand-style-create-main {
		align-items: stretch;
		padding: 22px 18px;
	}

	.frm-brand-style-control-panel {
		padding: 22px 18px;
	}

	body .frm-brand-style-page .frm-brand-style-create-action {
		grid-template-columns: 1fr;
		padding: 22px 18px;
	}

	body .frm-brand-style-page .frm-brand-style-create-action .ask-mai-btn,
	body .frm-brand-style-page .frm-brand-style-create-action .marby-q-status {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
		text-align: right;
	}

	.frm-brand-style-response {
		padding: 14px;
	}

	.frm-brand-style-page .marby-colour-palette-panel {
		margin: 0 14px 14px;
	}

	.mbs-header {
		align-items: stretch;
		padding: 22px 18px;
	}

	.mbs-header-actions {
		justify-content: stretch;
	}

	.mbs-header-actions .mbs-regenerate-btn {
		width: 100%;
		min-width: 0;
	}

	.mbs-palette-card {
		grid-template-columns: 1fr 1fr;
	}

	.mbs-palette-card > span {
		grid-column: 1 / -1;
	}

	.mbs-palette-card input[type="color"] {
		min-height: 60px;
	}

	/* Shared migration 2026-08-08: desktop and mobile Save/Drift layouts are
	   now owned by marby-forms-public.css.
	.mbs-brand-style-save,
	.mbs-drift-protection {
		align-items: stretch;
		flex-direction: column;
	}
	*/

	/* Shared migration 2026-08-08: .mbs-save-action is now part of the shared
	   Save-section grid. */
	.mbs-social-source-empty {
		align-items: stretch;
		flex-direction: column;
	}

	/* Shared migration 2026-08-08:
	.mbs-save-identity-status { text-align: left; }
	.mbs-save-identity { width: 100%; }
	.mbs-switch { align-self: flex-end; }
	*/
}

@media (max-width: 600px) {
	.frm-brand-style-create-copy {
		grid-template-columns: 1fr;
	}

	.frm-brand-style-page .marby-colour-palette-list,
	.frm-brand-style-page .marby-image-upload-preview-list {
		grid-template-columns: 1fr;
	}
}