/* =========================================================
   Marby Planner - Public Styles
   Organized by layout + feature sections
   ========================================================= */

/* =========================================================
   1) Base + Layout
   ========================================================= */

.mp-grid {
	display: flex;
	gap: 20px;
}

.mp-profile-required .mp-tab-panel {
	margin: 0;
	background: #ffffff;
}

.mp-profile-required .mp-profile-required-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 16px;
	border-color: var(--marby-color-marby-blue, #70aadd);
	border-radius: 0;
	background: #ffffff;
	color: var(--marby-color-marby-blue, #70aadd) !important;
	text-decoration: none !important;
	font-weight: 700;
}

.mp-profile-required .mp-profile-required-button:hover,
.mp-profile-required .mp-profile-required-button:focus {
	border-color: var(--marby-color-marby-blue, #70aadd);
	background: var(--marby-color-marby-blue, #70aadd);
	color: #ffffff !important;
}

.mp-dashboard-usage-link {
	display: inline-flex;
	margin-top: 12px;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mp-dashboard-usage-link:hover,
.mp-dashboard-usage-link:focus {
	color: #ffffff !important;
	text-decoration-thickness: 2px;
}

.mp-initial-loading[hidden] {
	display: none !important;
}

.mp-initial-loading {
	margin: 18px 0 24px;
}

.mp-initial-loading-status {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding: 13px 15px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-lg, 10px);
	background: #f8fafc;
	color: var(--marby-color-ink, #111827);
}

.mp-initial-loading-status > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mp-initial-loading-status strong {
	font-size: 14px;
	line-height: 1.25;
}

.mp-initial-loading-status span:not(.mp-initial-loading-spinner) {
	color: #64748b;
	font-size: 12px;
	line-height: 1.35;
}

.mp-initial-loading-spinner {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 3px solid #dbe5ee;
	border-top-color: var(--marby-color-marby-blue, #70aadd);
	border-radius: 999px;
	animation: mp-initial-loading-spin 0.8s linear infinite;
}

.mp-initial-loading-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.mp-initial-loading-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 130px;
	padding: 18px;
	overflow: hidden;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-lg, 10px);
	background: #f8fafc;
}

.mp-initial-loading-card::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 20%,
		rgba(255, 255, 255, 0.88) 48%,
		transparent 76%
	);
	transform: translateX(-100%);
	animation: mp-initial-loading-shimmer 1.35s ease-in-out infinite;
	content: "";
}

.mp-initial-loading-line {
	display: block;
	width: 100%;
	height: 12px;
	border-radius: 999px;
	background: #e5eaf0;
}

.mp-initial-loading-line.is-short {
	width: 35%;
	height: 14px;
}

.mp-initial-loading-line.is-medium {
	width: 72%;
}

@keyframes mp-initial-loading-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes mp-initial-loading-shimmer {
	to {
		transform: translateX(100%);
	}
}

@media (max-width: 720px) {
	.mp-initial-loading-status {
		align-items: flex-start;
	}

	.mp-initial-loading-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mp-initial-loading-spinner,
	.mp-initial-loading-card::after,
	.mp-month-loading-spinner,
	.mp-regenerate-spinner {
		animation: none;
	}
}

/* =========================================================
   2) Forms + Fields
   ========================================================= */

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

.mp-help {
	font-size: 12px;
	opacity: 0.75;
	margin: 0 0 40px 0;
}

.mp-language-field {
	margin-bottom: 40px;
}

.mp-input-textarea {
	min-height: 64px;
}

.mp-month-control-row {
	display: block;
	position: relative;
}

.mp-month-control-row .mp-month {
	width: 100%;
	min-width: 0;
}

.mp-month-loading[hidden] {
	display: none !important;
}

.mp-month-loading {
	display: inline-flex;
	position: absolute;
	top: 50%;
	left: calc(100% + 10px);
	align-items: center;
	gap: 7px;
	transform: translateY(-50%);
	color: #475569;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.mp-month-loading-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid #dbe5ee;
	border-top-color: var(--marby-color-marby-blue, #70aadd);
	border-radius: 999px;
	animation: mp-initial-loading-spin 0.8s linear infinite;
}

.mp-tab-btn.is-loading::after {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-left: 8px;
	vertical-align: -2px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: currentColor;
	border-radius: 999px;
	animation: mp-initial-loading-spin 0.8s linear infinite;
}

/*
.mp-select{
	min-width: 200px;
}
*/
.mp-week {
	float: none;
	min-width: 150px;
}
/*
.mp-month{
	min-width: 200px;
}

.mp-year{
	min-width: 150px;
}
*/
/* =========================================================
   3) Week Review Buttons/Tabs + Links
   ========================================================= */
.mp-tabs-wrap {
	margin: 30px 0 20px 0;
}

.mp-btn-primary-rev {
	font-weight: 700;
	font-size: 14px;
	padding: 10px 15px;
}
.mp-btn-primary-rev:hover {
	color: var(--marby-color-marby-blue, #70aadd);
	background-color: #ffffff;
}

/** Tab Buttons */
.mp-tab-btn {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 500;
	font-size: 16px;
	padding: 15px 20px;
}

.mp-tab-btn:hover,
.mp-tab-btn:focus,
.mp-tab-btn.is-active {
	color: #ffffff;
	background-color: var(--marby-color-marby-blue, #70aadd);
}

/* Prevent hover styles on disabled buttons */
.mp-btn:disabled:hover,
.mp-btn.is-disabled:hover,
button:disabled:hover {
	transform: none;
	box-shadow: none;
	filter: none;
}

/* =========================================================
   4) Planner Header + Help Panel
   ========================================================= */

.mp-page-header {
	text-align: center;
	margin-bottom: 30px;
	padding: 30px;
	background: #000000;
	color: white;
	border-radius: 15px;
}

/* Superseded: master.css owns legacy page-header h1 typography. */

.marby-membership-usage {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 12px;
}

.marby-membership-usage__label {
	font-weight: 700;
	color: #ffffff;
}

.marby-membership-usage__item {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 4px;
	background: #ffffff;
	color: #1f2937;
}

.marby-membership-usage__item.is-limit-reached,
.marby-membership-usage__inactive {
	border-color: #fca5a5;
	color: #8a1f11;
	font-weight: 700;
}

.mp-instruction-panel {
	padding-bottom: 20px;
}

.mp-instruction-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	margin-right: 6px;
	transition: transform 0.15s ease;
	transform: rotate(0deg);
}

#mp-help-toggle.is-open .mp-instruction-icon {
	transform: rotate(0deg);
}

.mp-help-panel {
	border-left: 4px solid #000000;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 40px;
}

.mp-instruction-btn {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 4px;
	text-align: middle;
}

.mp-instruction-font:hover {
	text-decoration: underline;
}

.mp-instruction-font {
	font-size: 22px;
}

/* =========================================================
   5) Month/Year Header Controls
   ========================================================= */

.mp-planner-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.mp-ym-left {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

/* =========================================================
   6) Channels + Days Picker
   ========================================================= */

.mp-channel {
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 12px;
	border-radius: 10px;
}

.mp-channel-head {
	display: flex;
	/*
	justify-content: space-between;
	align-items: center;
	*/
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 10px;
}

.mp-days {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

[data-pln-day-card] {
	display: flex;
	gap: 6px;
	align-items: center;
}

/* =========================================================
   7) Generate Bar (Top-level plan generation UI)
   ========================================================= */
.mp-campaign-actions {
	margin: 20px 0px;
}

.mp-campaign-save-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-top: 16px;
}

.mp-campaign-save-actions .mp-btn {
	width: auto !important;
	max-width: max-content !important;
	align-self: flex-start;
	justify-self: start;
}

#mp-promoted-offer {
	background: #ffffff !important;
	border-color: var(--marby-color-border-strong, #c9c9c9) !important;
	color: var(--marby-color-marby-blue, #70aadd) !important;
}

.marby-rte {
	margin-bottom: 20px;
}

.mp-gen-bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.mp-gen-left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.mp-gen-right {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.mp-gen-msg {
	flex-basis: 100%;
	margin-top: 8px;
}

.mp-actions {
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	padding-top: 30px;
}

.mp-error {
	font-weight: 600;
	padding-right: 20px;
}

/* =========================================================
   8) Day Review Tab
   ========================================================= */
.mp-day-selected-label {
	margin: 10px 0;
	font-weight: 700;
	font-size: 24px;
}

.mp-day-marketing-description {
	display: none;
	margin-top: 20px;
	max-width: 1100px;
}

.mp-day-marketing-description__row {
	margin: 0 0 10px;
	line-height: 1.5;
}

.mp-day-marketing-description__row strong {
	margin-right: 4px;
}

/** extends mp-btn */
.mp-subtab {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 500;
	font-size: 13px;
	padding: 10px 15px;
}

.mp-subtab:hover,
.mp-subtab:focus,
.mp-subtab.is-active {
	color: #ffffff;
	background-color: var(--marby-color-marby-blue, #70aadd);
}

.week-of-month {
	margin: 0 0 20px;
}

/* =========================================================
   9) Plan Item Card
   ========================================================= */
.mp-review-controls {
	margin-bottom: 40px;
}

.mp-day-section {
	border: 1px solid #dddddd;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 40px;
}

.mp-repeated-weekday-separator {
	border-top: 1px solid #dddddd;
	height: 0;
	margin: 28px 0 18px;
}

.mp-item-card,
.mp-item-card * {
	box-sizing: border-box;
}

/* Superseded: master.css owns Plan Item date heading typography. */

.mp-item-channel {
	margin: 0 0 10px 0;
}

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

.mp-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.mp-week {
	width: 140px;
}

.mp-text {
	flex: 1;
	min-width: 260px;
}

/* =========================================================
   10) Content Layout (66/33 grid)
   ========================================================= */

.mp-content-grid {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.mp-content-left {
	flex: 3 1 0%;
	min-width: 0;
}

.mp-content-right {
	flex: 2 1 0%;
	min-width: 260px;
}

/* =========================================================
   11) Editor Containment (TinyMCE inside card)
   ========================================================= */

.mp-item-card .wp-editor-wrap,
.mp-item-card .wp-editor-container,
.mp-item-card .mce-tinymce,
.mp-item-card iframe {
	max-width: 100% !important;
	width: 100% !important;
}

/* =========================================================
   12) Media Layout (66/33 grid)
   ========================================================= */

.mp-media-grid {
	display: grid;
	grid-template-columns: 3fr 2fr; /* 2fr 1fr ~66/33  || 3fr 2fr;  ~60/40 */
	gap: 16px;
	align-items: start;
}

.mp-media-left {
	/*flex: 3 1 0%;*/
	min-width: 0;
}

.mp-media-right {
	/*flex: 2 1 0%;*/
	min-width: 260px;
}

.mp-media-grid__item {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}

.mp-media-grid__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.mp-media-grid__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mp-media-grid__actions {
	position: absolute;
	top: 6px;
	right: 6px;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.mp-media-grid__item:hover .mp-media-grid__actions {
	opacity: 1;
}

/* =========================================================
   13) Media Panel + Gallery
   ========================================================= */

.mp-media-panel {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	background: #fff;
}

.mp-media-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.mp-media-panel__title {
	font-weight: 600;
	font-size: 14px;
}

.mp-media-panel__meta {
	font-size: 12px;
	color: #666;
}

.mp-media-panel__status {
	font-size: 12px;
	margin-top: 8px;
	color: #666;
}

.mp-media-panel__status.is-error {
	color: #c0392b;
	font-weight: 500;
}

.mp-media-panel__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.mp-media-gallery {
	border: 1px dashed #ccc;
	border-radius: 10px;
	background: #ffffff;
	padding: 10px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	min-height: 120px;
}

.mp-media-gallery-empty {
	grid-column: 1 / -1;
	padding: 10px;
	text-align: center;
	opacity: 0.75;
}

.mp-media-gallery-usage {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #4b5563;
}

.mp-media-gallery-counter {
	text-align: left;
}

.mp-media-generation-counter {
	margin-left: auto;
	text-align: right;
}

.mp-media-gallery-counter.is-limit-reached,
.mp-media-generation-counter.is-limit-reached {
	color: var(--marby-color-danger);
}

.mp-media-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: #fff;
	cursor: pointer;
	position: relative;
	transition:
		transform 0.12s ease,
		box-shadow 0.12s ease;
}

.mp-media-thumb:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

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

.mp-media-thumb.is-selected {
	outline: 3px solid rgba(0, 0, 0, 0.3);
}

/* Social Panel */
.mp-social-panel {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	background: #fff;
}

.mp-media-product-toggle {
	position: absolute;
	left: 6px;
	bottom: 6px;
	z-index: 5;
	border: 0;
	border-radius: 999px;
	padding: 5px 8px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.96);
	color: #4c1d95;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}

.mp-media-product-toggle:hover {
	background: #f5f3ff;
}

.mp-media-thumb--product-selected .mp-media-product-toggle {
	background: #16a34a;
	color: #fff;
}

.mp-media-thumb--product {
	border: 2px solid #8b5cf6;
	/* Marby cleanup 2026-06-02: transparent product cut-outs need a visible neutral backing in the gallery. */
	background:
		linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
		linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
		linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
	background-color: #ffffff;
	background-position:
		0 0,
		0 8px,
		8px -8px,
		-8px 0;
	background-size: 16px 16px;
}

.mp-media-thumb--product-selected {
	border: 3px solid #16a34a;
}

/* Optional badge if you keep mp-media-role-badge */
.mp-media-role-badge {
	position: absolute;
	left: 6px;
	top: 6px;
	z-index: 5;
	border-radius: 999px;
	padding: 4px 7px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	background: rgba(255, 255, 255, 0.95);
	color: #4c1d95;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
	pointer-events: none;
}

.mp-media-thumb--product-selected .mp-media-role-badge {
	color: #166534;
}

/* =========================================================
   14) Media Actions + Upload
   ========================================================= */

.mp-media-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	padding-top: 20px;
}

.mp-media-upload {
	margin-bottom: 12px;
}

.mp-media-upload-panel {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	background: #fff;
}

[data-video-upload-trigger] {
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	padding: 12px;
	background: #fff;
	cursor: pointer;
	text-align: center;
}

.mp-media-upload-sub {
	margin-top: 6px;
	font-size: 12px;
	opacity: 0.75;
}

.mp-media-thumb {
	position: relative;
	cursor: grab;
}

.mp-media-thumb:active {
	cursor: grabbing;
}

.mp-media-thumb.is-selected {
	outline: 3px solid #2b7cff;
}

.mp-media-drag {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 3;
	cursor: grab;
}

[data-media-select] {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 3;
}

.mp-media-sort-placeholder {
	border: 2px dashed #aaa;
	min-height: 80px;
}

.mp-media-thumb.ui-sortable-helper {
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
	transform: scale(1.03);
}

.mp-media-check {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 3;
	border: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}

.mp-media-trash {
	position: absolute;
	top: 4px;
	left: 0px;
	z-index: 3;
	/* Marby cleanup 2026-06-02: show only the trash glyph; no button border/chrome at rest. */
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
	box-shadow: none;
	padding: 0;
}

.mp-media-trash::before {
	display: block;
	width: 17px;
	height: 17px;
	margin: 2px auto 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-1 12H8L7 9Zm3 2v7h2v-7h-2Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-1 12H8L7 9Zm3 2v7h2v-7h-2Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	content: "" !important;
}

.mp-media-trash:hover {
	background: transparent;
	border: 0;
	color: #111827;
}

/* =========================================================
   15) Media Preview (Large)
   ========================================================= */

.mp-media-preview-large {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #ffffff;
}

.mp-media-preview-large img.mp-media-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mp-media-preview--empty .mp-media-img {
	display: none;
}

.mp-media-preview-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.mp-media-generation-controls {
	margin-top: 12px;
}

.mp-media-generate-layout {
	display: grid;
	grid-template-columns: minmax(150px, 0.68fr) minmax(0, 1.32fr);
	gap: 10px 12px;
	align-items: start;
}

.mp-media-generate-column {
	min-width: 0;
}

.mp-media-generate-tips {
	grid-column: 1 / -1;
	min-width: 0;
}

.mp-media-generate-layout:has(.mp-media-product-generate[hidden]) {
	grid-template-columns: minmax(0, 1fr);
}

.mp-media-generate-heading {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 700;
	color: #111827;
}

.mp-media-scene-notes {
	width: 100%;
	min-height: 74px;
	resize: vertical;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	background: #fff;
	color: var(--marby-color-marby-blue, #70aadd);
}

.mp-media-generate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.mp-media-product-generate .mp-media-generate-actions {
	flex-wrap: nowrap;
}

.mp-media-product-generate .mp-media-generate-actions .mp-btn {
	/*flex:1 1 0;*/
	white-space: nowrap;
}

.mp-media-upload.is-disabled,
[data-video-upload-trigger].is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

[data-video-upload-trigger].is-disabled * {
	pointer-events: none;
}

.mp-info-toggle,
.mp-product-info-toggle,
.mp-content-rules-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	color: #111827;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.mp-info-toggle:hover,
.mp-info-toggle:focus,
.mp-product-info-toggle:hover,
.mp-product-info-toggle:focus,
.mp-content-rules-toggle:hover,
.mp-content-rules-toggle:focus {
	color: var(--marby-color-marby-blue, #70aadd);
}

.mp-info-toggle:hover .mp-info-text,
.mp-info-toggle:focus .mp-info-text,
.mp-info-toggle:active .mp-info-text,
.mp-product-info-toggle:hover .mp-product-info-text,
.mp-product-info-toggle:focus .mp-product-info-text,
.mp-product-info-toggle:active .mp-product-info-text,
.mp-content-rules-toggle:hover .mp-info-text,
.mp-content-rules-toggle:focus .mp-info-text,
.mp-content-rules-toggle:active .mp-info-text {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mp-info-chevron,
.mp-product-info-chevron,
.mp-content-rules-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.15s ease;
	transform: rotate(0deg);
}

.mp-info-toggle.is-open .mp-info-chevron,
.mp-product-info-toggle.is-open .mp-product-info-chevron,
.mp-content-rules-toggle.is-open .mp-content-rules-chevron {
	transform: rotate(90deg);
}

.mp-info-box,
.mp-product-info-box,
.mp-content-rules-box {
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	line-height: 1.4;
}

.mp-info-box[hidden],
.mp-product-info-box[hidden],
.mp-content-rules-box[hidden],
.mp-content-rules-wrap[hidden] {
	display: none;
}

.mp-info-box strong,
.mp-product-info-box strong,
.mp-content-rules-box strong {
	display: block;
	margin-bottom: 6px;
}

.mp-info-box ul,
.mp-product-info-box ul,
.mp-content-rules-box ul {
	margin: 0;
	padding-left: 18px;
}

.mp-info-box li + li,
.mp-product-info-box li + li,
.mp-content-rules-box li + li {
	margin-top: 4px;
}

.mp-media-preview-status {
	margin-top: 8px;
	font-size: 12px;
	opacity: 0.85;
}

.mp-media-empty {
	padding: 10px;
	text-align: center;
	opacity: 0.75;
}

/* If image fails to load, show a visible placeholder */
.mp-media-thumb img {
	background: repeating-linear-gradient(
		45deg,
		#f2f2f2,
		#f2f2f2 10px,
		#e7e7e7 10px,
		#e7e7e7 20px
	);
}

/* Same for the preview */
.mp-media-preview-large img.mp-media-img {
	background: repeating-linear-gradient(
		45deg,
		#f2f2f2,
		#f2f2f2 12px,
		#e7e7e7 12px,
		#e7e7e7 24px
	);
}

.mp-media-panel__preview {
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	background: #fafafa;
	min-height: 220px;

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
}

.mp-media-panel__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.mp-media-panel__preview-empty {
	color: #777;
	font-size: 13px;
}

/* =========================================================
   16) Social Channels 
   ========================================================= */
.mp-social-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

.mp-social-row {
	display: grid;
	grid-template-columns: 110px minmax(140px, 1fr) 160px 110px;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
}

[data-social-publish] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	margin: 0;
}

[data-social-publish] input[type="checkbox"] {
	accent-color: var(--marby-color-marby-blue, #70aadd);
}

.mp-social-name,
.mp-social-type {
	line-height: 1.2;
}

.mp-social-name {
	font-weight: 600;
}

.mp-social-type {
	color: #6b7280;
	font-size: 13px;
}

.mp-social-time-wrap input[type="time"] {
	width: 90%;
	margin-left: -10%;
}

@media (max-width: 900px) {
	.mp-social-row {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* =========================================================
   17) Item Actions Row (Update/Delete/Publish)
   ========================================================= */

.mp-post-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0 4px;
}

.mp-post-actions-left {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.mp-regenerate-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 18px;
	color: #475569;
	font-size: 13px;
	font-weight: 700;
}

.mp-regenerate-status:empty {
	display: none;
}

.mp-regenerate-status.is-success {
	color: var(--marby-color-success);
	font-weight: 400;
}

.mp-regenerate-status.is-error {
	color: var(--marby-color-danger);
}

.mp-regenerate-spinner {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	border: 2px solid #dbe5ee;
	border-top-color: var(--marby-color-marby-blue, #70aadd);
	border-radius: 999px;
	animation: mp-initial-loading-spin 0.8s linear infinite;
}

.mp-post-actions-msg {
	flex-basis: 100%;
	margin-top: 4px;
}

.mp-item-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: flex-start;
	padding-top: 12px;
}

.mp-item-actions-left {
	display: flex;
	gap: 10px;
	align-items: center;
}

.mp-item-actions-right {
	margin-left: 0;
	display: flex;
	gap: 10px;
	align-items: center;
}

.mp-item-actions-msg {
	flex-basis: 100%;
	margin-top: 8px;
}

/* =========================================================
   18) Locked Note
   ========================================================= */

/* Superseded: master.css owns locked-note heading typography. */

.mp-locked-note a {
	text-decoration: underline;
}

.mp-lock-icon {
	display: inline-block;
	width: 17px;
	height: 17px;
	vertical-align: middle;
	margin-right: 6px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h2v11H5V10h2Zm2 0h6V7a3 3 0 0 0-6 0v3Zm3 3a2 2 0 0 0-1 3.73V19h2v-2.27A2 2 0 0 0 12 13Z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h2v11H5V10h2Zm2 0h6V7a3 3 0 0 0-6 0v3Zm3 3a2 2 0 0 0-1 3.73V19h2v-2.27A2 2 0 0 0 12 13Z'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

.mp-lock-icon::before {
	content: none !important;
}

/* =========================================================
   19) Modal (Confirmation / Dialog)
   ========================================================= */

.mp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.mp-modal {
	background: #fff;
	border-radius: 10px;
	max-width: 520px;
	width: 100%;
	padding: 18px 18px 14px 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.mp-modal-title {
	margin: 0 0 10px 0;
}

.mp-modal-body {
	margin: 0 0 16px 0;
}

.mp-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

/* =========================================================
   20) Occasions
   ========================================================= */
.mp-occasion-section-header {
	margin: 20px 0;
}

#mp-occasions-list {
	width: 100%;
	max-width: 980px;
}

/*
.mp-occasions-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.mp-occasions-column {
	min-width: 0;
	background: transparent;
	border: 0;
	padding: 0;
}
*/
.mp-occasions-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 45px;
	align-items: start;
	position: relative;
}

.mp-occasions-column {
	min-width: 0;
	background: transparent;
	border: 0;
	padding: 0;
	position: relative;
}

.mp-occasions-column:first-child::after {
	content: "";
	position: absolute;
	top: 0;
	right: -15px; /* 1/3 the gap */
	width: 1px;
	height: 100%;
	background: #dcdcdc;
}

/*
.mp-occasions-column-title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}
*/

.mp-occasions-month {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}

.mp-occasions-month-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
}

.mp-occasions-month-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-occasion-item {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.mp-occasion-item:last-child {
	border-bottom: 0;
}

.mp-occasion-row {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 10px 0px;
}

.mp-occasion-label {
	display: block;
	line-height: 1.4;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* hide item dot */
.mp-occasions-month-list li {
	list-style: none !important;
}

.mp-occasions-month-list li::marker {
	content: "" !important;
}

.mp-occasion-item {
	margin: 0;
	padding: 0;
}

/* =========================================================
   21) Mobile
   ========================================================= */

/* Tablet / narrow layout shift */
@media (max-width: 900px) {
	.marby-planner {
		width: 100%;
		padding: 0 14px;
	}

	.mp-tab-panel {
		padding: 14px;
	}

	.mp-content-grid,
	.mp-media-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.mp-content-left,
	.mp-content-right,
	.mp-media-left,
	.mp-media-right {
		width: 100%;
		min-width: 0;
	}

	.mp-social-row {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 8px;
	}

	.mp-social-time-wrap input[type="time"] {
		width: 100%;
		margin-left: 0;
	}

	.mp-occasions-columns {
		grid-template-columns: 1fr;
	}

	.mp-occasions-column:first-child::after {
		display: none;
	}
}

/* Mobile polish */
@media (max-width: 640px) {
	.mp-page-header {
		padding: 22px 16px;
	}

	/* Superseded: master.css owns responsive legacy page-header h1 typography. */

	.mp-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.mp-tabs {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.mp-tab-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
		font-size: 14px;
		padding: 11px 12px;
		margin: 0;
		border-radius: 10px;
	}

	.mp-subtabs {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.mp-subtab {
		width: 100%;
		text-align: center;
		margin: 0;
	}

	.mp-item-card {
		width: 100%;
		min-width: 0;
		overflow: hidden;
	}

	.mp-item-card * {
		max-width: 100%;
	}

	.mp-row,
	.mp-planner-header,
	.mp-gen-bar,
	.mp-gen-left,
	.mp-gen-right,
	.mp-post-actions,
	.mp-post-actions-left,
	.mp-item-actions,
	.mp-item-actions-left,
	.mp-item-actions-right,
	.mp-media-generate-actions,
	.mp-media-preview-actions,
	.mp-media-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 8px;
	}

	.mp-gen-right,
	.mp-item-actions-right {
		margin-left: 0;
	}

	.mp-btn,
	.mp-btn-rev,
	.mp-media-actions .mp-btn,
	.mp-media-actions .button,
	.mp-post-actions .mp-btn,
	.mp-media-generate-actions .mp-btn,
	.mp-media-preview-actions .mp-btn {
		width: 100%;
		margin: 0;
		text-align: center;
		justify-content: center;
	}

	.mp-media-generate-layout {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.mp-media-product-generate .mp-media-generate-actions {
		flex-wrap: wrap;
	}

	.mp-media-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mp-social-panel,
	.mp-media-panel,
	.mp-media-upload-panel {
		width: 100%;
		min-width: 0;
	}

	.mp-social-row {
		padding: 12px;
	}

	[data-social-publish],
	.mp-social-name,
	.mp-social-type,
	.mp-social-time-wrap {
		width: 100%;
	}

	.mp-occasions-columns {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Small phone rescue */
@media (max-width: 420px) {
	.marby-planner {
		padding: 0 10px;
	}

	.mp-tab-panel,
	.mp-day-section {
		padding: 12px;
	}

	/* Superseded: master.css owns compact legacy page-header h1 typography. */

	.mp-instruction-font {
		font-size: 18px;
	}

	.mp-media-gallery {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.mp-tab-btn {
		font-size: 13px;
		letter-spacing: 0.4px;
		padding: 10px;
	}

	.mp-day-selected-label {
		font-size: 20px;
	}
}

.mp-media-mode-tabs {
	display: flex;
	gap: 6px;
	margin: 8px 0 12px;
}

.mp-media-mode-tab {
	border: 1px solid #9a9a9a;
	border-radius: 4px;
	padding: 7px 12px;
	background: #fff;
	cursor: pointer;
}

.mp-media-mode-tab.is-active {
	border-color: var(--marby-color-marby-blue, #70aadd);
	background: var(--marby-color-marby-blue, #70aadd);
	color: #fff;
}

.mp-video-gallery-panel,
.mp-video-workspace {
	display: none;
}

.mp-video-gallery-panel {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	background: #fff;
	min-height: 480px;
}

.mp-video-media.is-video-mode .mp-media-panel,
.mp-video-media.is-video-mode .mp-media-upload,
.mp-video-media.is-video-mode .mp-media-preview-workspace {
	display: none;
}

.mp-video-media.is-video-mode .mp-video-gallery-panel,
.mp-video-media.is-video-mode .mp-video-workspace {
	display: block;
}

.mp-video-upload-note,
.mp-video-upload-status,
.mp-video-gallery-empty {
	margin-top: 8px;
	font-size: 12px;
	opacity: 0.85;
}

.mp-video-upload-input {
	max-width: 100%;
}

.mp-video-preview,
.mp-video-gallery-item video {
	width: 100%;
	max-height: 260px;
	margin-top: 10px;
	background: #111;
}

.mp-video-workspace .mp-media-preview-large {
	margin-top: 12px;
}

.mp-video-upload [data-video-upload-trigger] {
	display: block;
}

.mp-video-workspace .mp-video-preview {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

.mp-video-workspace
	.mp-media-preview-large:not(.mp-media-preview--empty)
	.mp-media-empty {
	display: none;
}

.mp-video-upload-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

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

.mp-video-gallery-item {
	min-width: 0;
}

.mp-video-gallery-item .mp-video-delete {
	width: 100%;
	margin-top: 6px;
}

@media (max-width: 700px) {
	.mp-video-upload-actions {
		flex-direction: column;
	}

	.mp-video-gallery {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   22) Master Style Polish Overrides
   ========================================================= */

.marby-planner-shell input[type="checkbox"] {
	accent-color: var(--marby-color-marby-blue, #70aadd);
}

.marby-planner-shell input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 13px;
	height: 13px;
	margin: 0 6px 0 0;
	border: 1px solid var(--marby-color-border-strong, #c9c9c9);
	border-radius: 2px;
	background: #ffffff;
	vertical-align: -2px;
	cursor: pointer;
}

.marby-planner-shell input[type="checkbox"]:checked {
	border-color: var(--marby-color-marby-blue, #70aadd);
	background: var(--marby-color-marby-blue, #70aadd);
}

.marby-planner-shell input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 0;
	width: 4px;
	height: 8px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Superseded: Planner editable control text uses the shared muted text token.
.marby-planner-shell .mp-post-title-input,
.marby-planner-shell .mp-cta-input,
.marby-planner-shell .mp-input[data-field="hashtags"],
.marby-planner-shell .mp-media-scene-notes {
	color: var(--marby-color-marby-blue, #70aadd) !important;
}
*/

.marby-planner-shell .mp-post-title-input {
	margin-bottom: 20px;
}

.marby-planner-shell .mp-cta-input {
	margin-bottom: 20px;
}

.marby-planner-shell .mp-media-gallery,
.marby-planner-shell .mp-media-preview-large {
	background: #ffffff;
}

/* =========================================================
   23) Kim Planner Redesign — First Pass
   ========================================================= */

.pln-planner-page {
	color: var(--marby-color-black, #000000);
}

/* Superseded: master.css owns paragraph spacing. */

.pln-page-header {
	margin-bottom: 28px;
}

.pln-page-header .marby-eyebrow {
	margin-bottom: 18px;
}

/* Superseded: master.css owns page-header h1 and p typography. */

.pln-planner-layout {
	display: grid;
	grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.pln-planner-sidebar {
	position: sticky;
	top: 20px;
	display: grid;
	gap: 16px;
	min-width: 0;
}

.pln-sidebar-panel,
.pln-planner-page #pln-occasions-slot > #mp-section-occasions {
	min-width: 0;
	padding: 22px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	background: var(--marby-color-white, #ffffff);
	box-shadow: var(--marby-shadow-soft, 0 8px 20px rgba(0, 0, 0, 0.08));
}

/* Superseded: master.css owns Planner heading typography. */

.pln-quick-links {
	display: grid;
	gap: 5px;
}

.pln-quick-link {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 45px;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid var(--marby-color-marby-blue, #ab9f8f);
	border-radius: 0 !important;
	background: var(--marby-color-white, #ffffff);
	color: var(--marby-color-black, #000000) !important;
	font: inherit;
	font-size: 15px;
	font-weight: var(--marby-font-weight-regular, 400);
	line-height: 1.35;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
	transition:
		background var(--marby-transition-fast, 0.15s ease),
		color var(--marby-transition-fast, 0.15s ease);
}

.pln-quick-link + .pln-quick-link {
	border-top: 1px solid var(--marby-color-marby-blue, #ab9f8f);
}

.pln-quick-link:hover,
.pln-quick-link:focus-visible {
	background: var(--marby-color-marby-blue, #ab9f8f);
	color: var(--marby-color-white, #ffffff) !important;
}

.pln-quick-links button.pln-quick-link,
.pln-quick-links button.pln-quick-link:hover,
.pln-quick-links button.pln-quick-link:focus {
	appearance: none;
	border-radius: 0 !important;
}

.pln-planner-setup .mp-planner-header {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	margin: 0;
}

.pln-planner-setup .mp-field,
.pln-planner-setup select,
.pln-planner-setup .mp-month-control-row,
.pln-planner-setup .mp-language-field {
	width: 100%;
	min-width: 0;
}

/*
#mp-year-label,
#mp-month-label,
#mp-language-label {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	color: var(--marby-color-marby-blue , #ab9f8f);
	font-size: 11px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}
*/
/* Paragraph-based control descriptions retain their compact control spacing. */
.pln-planner-page [id$="-label"],
.pln-planner-page [data-media-select],
.pln-planner-page [data-social-publish],
.pln-planner-page [data-video-upload-trigger] {
	margin: 0;
	padding: 0;
}

.pln-planner-page [data-pln-day-card] {
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--marby-color-border);
}

.pln-planner-page [data-pln-day-card]:hover {
	background-color: var(--marby-color-marby-blue-light);
}

.pln-planner-page #pln-language-slot #mp-section-language {
	margin: 15px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.pln-planner-page #mp-section-language .mp-help {
	margin: -2px 0 8px;
	font-size: 13px;
	line-height: 1.45;
}

.pln-planner-page #mp-section-occasions .mp-occasion-section-header {
	margin: 0 0 14px;
}

/* Superseded: master.css owns occasion-description paragraph typography. */

.pln-planner-page #mp-occasions-list {
	max-width: none;
}

.pln-planner-page #mp-section-occasions .mp-occasions-columns {
	grid-template-columns: 1fr;
	gap: 14px;
}

.pln-planner-page
	#mp-section-occasions
	.mp-occasions-column:first-child::after {
	display: none;
}

/*
.pln-planner-page #mp-section-occasions .mp-occasions-column-title {
	margin: 0 0 9px;
	color: var(--marby-color-marby-blue , #ab9f8f);
	font-size: 11px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}
*/

.pln-planner-page #mp-section-occasions .mp-occasions-month {
	margin-bottom: 10px;
	padding: 12px;
	border-radius: 0;
}

.pln-planner-page #mp-section-occasions .mp-occasions-actions {
	display: grid;
	gap: 8px;
}

.pln-planner-page #mp-section-occasions .mp-occasions-actions .mp-btn {
	width: 100%;
}

.pln-planner-main {
	min-width: 0;
}

.pln-planner-page .pln-planner-main > #mp-tabs-wrap {
	margin: 0;
}

/* Superseded: master owns the tab control and the scoped Planner layout
 * below owns only its placement. */

/*
.pln-planner-page .mp-tab-panel {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}
*/

.pln-planner-page #mp-tab-campaign-promo > .marby-planner {
	width: 100%;
	padding: 0;
}

.pln-planner-page #mp-tab-campaign-promo > .marby-planner > hr,
.pln-planner-page #mp-divider {
	display: none;
}

.pln-planner-page .mp-card,
.pln-planner-page .mp-campaign-card,
.pln-planner-page .mp-review-controls,
.pln-planner-page .mp-day-section {
	border-radius: 0;
}

.mp-modal.pln-help-modal {
	max-width: 760px;
}

.pln-guide-content {
	font-size: 16px;
	line-height: 1.65;
}

/* Superseded: master.css owns guide paragraph typography. */

.pln-guide-content ol {
	margin: 0;
	padding-left: 22px;
}

.pln-guide-content li + li {
	margin-top: 9px;
}

@media (max-width: 1000px) {
	.pln-planner-layout {
		grid-template-columns: 1fr;
	}

	.pln-planner-sidebar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pln-planner-sidebar #pln-occasions-slot {
		grid-column: 1 / -1;
	}
}

@media (max-width: 700px) {
	/* Superseded: master.css owns responsive page-header h1 and p typography. */

	.pln-planner-sidebar {
		grid-template-columns: 1fr;
	}

	.pln-planner-sidebar #pln-occasions-slot {
		grid-column: auto;
	}

	.pln-planner-page .mp-tabs {
		flex-direction: column;
	}

	.pln-planner-page .mp-tab-btn {
		width: 100%;
	}
}

/* ==========================================================================
   27. Review Tabs and Plan Items
   ========================================================================== */

.pln-review-header {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 28px 30px;
	margin-bottom: 24px;
	border: 1px solid var(--marby-color-border, #ded9d1);
	background: var(--marby-color-off-white, #f7f5f2);
}

.pln-review-header__icon {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: var(--marby-color-white, #ffffff);
	background: var(--marby-color-marby-blue, #70aadd);
	font-size: 24px;
	line-height: 1;
}

/* Superseded: master.css owns review-header h2 and p typography. */

.pln-review-header__body {
	flex: 1 1 auto;
	min-width: 0;
}

.pln-planner-page .mp-review-controls {
	padding: 24px 30px;
	margin-bottom: 24px;
	border: 1px solid var(--marby-color-border, #ded9d1);
	background: var(--marby-color-white, #ffffff);
}

.pln-review-header .mp-review-controls {
	padding: 18px 0 0;
	margin: 0;
	border: 0;
	background: transparent;
}

#mp-week-review-label {
	display: block;
	margin-bottom: 8px;
	color: var(--marby-color-marby-blue, #b3a696);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mp-week-review-row {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 0;
	align-items: center;
}

.mp-week-review-row .mp-week {
	width: 100%;
	max-width: none;
}

/* Superseded: master.css owns week-context paragraph typography. */

[data-week-context-focus] strong {
	font-weight: 600;
}

.pln-planner-page .mp-subtabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pln-planner-page .mp-subtab,
.pln-planner-page .mp-subtab:hover,
.pln-planner-page .mp-subtab:focus,
.pln-planner-page .mp-subtab.is-active {
	border-radius: 0 !important;
}

.mp-day-marketing-description {
	display: none;
	max-width: none;
	margin: 0 0 24px;
	border: 1px solid var(--marby-color-border, #ded9d1);
	background: var(--marby-color-white, #ffffff);
}

.mp-day-marketing-description__header {
	padding: 22px 28px;
	border-bottom: 1px solid var(--marby-color-border, #ded9d1);
}

/* Superseded: master.css owns day-description h2 typography. */

.mp-day-marketing-description__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr;
}

.mp-day-marketing-description__card {
	min-width: 0;
	padding: 22px 20px;
	border-right: 1px solid var(--marby-color-border, #ded9d1);
}

.mp-day-marketing-description__card:nth-child(even) {
	background: var(--marby-color-off-white, #f7f5f2);
}

.mp-day-marketing-description__card:last-child {
	border-right: 0;
}

/* Superseded: master.css owns day-description card heading and paragraph typography. */

.pln-planner-page .mp-day-section {
	padding: 0;
	margin-bottom: 30px;
	border: 1px solid var(--marby-color-border, #ded9d1);
	background: var(--marby-color-white, #ffffff);
}

.pln-plan-item-header {
	padding: 24px 28px;
	border-bottom: 1px solid var(--marby-color-border, #ded9d1);
}

/* Superseded: master.css owns Plan Item header heading spacing. */

.pln-plan-item-header .mp-item-channel {
	margin: 0;
	color: var(--marby-color-marby-blue, #b3a696);
}

.pln-plan-item-layout {
	display: grid;
	grid-template-columns: minmax(0, calc(50% - 10px)) minmax(0, calc(50% + 10px));
	align-items: start;
}

.pln-plan-item-left,
.pln-plan-item-right {
	min-width: 0;
	padding: 28px;
}

.pln-plan-item-right {
	border-left: 1px solid var(--marby-color-border, #ded9d1);
	background: var(--marby-color-off-white, #f7f5f2);
}

.pln-plan-item-left .mp-section,
.pln-plan-item-right .mp-section {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.pln-plan-item-left .mp-field + .mp-field {
	margin-top: 18px;
}

.pln-plan-item-left .mp-post-actions,
.pln-plan-item-left .mp-section--social,
.pln-plan-item-left .mp-item-actions,
.pln-plan-item-lock-slot {
	margin-top: 24px;
}

.pln-plan-item-left .mp-post-actions-left {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pln-plan-item-left .mp-post-actions-label {
	flex-basis: 100%;
	width: 100%;
	color: var(--marby-color-marby-blue);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
}

.pln-plan-item-left .mp-social-panel,
.pln-plan-item-right .mp-media-panel {
	border-radius: 0;
	background: transparent;
}

.pln-plan-item-left .mp-section--content .mp-field > [id$="-label"] {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: var(--marby-color-marby-blue);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.pln-plan-item-left .mp-section--social > [id$="-label"],
.pln-plan-item-right .mp-section--media > [id$="-label"] {
	display: block;
	margin: 0 0 12px;
	color: var(--marby-color-black, #000000);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.pln-plan-item-right .mp-media-grid {
	grid-template-columns: 1fr;
	gap: 24px;
}

.pln-plan-item-right .mp-media-right {
	order: 1;
}

.pln-plan-item-right .mp-media-left {
	order: 2;
}

.pln-plan-item-right .mp-media-right {
	min-width: 0;
}

.pln-plan-item-right .mp-media-mode-tabs {
	margin-bottom: 18px;
}

.pln-plan-item-right .mp-media-mode-tab {
	border-radius: 0;
}

.pln-link-to-input:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.pln-plan-item-layout textarea,
.pln-plan-item-layout input[type="text"],
.pln-plan-item-layout input[type="url"] {
	width: 100%;
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.pln-plan-item-layout textarea {
	padding: 17px 18px;
	resize: none;
	overflow: hidden;
}

.pln-plan-item-layout textarea:hover,
.pln-plan-item-layout textarea:focus,
.pln-plan-item-layout input[type="text"]:hover,
.pln-plan-item-layout input[type="text"]:focus,
.pln-plan-item-layout input[type="url"]:not(:disabled):hover,
.pln-plan-item-layout input[type="url"]:not(:disabled):focus {
	border-color: var(--marby-color-marby-blue-light, #b9d8f2);
	outline: 0;
	box-shadow: none;
}

.pln-plan-item-layout textarea:focus {
	resize: vertical;
	overflow: auto;
}

.pln-plan-item-lock-slot .mp-locked-note {
	padding: 14px 16px;
	border-left: 4px solid var(--marby-color-marby-blue, #b3a696);
	background: var(--marby-color-off-white, #f7f5f2);
}

/* Superseded: master.css owns Plan Item locked-note heading typography. */

#mp-day-items .week-of-month {
	margin: 0;
	padding: 20px 28px 0;
}

.pln-plan-item-right .mp-media-panel {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.pln-plan-item-right .mp-media-gallery {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.pln-plan-item-right .mp-media-gallery-actions {
	margin: 0 0 14px;
	padding-top: 0;
}

.pln-plan-item-right .mp-media-generate-layout {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.pln-plan-item-right .mp-media-generate-tips {
	grid-column: auto;
}

.pln-plan-item-right .mp-media-generate-heading {
	margin: 14px 0 8px;
	color: var(--marby-color-marby-blue, #b3a696);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
}

.pln-plan-item-right .mp-media-count {
	display: none;
}

.pln-plan-item-right .mp-media-meta {
	min-height: 22px;
}

.pln-plan-item-right .mp-media-product-generate .mp-media-generate-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pln-plan-item-right
	.mp-media-product-generate
	.mp-media-generate-actions
	.mp-btn {
	min-width: 0;
	white-space: normal;
}

.pln-plan-item-right .mp-social-row {
	grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 0.9fr) 96px;
	gap: 8px;
	width: 100%;
	min-width: 0;
	border-radius: var(--marby-radius-md);
	background: transparent;
}

.pln-plan-item-right .mp-social-row.is-selected {
	background: var(--marby-color-marby-blue-light, #eaf4fc);
}

.pln-plan-item-right [data-social-publish] {
	display: flex;
	align-self: stretch;
	align-items: center;
	justify-content: flex-start;
}

.pln-plan-item-right .mp-social-name,
.pln-plan-item-right .mp-social-type,
.pln-plan-item-right .mp-social-time-wrap {
	min-width: 0;
}

.pln-plan-item-right .mp-social-time-wrap input[type="time"] {
	width: 100%;
	min-width: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	accent-color: var(--marby-color-marby-blue, #70aadd);
}

.pln-plan-item-right .mp-social-time-wrap input[type="time"]:focus {
	outline: 1px solid var(--marby-color-marby-blue-light, #b9d8f2);
}

.pln-plan-item-right
	.mp-social-time-wrap
	input[type="time"]::-webkit-datetime-edit-hour-field:focus,
.pln-plan-item-right
	.mp-social-time-wrap
	input[type="time"]::-webkit-datetime-edit-minute-field:focus,
.pln-plan-item-right
	.mp-social-time-wrap
	input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
	border-radius: 0;
	background: var(--marby-color-marby-blue, #70aadd);
	color: var(--marby-color-white, #ffffff);
}

@media (max-width: 1000px) {
	.pln-plan-item-layout {
		grid-template-columns: 1fr;
	}

	.pln-plan-item-right {
		border-top: 1px solid var(--marby-color-border, #ded9d1);
		border-left: 0;
	}
}

@media (max-width: 700px) {
	.pln-review-header,
	.pln-plan-item-header,
	.pln-plan-item-left,
	.pln-plan-item-right,
	.pln-planner-page .mp-review-controls {
		padding: 20px;
	}

	.mp-week-review-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Superseded: master.css owns responsive week-context paragraph typography. */

	.pln-planner-page .mp-subtabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pln-planner-page .mp-subtab {
		width: 100%;
	}

	.mp-day-marketing-description__grid {
		grid-template-columns: 1fr;
	}

	.mp-day-marketing-description__card {
		border-right: 0;
		border-bottom: 1px solid var(--marby-color-border, #ded9d1);
	}

	.mp-day-marketing-description__card:last-child {
		border-bottom: 0;
	}

	.pln-plan-item-right .mp-social-row {
		grid-template-columns: 32px minmax(0, 1fr);
	}

	.pln-plan-item-right .mp-social-type,
	.pln-plan-item-right .mp-social-time-wrap {
		grid-column: 2;
	}
}

/* ==========================================================================
   24. Campaign Promotion and Posting Days
   ========================================================================== */

.pln-campaign-workspace,
.pln-campaign-response {
	display: grid;
	gap: 24px;
}

.pln-campaign-builder {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
	padding: 28px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	background: var(--marby-color-light-tan, #f7f4ef);
}

.pln-campaign-builder-copy {
	flex: 1 1 auto;
	min-width: 0;
}

/* Superseded: master.css owns campaign/report/generation heading and paragraph typography. */

.pln-campaign-input-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
}

.pln-campaign-input-row .mp-input {
	width: 100%;
	min-width: 0;
}

.pln-campaign-message-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.pln-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 30px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--marby-color-blue-soft, #edf6fd);
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 11px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.pln-report-card {
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	background: var(--marby-color-white, #ffffff);
}

.pln-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	border-bottom: 1px solid var(--marby-color-border-light, #e5e7eb);
}

.pln-card-body {
	padding: 24px 26px;
}

.pln-response-field {
	min-width: 0;
}

.pln-response-field + .pln-response-field,
.pln-campaign-notes {
	margin-top: 20px;
}

/*
.pln-response-field > [id$="-label"],
.pln-week-content > [id$="-description-label"] {
	display: block;
	margin: 0 0 9px;
	padding: 0;
	color: var(--marby-color-marby-blue , #ab9f8f);
	font-size: var(--marby-public-h4-size);
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.09em;
	line-height: 1.3;
	text-transform: uppercase;
}
*/

.pln-response-field textarea,
.pln-week-card textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 17px 18px;
	resize: none;
	overflow: hidden;
	border-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 16px;
	line-height: 1.55;
}

.pln-response-field textarea:hover,
.pln-week-card textarea:hover,
.pln-response-field textarea:focus,
.pln-week-card textarea:focus {
	border-color: var(--marby-color-marby-blue-hover, #95badb) !important;
	background: transparent !important;
	box-shadow: 0 0 0 1px var(--marby-color-marby-blue-hover, #95badb) !important;
	outline: 0;
}

.pln-response-field textarea:focus,
.pln-week-card textarea:focus {
	resize: vertical;
	overflow: auto;
}

/* Superseded: the generated campaign title uses master .marby-textarea-extra-small. */

.pln-campaign-meta-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.pln-campaign-meta-grid .pln-response-field {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	background: var(--marby-color-off-white, #fbfaf8);
}

.pln-campaign-weeks {
	display: grid;
	gap: 14px;
}

.pln-week-card {
	display: grid;
	grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	background: var(--marby-color-white, #ffffff);
}

.pln-week-card:nth-child(even) {
	background: var(--marby-color-light-tan, #f7f4ef);
}

.pln-week-sidebar,
.pln-week-content {
	min-width: 0;
	padding: 20px;
}

.pln-week-sidebar {
	border-right: 1px solid var(--marby-color-border-light, #e5e7eb);
}

.pln-week-number {
	display: block;
	margin: 0 0 8px;
	color: var(--marby-color-marby-blue, #ab9f8f);
	font-size: 12px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.pln-week-phase {
	margin: 0;
	color: var(--marby-color-black, #000000);
	font-size: 22px;
	font-weight: var(--marby-font-weight-semibold, 600);
	line-height: 1.25;
}

.pln-week-focus {
	margin: 0 0 10px;
	color: var(--marby-color-black, #000000);
	font-size: 16px;
	font-weight: var(--marby-font-weight-semibold, 600);
	line-height: 1.45;
}

.pln-week-dates {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 10px;
	color: var(--marby-color-text-muted, #6b7280);
	font-size: 13px;
}

.pln-campaign-save-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	padding: 0 26px 24px;
}

.pln-campaign-save-message {
	text-align: right;
}

.pln-posting-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
	align-items: start;
	gap: 22px;
	margin-top: 24px;
}

.pln-posting-layout .mp-channel {
	border: 0;
	background: transparent;
}

.pln-posting-layout .mp-channel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.pln-posting-layout .mp-channel-head > strong {
	font-size: 20px;
	font-weight: var(--marby-font-weight-semibold, 600);
}

.pln-day-actions {
	display: flex;
	gap: 14px;
}

.pln-day-actions .mp-link {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 14px;
	cursor: pointer;
}

.pln-posting-layout .mp-days {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.pln-day-card {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 78px;
	margin: 0;
	padding: 15px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white, #ffffff);
	cursor: pointer;
	transition:
		border-color var(--marby-transition-fast, 0.15s ease),
		background var(--marby-transition-fast, 0.15s ease);
}

.pln-day-card:hover,
.pln-day-card:has(input:checked) {
	border-color: var(--marby-color-marby-blue, #70aadd);
	background: var(--marby-color-blue-soft, #edf6fd);
}

.pln-day-card input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--marby-color-marby-blue, #70aadd);
}

.pln-day-card-copy {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.pln-day-card-copy strong {
	font-size: 16px;
	font-weight: var(--marby-font-weight-semibold, 600);
}

.pln-day-card-copy small {
	color: var(--marby-color-text-muted, #6b7280);
	font-size: 13px;
	line-height: 1.35;
}

.pln-generation-card {
	display: grid;
	gap: 18px;
	padding: 24px;
	border-left: 3px solid var(--marby-color-marby-blue, #70aadd);
	background: var(--marby-color-blue-soft, #edf6fd);
}

/* Superseded: master.css owns post-generation paragraph typography. */

.pln-overwrite-option {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px;
	border: 1px solid rgba(112, 170, 221, 0.4);
	background: var(--marby-color-white, #ffffff);
	cursor: pointer;
}

.pln-overwrite-option input {
	margin-top: 3px;
	accent-color: var(--marby-color-marby-blue, #70aadd);
}

.pln-overwrite-option > div {
	display: grid;
	gap: 2px;
}

.pln-overwrite-option p {
	margin: 0;
	padding: 0;
}

.pln-overwrite-option-description {
	color: var(--marby-color-text-muted, #6b7280);
	line-height: 1.4;
}

.pln-generation-card > .mp-btn {
	width: 100%;
}

@media (max-width: 1100px) {
	.pln-campaign-meta-grid,
	.pln-posting-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.pln-campaign-builder,
	.pln-card-head,
	.pln-campaign-save-row {
		align-items: stretch;
		flex-direction: column;
	}

	.pln-campaign-input-row,
	.pln-week-card,
	.pln-posting-layout .mp-days {
		grid-template-columns: 1fr;
	}

	.pln-week-sidebar {
		border-right: 0;
		border-bottom: 1px solid var(--marby-color-border-light, #e5e7eb);
	}

	.pln-campaign-save-message {
		text-align: left;
	}
}

/* ===========================================================================
   25. Monthly Planner redesign
   Kim's approved layout, applied to the existing Planner IDs and JS hooks.
   Shared typography, colours, controls, and page primitives remain owned by
   marby-master.css; these rules only compose the Planner-specific layout.
   =========================================================================== */

#marby-planner-shell.marby-page-shell {
	width: 80vw;
	max-width: none;
	margin: 0;
	padding: 0 0 64px;
}

/*
#marby-planner-shell .pln-stage-content {
	width: 80vw;
	max-width: none;
	margin: 0 auto;
}
*/

#marby-planner-shell .pln-page-header {
	margin: 0 0 0;
	padding: 66px 0 58px;
	background: linear-gradient(
		180deg,
		var(--marby-color-white) 0%,
		var(--marby-color-white) 70%,
		var(--marby-color-soft-tan) 100%
	);
	overflow: hidden;
}

#marby-planner-shell .pln-page-header::after {
	position: absolute;
	top: -170px;
	right: -165px;
	width: 390px;
	height: 390px;
	border: 1px solid
		color-mix(in srgb, var(--marby-color-marby-blue) 25%, transparent);
	border-radius: var(--marby-radius-pill);
	box-shadow: 0 0 0 42px
		color-mix(in srgb, var(--marby-color-marby-blue) 4%, transparent);
	content: "";
}

#marby-planner-shell .pln-page-header-inner {
	position: relative;
	z-index: 1;
}

/* Superseded: master.css owns page-header and legacy strategy h/p styling. */

#marby-planner-shell .pln-strategy-intro {
	padding: 72px 0;
	background: var(--marby-color-black);
	color: var(--marby-color-white);
	overflow: hidden;
}

#marby-planner-shell .pln-strategy-intro::before {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		color-mix(in srgb, var(--marby-color-white) 16%, transparent) 0.8px,
		transparent 0.8px
	);
	background-size: 28px 28px;
	content: "";
	opacity: 0.18;
}

#marby-planner-shell .pln-strategy-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
	gap: 58px;
	align-items: center;
}

/* Superseded: the removed strategy section has no Planner-owned h/p styling. */

#marby-planner-shell .pln-strategy-purpose {
	display: grid;
	gap: 14px;
	padding: 34px;
	border: 1px solid
		color-mix(in srgb, var(--marby-color-white) 14%, transparent);
	border-radius: var(--marby-radius-xl);
	background: color-mix(in srgb, var(--marby-color-white) 6%, transparent);
}

#marby-planner-shell .pln-strategy-purpose-icon,
#marby-planner-shell .pln-setup-icon {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-black);
	color: var(--marby-color-white);
	font-size: 20px;
}

#marby-planner-shell .pln-strategy-purpose-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--marby-radius-pill);
	background: var(--marby-color-marby-blue);
}

#marby-planner-shell .pln-strategy-purpose .marby-eyebrow {
	margin: 12px 0 0;
}

#marby-planner-shell .pln-strategy-purpose strong {
	font-size: var(--marby-public-h3-size);
	font-weight: var(--marby-font-weight-bold);
	line-height: var(--marby-public-h3-line-height);
}

#marby-planner-shell .pln-planner-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	padding-top: 76px;
}

#marby-planner-shell .pln-planner-sidebar {
	position: static;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

#marby-planner-shell .pln-quick-links {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* Superseded: master.css owns quick-link heading typography. */

#marby-planner-shell .pln-quick-link {
	width: auto;
	min-height: 0;
	padding: 8px 12px;
	border-color: var(--marby-color-marby-blue);
	border-radius: var(--marby-radius-pill) !important;
	color: var(--marby-color-black) !important;
	font-size: 12px;
	font-weight: var(--marby-font-weight-bold);
	white-space: nowrap;
}

#marby-planner-shell .pln-quick-link + .pln-quick-link {
	border-top: 1px solid var(--marby-color-marby-blue);
}

#marby-planner-shell .pln-quick-link:hover,
#marby-planner-shell .pln-quick-link:focus-visible {
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white) !important;
}

#marby-planner-shell .pln-sidebar-panel,
#marby-planner-shell #pln-occasions-slot > #mp-section-occasions {
	padding: 30px;
	border-radius: var(--marby-radius-xl);
	box-shadow: var(--marby-shadow-soft);
}

#marby-planner-shell .pln-planner-setup {
	background: var(--marby-color-white);
}

#marby-planner-shell #pln-occasions-slot > #mp-section-occasions {
	background: var(--marby-color-soft-blue);
}

#marby-planner-shell .pln-setup-icon {
	margin-bottom: 18px;
}

#marby-planner-shell .pln-planner-main > #mp-tabs-wrap {
	margin: 0;
}

/* Superseded by the contained master-tab layout below. */

#marby-planner-shell .pln-campaign-workspace {
	gap: 38px;
}

/* Superseded by the contained Campaign Promotion workspace below.
 * The original full-width black builder conflicted with the approved panel design. */
/*
#marby-planner-shell .pln-campaign-builder {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	padding: 78px 10vw;
	border: 0;
	background: var(--marby-color-black);
	color: var(--marby-color-white);
}

#marby-planner-shell .pln-campaign-builder h2,
#marby-planner-shell .pln-campaign-builder p {
	color: var(--marby-color-white);
}

#marby-planner-shell .pln-campaign-builder h2 {
	font-family: var(--marby-font-heading);
	font-size: var(--marby-public-h2-size);
	font-weight: var(--marby-font-weight-light);
	line-height: var(--marby-public-h2-line-height);
}

#marby-planner-shell .pln-campaign-builder-copy {
	max-width: 980px;
}

#marby-planner-shell .pln-campaign-builder .mp-input {
	border-color: color-mix(in srgb, var(--marby-color-white) 20%, transparent);
	background: var(--marby-color-white);
}
*/

#marby-planner-shell .pln-report-card {
	border-radius: var(--marby-radius-xl);
	box-shadow: var(--marby-shadow-soft);
	overflow: hidden;
}

#marby-planner-shell .pln-card-head {
	padding: 30px;
}

/* Superseded: master.css owns card-heading h2 typography. */

#marby-planner-shell .pln-card-body {
	padding: 30px;
}

#marby-planner-shell .pln-campaign-meta-grid .pln-response-field {
	border-radius: var(--marby-radius-lg);
}

/* Superseded by the contained Save Campaign panel below. */
/*
#marby-planner-shell .pln-campaign-save-row {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-top: 38px;
	padding: 64px 10vw;
	background: var(--marby-color-marby-blue );
	color: var(--marby-color-white);
	transform: translateX(-50%);
}
*/

@media (max-width: 960px) {
	#marby-planner-shell.marby-page-shell,
	#marby-planner-shell .pln-stage-content {
		width: calc(100vw - (2 * var(--marby-page-gutter)));
	}

	#marby-planner-shell .pln-strategy-grid,
	#marby-planner-shell .pln-planner-sidebar {
		grid-template-columns: 1fr;
	}

	#marby-planner-shell .pln-campaign-builder {
		padding-right: var(--marby-page-gutter);
		padding-left: var(--marby-page-gutter);
	}

	#marby-planner-shell .mp-tabs-wrap,
	#marby-planner-shell .pln-campaign-save-row {
		padding-right: var(--marby-page-gutter);
		padding-left: var(--marby-page-gutter);
	}
}

@media (max-width: 700px) {
	#marby-planner-shell .pln-page-header,
	#marby-planner-shell .pln-strategy-intro {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	#marby-planner-shell .pln-campaign-builder,
	#marby-planner-shell .pln-campaign-save-row {
		padding-top: 54px;
		padding-bottom: 54px;
	}

	#marby-planner-shell .pln-campaign-save-row {
		display: grid;
		gap: 24px;
	}

	#marby-planner-shell .pln-campaign-save-row > .mp-btn {
		width: 100%;
	}
}

/* Planner campaign refinement: retain master components and adjust only the
   page composition requested for the Campaign Promotion workspace. */
#marby-planner-shell .pln-intro-nav {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-top: 44px;
	background: var(--marby-color-black);
	transform: translateX(-50%);
}
#marby-planner-shell .pln-intro-nav > div {
	display: flex;
	justify-content: center;
	gap: 8px;
	overflow-x: auto;
	padding: 20px 10vw;
}
#marby-planner-shell .pln-intro-nav .pln-quick-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--marby-color-marby-blue);
	border-radius: var(--marby-radius-pill) !important;
	background: transparent;
	color: var(--marby-color-white) !important;
	font-family: var(--marby-font-body);
	font-size: 12px;
	font-weight: var(--marby-font-weight-bold);
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
}
#marby-planner-shell .pln-intro-nav .pln-quick-link:hover,
#marby-planner-shell .pln-intro-nav .pln-quick-link:focus-visible {
	border-color: var(--marby-color-marby-blue);
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white) !important;
}

/* Superseded by the consolidated Setup and Occasions composition below.
 * The former flex heading allowed its content column to exceed the card width. */
/*
#marby-planner-shell .pln-panel-heading {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 22px;
}
#marby-planner-shell .pln-panel-heading .pln-setup-icon {
	flex: 0 0 42px;
	margin: 0;
}
#marby-planner-shell .pln-panel-heading h2,
#marby-planner-shell .pln-panel-heading h3 {
	margin: 0;
}
#marby-planner-shell .pln-panel-heading p {
	margin: 5px 0 0;
}
*/
#marby-planner-shell .pln-occasion-icon {
	font-size: 19px;
}

/* Superseded by the consolidated Setup grid below. */
/*
#marby-planner-shell .pln-planner-setup {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
#marby-planner-shell .pln-planner-setup .pln-panel-heading {
	grid-column: 1 / -1;
	margin-bottom: 0;
}
#marby-planner-shell .pln-planner-setup .mp-planner-header {
	display: contents;
}
*/
#marby-planner-shell .pln-planner-setup #pln-language-slot,
#marby-planner-shell
	.pln-planner-setup
	#pln-language-slot
	#mp-section-language {
	width: 100%;
	margin: 0;
}
#marby-planner-shell
	.pln-planner-setup
	#pln-language-slot
	#mp-section-language {
	display: block;
}

#marby-planner-shell
	#pln-occasions-slot
	> #mp-section-occasions
	.mp-occasions-columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
#marby-planner-shell
	#pln-occasions-slot
	> #mp-section-occasions
	.mp-occasions-column:first-child::after {
	display: block;
}
#marby-planner-shell
	#pln-occasions-slot
	> #mp-section-occasions
	.mp-occasions-actions {
	display: flex;
	align-items: center;
}
#marby-planner-shell
	#pln-occasions-slot
	> #mp-section-occasions
	.mp-occasions-actions
	.mp-btn {
	width: auto;
	padding-right: 14px;
	padding-left: 14px;
}

/* Master .mp-tab-btn handles the tab control treatment. */
#marby-planner-shell .mp-tabs-wrap {
	position: static;
	width: auto;
	margin: 0 0 38px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
}
#marby-planner-shell .mp-tabs {
	justify-content: flex-start;
}

/* The campaign generation input is a contained workspace panel. */
#marby-planner-shell .pln-campaign-builder {
	position: static;
	width: auto;
	margin: 0;
	padding: 38px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
	box-shadow: var(--marby-shadow-soft);
	color: var(--marby-color-black);
}
/* Superseded: master.css owns campaign-builder h2 and p styling. */
#marby-planner-shell .pln-campaign-input-row {
	align-items: stretch;
}
#marby-planner-shell .pln-campaign-input-row .mp-input,
#marby-planner-shell .pln-campaign-input-row .mp-btn {
	min-height: 54px;
}
#marby-planner-shell .pln-campaign-input-row .mp-btn {
	padding-top: 14px;
	padding-bottom: 14px;
}

#marby-planner-shell .pln-card-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: start;
}
#marby-planner-shell .pln-card-head .marby-eyebrow {
	margin: 0 0 8px;
}
/* Superseded: master.css owns card-heading h2 spacing. */
#marby-planner-shell .pln-section-number {
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-pill);
	box-shadow: var(--marby-shadow-soft);
	color: var(--marby-color-brown);
	font-size: 24px;
	font-weight: var(--marby-font-weight-bold);
}
#marby-planner-shell .pln-report-card:has(#mp-campaign-weeks),
#marby-planner-shell .pln-report-card:has(#mp-campaign-weeks) .pln-card-head {
	background: var(--marby-color-light-tan);
}
/* Superseded: master.css owns Posting Days instruction paragraph styling. */
#marby-planner-shell .pln-day-post-theme {
	margin-top: 3px;
	color: var(--marby-color-brown);
	font-weight: var(--marby-font-weight-medium);
}

/* The save action is a self-contained form-style panel. */
#marby-planner-shell .pln-campaign-save-row {
	display: flex;
	position: static;
	left: auto;
	width: auto;
	margin-top: 30px;
	padding: 34px;
	border: 1px solid var(--marby-color-marby-blue);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-marby-blue);
	text-align: left;
	transform: none;
}
#marby-planner-shell .pln-campaign-save-copy {
	max-width: 820px;
}
#marby-planner-shell .pln-campaign-save-copy .marby-eyebrow {
	margin: 0 0 12px;
}
/* Superseded: the Step-flow Save button uses the shared master .mp-btn-primary
   treatment without a Planner-specific colour override. */
/*
#marby-planner-shell .pln-campaign-save-row > .mp-btn {
	min-width: 210px;
	border-color: var(--marby-color-marby-blue) !important;
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	color: var(--marby-color-marby-blue) !important;
}
#marby-planner-shell .pln-campaign-save-row > .mp-btn:hover,
#marby-planner-shell .pln-campaign-save-row > .mp-btn:focus {
	border-color: var(--marby-color-white) !important;
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
}
*/

@media (max-width: 960px) {
	#marby-planner-shell .pln-intro-nav > div {
		padding-right: var(--marby-page-gutter);
		padding-left: var(--marby-page-gutter);
	}
	/* Superseded by the consolidated Setup breakpoint below. */
	#marby-planner-shell .pln-planner-setup .pln-panel-heading {
		grid-column: auto;
	}
}
@media (max-width: 700px) {
	#marby-planner-shell
		#pln-occasions-slot
		> #mp-section-occasions
		.mp-occasions-columns {
		grid-template-columns: 1fr;
	}
	#marby-planner-shell
		#pln-occasions-slot
		> #mp-section-occasions
		.mp-occasions-column:first-child::after {
		display: none;
	}
	#marby-planner-shell .pln-card-head {
		grid-template-columns: auto minmax(0, 1fr);
	}
	#marby-planner-shell .pln-card-head .pln-pill {
		grid-column: 2;
		justify-self: start;
	}
}

/* Campaign Promotion content refinement. */
/* Superseded by the consolidated Setup grid below. */
/*
#marby-planner-shell .pln-planner-setup {
	grid-template-columns: minmax(140px, 0.65fr) minmax(190px, 1fr) minmax(
			240px,
			1.35fr
		);
}
#marby-planner-shell .pln-planner-setup .mp-field:first-child {
	max-width: 180px;
}
#marby-planner-shell .pln-planner-setup select {
	min-height: 44px;
	padding: 8px 12px;
}
#marby-planner-shell .pln-planner-setup #mp-section-language .mp-help {
	margin: 7px 0 0;
}
*/

/* Generated campaign: shared intro, then individual editable panels. */
#marby-planner-shell .pln-generated-campaign {
	border: 0;
	border-radius: 0;
	background: var(--marby-color-white);
	box-shadow: none;
	overflow: visible;
}
#marby-planner-shell .pln-generated-campaign .pln-card-head {
	padding: 24px 0 30px;
	border: 0;
}
#marby-planner-shell .pln-generated-campaign .pln-card-body {
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
	box-shadow: var(--marby-shadow-soft);
}
/* Superseded: master .marby-textarea-extra-small owns the title field's size and interaction. */
#marby-planner-shell
	.pln-generated-campaign
	.pln-response-field--title
	#mp-campaign-title-label,
#marby-planner-shell
	.pln-generated-campaign
	.pln-response-field
	> #mp-campaign-summary-label {
	/* Paragraphs serve as visible headings in the Marketing Plan response. */
	display: flex;
}
#marby-planner-shell .pln-generated-campaign .pln-response-field > textarea {
	padding: 10px;
}
#marby-planner-shell .pln-generated-campaign .pln-campaign-meta-grid {
	margin-top: 28px;
}
#marby-planner-shell
	.pln-generated-campaign
	.pln-campaign-meta-grid
	.pln-response-field,
#marby-planner-shell .pln-generated-campaign .pln-campaign-notes {
	padding: 22px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}
#marby-planner-shell .pln-generated-campaign .pln-campaign-notes {
	margin-top: 18px;
	background: var(--marby-color-soft-blue);
}
#marby-planner-shell
	.pln-generated-campaign
	.pln-response-field
	> [id$="-label"] {
	display: flex;
	gap: 9px;
	align-items: center;
}
#marby-planner-shell .pln-response-icon {
	display: inline-grid;
	width: 26px;
	height: 26px;
	place-items: center;
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-black);
	color: var(--marby-color-white);
	font-size: 13px;
	line-height: 1;
}

/* Weekly Breakdown is an intro followed by separate week panels. */
#marby-planner-shell .pln-report-card:has(#mp-campaign-weeks) {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}
#marby-planner-shell .pln-report-card:has(#mp-campaign-weeks) .pln-card-head {
	padding: 24px 0 30px;
	border: 0;
	background: transparent;
}

#marby-planner-shell #mp-campaign-weeks {
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
	box-shadow: var(--marby-shadow-soft);
}
/* Breakdown panel padding is owned by the single content-panel rule above. */
#marby-planner-shell .pln-week-card {
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-lg);
	overflow: hidden;
}
#marby-planner-shell .pln-week-card:nth-child(odd) .pln-week-sidebar {
	background: var(--marby-color-soft-blue);
}
#marby-planner-shell .pln-week-card:nth-child(even) .pln-week-content {
	background: var(--marby-color-white);
}
#marby-planner-shell .pln-week-phase-heading {
	display: flex;
	gap: 9px;
	align-items: center;
}
#marby-planner-shell .pln-week-icon {
	display: inline-grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-black);
	color: var(--marby-color-white);
	font-size: 15px;
}

/* Save remains a separate left-aligned panel. */
#marby-planner-shell .pln-campaign-save-row {
	justify-content: space-between;
	align-items: center;
	text-align: left;
}
#marby-planner-shell .pln-campaign-save-copy,
#marby-planner-shell .pln-campaign-save-message {
	text-align: left;
}

/* Posting days shares the same unoutlined introduction pattern. */
#marby-planner-shell .pln-posting-days {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}
#marby-planner-shell .pln-posting-days .pln-card-head {
	padding: 24px 0 30px;
	border: 0;
}
#marby-planner-shell .pln-posting-days .pln-card-body {
	padding: 0;
}
#marby-planner-shell .pln-posting-days .mp-channel {
	padding: 26px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}
/* Superseded: master.css owns Posting Days and generation h3 typography. */
#marby-planner-shell .pln-day-post-theme::before {
	content: "";
}
#marby-planner-shell .pln-day-post-theme {
	color: var(--marby-color-brown);
}

#marby-planner-shell .pln-generation-card {
	align-self: start;
	padding: 28px;
	border: 1px solid var(--marby-color-marby-blue);
	border-left: 3px solid var(--marby-color-marby-blue);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-soft-blue);
}
#marby-planner-shell .pln-generation-progress-title {
	margin: 8px 0 0;
	font-family: var(--marby-font-heading);
	font-size: var(--marby-public-h3-size);
	font-weight: var(--marby-font-weight-bold);
	line-height: var(--marby-public-h3-line-height);
}
#marby-planner-shell .pln-generation-progress-note {
	margin-top: 12px;
	color: var(--marby-color-muted);
	font-size: var(--marby-public-p-small-size);
	line-height: var(--marby-public-p-small-line-height);
}

/* Let the Posting Days introduction span both columns so generation begins
   alongside the Social Media panel, rather than alongside the introduction. */
#marby-planner-shell .pln-posting-layout {
	grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
}
#marby-planner-shell .pln-posting-days {
	display: contents;
}
#marby-planner-shell .pln-posting-days .pln-card-head {
	grid-column: 1 / -1;
}
#marby-planner-shell .pln-posting-days .pln-card-body {
	grid-column: 1;
}
#marby-planner-shell .pln-generation-card {
	grid-column: 2;
}

@media (max-width: 960px) {
	#marby-planner-shell .pln-planner-setup .mp-field:first-child {
		max-width: none;
	}
	#marby-planner-shell .pln-posting-layout {
		grid-template-columns: 1fr;
	}
	#marby-planner-shell .pln-posting-days .pln-card-head,
	#marby-planner-shell .pln-posting-days .pln-card-body,
	#marby-planner-shell .pln-generation-card {
		grid-column: 1;
	}
}

/* Final Planner control and master-type alignment.
 * Superseded by the consolidated Setup controls below. */
/*
#marby-planner-shell .pln-planner-setup #mp-year,
#marby-planner-shell .pln-planner-setup #mp-month,
#marby-planner-shell .pln-planner-setup #mp-language {
	box-sizing: border-box;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px;
	padding: 8px 12px;
}
*/

#marby-planner-shell .pln-campaign-builder-copy {
	max-width: none;
	width: 100%;
}

/* Superseded: master .marby-textarea-extra-small owns the title field's size and interaction. */

/* Superseded: master.css owns weekly-phase h3 typography. */

/* Superseded by the consolidated Setup and Occasions composition below. */
/*
[The former stacked Setup control, heading, and containment rules are retained
for review in the archive copy.]
*/

/* Planner Setup and Occasions: one authoritative composition layer.
 * Master owns type, control, surface, radius, colour, and focus foundations. */
#marby-planner-shell .pln-planner-sidebar {
	align-items: start;
}

#marby-planner-shell .pln-planner-setup {
	display: grid;
	grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr) minmax(0, 1.35fr);
	grid-template-rows: auto min-content;
	grid-auto-rows: min-content;
	gap: 18px;
	align-content: start;
	align-items: start;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

#marby-planner-shell .pln-panel-heading {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

#marby-planner-shell .pln-panel-heading .pln-setup-icon {
	margin: 0;
}

#marby-planner-shell .pln-panel-heading > div:last-child {
	min-width: 0;
}

/* Superseded: master.css owns Setup and Occasions heading/paragraph typography. */

#marby-planner-shell .pln-planner-setup .pln-panel-heading {
	grid-column: 1 / -1;
}

#marby-planner-shell .pln-planner-setup .mp-planner-header {
	display: contents;
}

#marby-planner-shell .pln-planner-setup .mp-field,
#marby-planner-shell .pln-planner-setup #pln-language-slot,
#marby-planner-shell .pln-planner-setup #mp-section-language,
#marby-planner-shell .pln-planner-setup #mp-section-language .mp-field {
	align-self: start;
	min-width: 0;
	margin: 0;
}

#marby-planner-shell .pln-planner-setup #mp-section-language {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

#marby-planner-shell .pln-planner-setup #mp-year,
#marby-planner-shell .pln-planner-setup #mp-month,
#marby-planner-shell .pln-planner-setup #mp-language {
	box-sizing: border-box;
	min-height: 44px;
	max-height: 44px;
	padding: 8px 12px;
}

@media (max-width: 960px) {
	#marby-planner-shell .pln-planner-setup {
		grid-template-columns: 1fr;
	}
}

/* Review tabs: master type scale with Planner-specific panel composition. */
#marby-planner-shell .pln-review-header {
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	box-shadow: var(--marby-shadow-soft);
}

/* Superseded: master.css owns Weekly and Day Review h2 typography. */

#marby-planner-shell .mp-week-context {
	margin-top: 18px;
}

#marby-planner-shell .mp-week-context__panel {
	display: grid;
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}

#marby-planner-shell .mp-week-context__purpose {
	margin: 0;
}

#marby-planner-shell [data-week-context-focus] {
	display: grid;
	gap: 5px;
	margin: 0;
	padding: 0;
}

#marby-planner-shell [data-week-context-focus] strong {
	font-weight: var(--marby-font-weight-bold);
}

#marby-planner-shell.pln-planner-page .mp-subtabs {
	gap: 8px;
}

#marby-planner-shell.pln-planner-page .mp-subtabs .mp-subtab {
	border-radius: var(--marby-radius-md) !important;
}

#marby-planner-shell.pln-planner-page
	.mp-subtabs
	.mp-subtab:not(.is-active):not(:hover):not(:focus) {
	background: var(--marby-color-soft-blue) !important;
}

#marby-planner-shell .mp-day-marketing-description {
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	box-shadow: var(--marby-shadow-soft);
	overflow: hidden;
}

#marby-planner-shell .mp-day-marketing-description__header {
	padding: 26px 28px;
	background: var(--marby-color-white);
}

#marby-planner-shell .mp-day-marketing-description__header .marby-eyebrow {
	margin: 0 0 8px;
}

/* Superseded: master.css owns day marketing-description h2 typography. */

#marby-planner-shell .mp-day-marketing-description__grid {
	gap: 16px;
	padding: 20px 28px 28px;
	background: var(--marby-color-white);
}

#marby-planner-shell .mp-day-marketing-description__card,
#marby-planner-shell .mp-day-marketing-description__card:last-child {
	padding: 20px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-lg);
	background: var(--marby-color-white);
}

#marby-planner-shell .mp-day-marketing-description__card:nth-child(even) {
	background: var(--marby-color-soft-blue);
}

/* Review control spacing and simplified Plan Item panels. */
#marby-planner-shell .mp-week-review-row {
	gap: 20px;
}

#marby-planner-shell.pln-planner-page .mp-subtabs {
	justify-content: center;
}

#marby-planner-shell.pln-planner-page .mp-subtabs .mp-subtab {
	min-height: 50px;
	padding: 14px 20px;
}

#marby-planner-shell .mp-item-card {
	counter-increment: pln-plan-item;
	display: grid;
	gap: 30px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#marby-planner-shell .mp-day-section {
	counter-reset: pln-plan-item;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#marby-planner-shell .pln-plan-item-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: start;
	padding: 0;
	border: 0;
	background: transparent;
}

#marby-planner-shell .pln-plan-item-intro-copy {
	display: grid;
	gap: 8px;
	min-width: 0;
}

#marby-planner-shell .pln-plan-item-header .mp-item-channel {
	margin: 0;
}

#marby-planner-shell .pln-plan-item-panel {
	padding: 28px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-plan-item-right .pln-plan-item-panel {
	background: var(--marby-color-soft-blue);
}

/* Superseded: master.css owns Plan Item panel-heading typography. */

#marby-planner-shell .pln-plan-item-panel-head {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 0 0 24px;
}

#marby-planner-shell .pln-plan-item-panel-head .marby-eyebrow {
	margin: 0 0 6px;
}

#marby-planner-shell .pln-plan-item-panel-icon {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-black);
	color: var(--marby-color-white);
}

#marby-planner-shell .pln-plan-item-layout {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	contain: inline-size;
	gap: 20px;
	padding: 0;
	border: 0;
	background: transparent;
}

#marby-planner-shell .mp-day-section {
	container-type: inline-size;
}

#marby-planner-shell .pln-plan-item-left,
#marby-planner-shell .pln-plan-item-right {
	display: grid;
	gap: 24px;
	padding: 0;
	border: 0;
	background: transparent;
}

#marby-planner-shell .pln-plan-item-panel .mp-social-panel {
	padding: 20px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-plan-item-panel .mp-social-row {
	border-radius: var(--marby-radius-md);
}

#marby-planner-shell .pln-cta-hashtags-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 16px;
	margin: 20px 0 0;
}

#marby-planner-shell .pln-cta-hashtags-grid > .mp-field {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-width: 0;
	margin: 0;
}

#marby-planner-shell .pln-cta-hashtags-grid textarea {
	width: 100%;
	height: 100%;
}

/* Two-column Plan Item media workspace: preserves the existing media hooks while simplifying the comparison view. */
#marby-planner-shell .pln-plan-item-right .mp-media-mode-tabs {
	display: flex;
	gap: 4px;
	align-items: end;
	margin: 0;
}

#marby-planner-shell .pln-plan-item-right .mp-media-mode-tab {
	margin: 0 0 -1px;
	border: 1px solid var(--marby-color-marby-blue);
	border-bottom: 0;
	border-radius: 0;
	background: var(--marby-color-marby-blue-light);
	color: var(--marby-color-black);
}

#marby-planner-shell .pln-plan-item-right .mp-media-mode-tab.is-active {
	position: relative;
	z-index: 1;
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-plan-item-right .mp-media-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: 20px;
	border: 1px solid var(--marby-color-marby-blue);
	border-radius: 0 var(--marby-radius-md) var(--marby-radius-md)
		var(--marby-radius-md);
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-plan-item-right .mp-media-left,
#marby-planner-shell .pln-plan-item-right .mp-media-right,
#marby-planner-shell .pln-plan-item-right .mp-media-panel {
	display: contents;
}

#marby-planner-shell .pln-plan-item-right .mp-media-generation-controls {
	grid-column: 1 / -1;
	grid-row: 1;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-media-action-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 12px;
}

#marby-planner-shell .pln-media-action-row .mp-media-upload {
	margin: 0;
	order: 2;
}

#marby-planner-shell .pln-media-action-row .mp-media-generate-btn {
	order: 1;
}

#marby-planner-shell .pln-media-action-row .mp-media-upload-dropzone,
#marby-planner-shell .pln-media-action-row .mp-media-generate-btn {
	border-color: var(--marby-color-black);
	background: var(--marby-color-black);
	color: var(--marby-color-white);
}

#marby-planner-shell .pln-media-action-row .mp-media-upload-dropzone:hover,
#marby-planner-shell .pln-media-action-row .mp-media-upload-dropzone:focus,
#marby-planner-shell .pln-media-action-row .mp-media-generate-btn:hover,
#marby-planner-shell .pln-media-action-row .mp-media-generate-btn:focus {
	border-color: var(--marby-color-black);
	background: var(--marby-color-black);
	color: var(--marby-color-white);
}

#marby-planner-shell .pln-plan-item-right .mp-section--media input,
#marby-planner-shell .pln-plan-item-right .mp-section--media textarea,
#marby-planner-shell .pln-plan-item-right .mp-section--media select {
	border-radius: var(--marby-radius-sm);
}

#marby-planner-shell .mp-video-media.is-video-mode [data-video-upload-trigger] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--marby-color-marby-blue);
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-white);
	color: var(--marby-color-marby-blue);
	font-size: 14px;
	font-weight: var(--marby-font-weight-bold);
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

#marby-planner-shell
	.pln-plan-item-right
	.mp-media-generation-controls
	> [id^="mp-scene-notes-label-"] {
	margin: 0 0 4px;
}

#marby-planner-shell
	.pln-plan-item-right
	.mp-media-generation-controls
	.mp-media-generate-layout,
#marby-planner-shell
	.pln-plan-item-right
	.mp-media-generation-controls
	.mp-media-generate-tips,
#marby-planner-shell .pln-plan-item-right .mp-media-gallery-actions {
	display: none;
}

#marby-planner-shell .pln-plan-item-right .mp-media-gallery [data-media-select],
#marby-planner-shell
	.pln-plan-item-right
	.mp-media-gallery
	.mp-media-product-toggle,
#marby-planner-shell .pln-plan-item-right .mp-media-gallery .mp-media-drag {
	display: none;
}

#marby-planner-shell .pln-plan-item-right .mp-media-gallery .mp-media-trash {
	border-radius: var(--marby-radius-sm);
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

#marby-planner-shell
	.pln-plan-item-right
	.mp-media-gallery
	.mp-media-trash:hover,
#marby-planner-shell
	.pln-plan-item-right
	.mp-media-gallery
	.mp-media-trash:focus {
	border: 0;
	background: var(--marby-color-marby-blue-dark);
	color: var(--marby-color-white);
}

#marby-planner-shell .pln-plan-item-right .mp-media-preview-workspace {
	grid-column: 1;
	grid-row: 2;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

#marby-planner-shell
	.pln-plan-item-right
	.mp-media-preview-workspace
	> [id^="mp-image-preview-heading-"],
#marby-planner-shell
	.pln-plan-item-right
	.pln-media-gallery-workspace
	> [id^="mp-image-gallery-heading-"] {
	margin: 0 0 8px;
	padding: 0;
}

#marby-planner-shell .pln-plan-item-right .pln-media-gallery-workspace {
	grid-column: 1;
	grid-row: 3;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

#marby-planner-shell .pln-plan-item-right .mp-media-gallery {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	width: 100%;
	min-width: 0;
	max-height: 520px;
	padding: 12px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-white);
	overflow-y: auto;
}

#marby-planner-shell .pln-plan-item-right .pln-plan-item-panel {
	min-width: 0;
	max-width: 100%;
}

/* Gallery images must be allowed to shrink with the Media column. */
#marby-planner-shell .pln-plan-item-right .mp-media-gallery .mp-media-thumb,
#marby-planner-shell
	.pln-plan-item-right
	.mp-media-gallery
	.mp-media-thumb
	img {
	min-width: 0;
	max-width: 100%;
}

#marby-planner-shell
	.pln-plan-item-right
	.pln-media-gallery-workspace
	.mp-media-gallery-usage {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0 0;
}

#marby-planner-shell
	.pln-plan-item-right
	.mp-media-preview-workspace
	[data-action="media-preview-save-product"],
#marby-planner-shell
	.pln-plan-item-right
	.mp-media-preview-workspace
	[data-action="media-preview-clear"],
#marby-planner-shell .pln-plan-item-right .mp-product-info-toggle,
#marby-planner-shell .pln-plan-item-right .mp-product-info-box {
	display: none;
}

#marby-planner-shell
	.pln-plan-item-right
	.mp-media-preview-workspace
	[data-action="media-preview-save"][hidden] {
	display: none !important;
}

#marby-planner-shell .pln-plan-item-right .mp-media-meta,
#marby-planner-shell .pln-plan-item-right .mp-video-workspace {
	grid-column: 1 / -1;
}

#marby-planner-shell .mp-video-media.is-video-mode .mp-media-panel,
#marby-planner-shell .mp-video-media.is-video-mode .mp-media-upload,
#marby-planner-shell .mp-video-media.is-video-mode .mp-media-preview-workspace {
	display: none;
}

/* Video uses the same controls, preview, and gallery composition as Images. */
#marby-planner-shell .mp-video-media.is-video-mode .mp-video-workspace {
	display: contents;
}

#marby-planner-shell .mp-video-media.is-video-mode .mp-video-upload {
	display: flex;
	grid-column: 1 / -1;
	grid-row: 1;
	justify-content: flex-end;
	margin: 0;
}

#marby-planner-shell .mp-video-media.is-video-mode .mp-video-preview-workspace {
	display: block;
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
}

#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery-panel {
	display: block;
	grid-column: 1;
	grid-row: 3;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

#marby-planner-shell
	.mp-video-media.is-video-mode
	.mp-video-preview-workspace
	> p,
#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery-panel > p {
	margin: 0 0 8px;
	padding: 0;
}

#marby-planner-shell
	.mp-video-media.is-video-mode
	.mp-video-preview-workspace
	.mp-media-preview-large {
	margin: 0;
}

#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery-item {
	position: relative;
	min-width: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-white);
}

#marby-planner-shell
	.mp-video-media.is-video-mode
	.mp-video-gallery-item
	video {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

#marby-planner-shell
	.mp-video-media.is-video-mode
	.mp-video-gallery-item
	.mp-video-delete {
	position: absolute;
	top: 6px;
	right: 6px;
	width: auto;
	margin: 0;
	padding: 6px 8px;
	border-radius: var(--marby-radius-sm);
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

/* Keep the selected two-column comparison through desktop and laptop widths.
   Reflow the main Plan Item panels only on mobile. */
@media (max-width: 700px) {
	#marby-planner-shell .pln-plan-item-layout {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		max-width: 100%;
	}

	#marby-planner-shell .pln-plan-item-left,
	#marby-planner-shell .pln-plan-item-right,
	#marby-planner-shell .pln-plan-item-right .mp-section--media,
	#marby-planner-shell .pln-plan-item-right .mp-media-grid {
		min-width: 0;
		max-width: 100%;
	}

	#marby-planner-shell .pln-plan-item-right .mp-media-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	#marby-planner-shell .pln-plan-item-right .mp-media-preview-workspace,
	#marby-planner-shell .pln-plan-item-right .pln-media-gallery-workspace {
		grid-column: 1;
	}

	#marby-planner-shell .pln-plan-item-right .pln-media-gallery-workspace {
		grid-row: 3;
	}

	#marby-planner-shell .pln-plan-item-right .mp-media-gallery {
		grid-template-columns: 1fr;
		max-height: none;
	}

	#marby-planner-shell
		.pln-plan-item-right
		.pln-media-gallery-workspace
		.mp-media-gallery-usage {
		flex-direction: column;
		align-items: flex-start;
	}

	#marby-planner-shell
		.pln-plan-item-right
		.pln-media-gallery-workspace
		.mp-media-generation-counter {
		margin-left: 0;
	}

	#marby-planner-shell .mp-video-media.is-video-mode .mp-video-upload,
	#marby-planner-shell
		.mp-video-media.is-video-mode
		.mp-video-preview-workspace,
	#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery-panel {
		grid-column: 1;
	}

	#marby-planner-shell .mp-video-media.is-video-mode .mp-video-upload {
		justify-content: flex-start;
	}

	#marby-planner-shell
		.mp-video-media.is-video-mode
		.mp-video-preview-workspace {
		grid-row: 2;
	}

	#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery-panel {
		grid-row: 3;
	}

	#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery {
		grid-template-columns: 1fr;
	}
}

/* Parent-width protection for embedded/mobile contexts only. */
@container (max-width: 700px) {
	#marby-planner-shell .pln-plan-item-layout {
		grid-template-columns: minmax(0, 1fr) !important;
		width: 100%;
		max-width: 100%;
	}

	#marby-planner-shell .pln-plan-item-left,
	#marby-planner-shell .pln-plan-item-right,
	#marby-planner-shell .pln-plan-item-right .mp-section--media,
	#marby-planner-shell .pln-plan-item-right .mp-media-grid {
		min-width: 0;
		max-width: 100%;
	}

	#marby-planner-shell .pln-plan-item-right .mp-media-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	#marby-planner-shell .pln-plan-item-right .mp-media-preview-workspace,
	#marby-planner-shell .pln-plan-item-right .pln-media-gallery-workspace {
		grid-column: 1;
	}

	#marby-planner-shell .pln-plan-item-right .pln-media-gallery-workspace {
		grid-row: 3;
	}
}

/* Wide monitors have room for a compact three-image gallery. */
@media (min-width: 1601px) {
	#marby-planner-shell .pln-plan-item-right .mp-media-gallery,
	#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
}

/* On laptops, retain two gallery images per row without allowing the image
   tracks to expand the Media column beyond the available Plan Item width. */
@media (min-width: 701px) and (max-width: 1600px) {
	#marby-planner-shell .pln-plan-item-right .mp-media-gallery,
	#marby-planner-shell .mp-video-media.is-video-mode .mp-video-gallery {
		grid-template-columns: repeat(2, minmax(0, 136px));
		justify-content: start;
		gap: 8px;
	}
}

/* Current Planner flow composition: master owns its type, controls, and card primitives. */
#marby-planner-shell .pln-setup-intro {
	padding-top: 56px;
}

#marby-planner-shell .pln-setup-intro .pln-card-head,
#marby-planner-shell .pln-campaign-flow-intro {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

#marby-planner-shell .pln-setup-intro .pln-card-head {
	max-width: 980px;
}

/* Superseded: master.css owns Planner intro h2 and p typography. */

#marby-planner-shell .pln-campaign-flow-intro {
	margin: 0 0 32px;
}

#marby-planner-shell .mp-tabs-wrap > .marby-eyebrow {
	display: block;
	margin: 0 0 12px;
}

#marby-planner-shell .pln-calendar-tab {
	display: inline-flex;
	align-items: center;
}

/* Setup introduction fills the shared page shell without removing its gutters. */
#marby-planner-shell .pln-setup-intro {
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}

#marby-planner-shell .pln-page-header {
	left: 50%;
	width: 100vw;
	margin-right: 0;
	margin-left: 0;
	transform: translateX(-50%);
	padding-top: 0;
	padding-bottom: 0;
}

#marby-planner-shell .pln-page-header .pln-stage-content {
	width: 80vw;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	padding: 40px 0px;
}

#marby-planner-shell .pln-setup-intro .pln-card-head {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
}

#marby-planner-shell .pln-setup-intro {
	padding: 56px 0 0;
}

#marby-planner-shell .pln-setup-intro .pln-card-head {
	display: block;
}

#marby-planner-shell .pln-page-header::after {
	z-index: 0;
	pointer-events: none;
}

/* Review view refinements. */
#marby-planner-shell #mp-week-review-label {
	display: block;
	margin: 0 0 8px;
}

#marby-planner-shell #mp-week-items {
	padding-top: 40px;
}

#marby-planner-shell.pln-planner-page .mp-subtabs .mp-subtab:disabled,
#marby-planner-shell.pln-planner-page .mp-subtabs .mp-subtab.is-disabled {
	border-color: var(--marby-color-disabled-text) !important;
	background: var(--marby-color-border-light) !important;
	background-color: var(--marby-color-border-light) !important;
	color: var(--marby-color-disabled-text) !important;
	cursor: not-allowed;
}

/* Superseded: master.css owns the full-width Setup intro paragraph. */

#marby-planner-shell .pln-tabs-heading {
	margin: 0 0 12px;
}

#marby-planner-shell .pln-generated-campaign .pln-campaign-meta-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
	#marby-planner-shell .pln-page-header {
		padding-top: 0;
		padding-bottom: 0;
	}

	#marby-planner-shell .pln-generated-campaign .pln-campaign-meta-grid {
		grid-template-columns: 1fr;
	}
}

/* Master input, select, and textarea foundations own radius and interaction. */

@media (max-width: 700px) {
	#marby-planner-shell .pln-plan-item-panel-head {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	#marby-planner-shell .pln-plan-item-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	#marby-planner-shell .pln-cta-hashtags-grid {
		grid-template-columns: 1fr;
	}
}

/* Marketing Plan step flow: composition only; master.css owns type, colours,
   controls, and the primary-button treatment. */
#marby-planner-shell > #mp-tabs-wrap {
	width: 80vw;
	max-width: none;
	margin: 0 auto;
}

#marby-planner-shell > #mp-tabs-wrap .mp-tabs-wrap {
	margin: 0;
	padding: 0;
}

#marby-planner-shell > #mp-tabs-wrap .mp-tabs-wrap > h2 {
	display: none;
}

#marby-planner-shell > #mp-tabs-wrap .mp-tabs {
	justify-content: flex-end;
	gap: 1px;
	border-bottom: 0px solid var(--marby-color-border-light);
}

#marby-planner-shell > #mp-tabs-wrap .mp-tab-btn {
	border-radius: 0 !important;
	border-bottom: 1px solid var(--marby-color-marby-blue) !important;
	margin: 0 0 -1px;
	padding: 12px !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

#marby-planner-shell > #mp-tabs-wrap .mp-tab-btn.is-active,
#marby-planner-shell > #mp-tabs-wrap .mp-tab-btn.active,
#marby-planner-shell > #mp-tabs-wrap .mp-tab-btn:focus-visible {
	position: relative;
	z-index: 1;
	transform: translateY(-2px);
	box-shadow: 0 4px 0 var(--marby-color-marby-blue-dark);
}

#marby-planner-shell > #mp-tabs-wrap .mp-tab-panel {
	margin-top: 0;
	padding-top: 36px;
	border-top: 0 !important;
}

#marby-planner-shell .pln-marketing-plan-setup {
	display: grid;
	gap: 20px;
	margin: 0 0 32px;
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-marketing-plan-setup > h6,
#marby-planner-shell .pln-campaign-flow-intro h6,
#marby-planner-shell .pln-campaign-response > h6 {
	margin: 0;
}
#marby-planner-shell .pln-step-number {
	font-weight: var(--marby-font-weight-bold);
}

#marby-planner-shell .pln-marketing-plan-setup-fields {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 20px;
	padding-top: 0;
	border-top: 0;
}

#marby-planner-shell .pln-marketing-plan-setup-fields .pln-planner-setup,
#marby-planner-shell .pln-marketing-plan-setup-fields #mp-section-occasions {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#marby-planner-shell .pln-marketing-plan-setup-fields #mp-section-occasions {
	display: block;
}

#marby-planner-shell .pln-marketing-plan-setup-fields .pln-planner-setup {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

#marby-planner-shell
	.pln-marketing-plan-setup-fields
	.pln-planner-setup
	.mp-planner-header {
	display: contents;
}

#marby-planner-shell
	.pln-marketing-plan-setup-fields
	.pln-planner-setup
	#pln-language-slot,
#marby-planner-shell
	.pln-marketing-plan-setup-fields
	.pln-planner-setup
	#mp-section-language {
	margin: 0;
	padding: 0;
}

#marby-planner-shell
	.pln-marketing-plan-setup-fields
	#mp-section-occasions
	.mp-occasions-columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

#marby-planner-shell
	.pln-marketing-plan-setup-fields
	#mp-section-occasions
	.mp-occasions-column:first-child::after {
	display: none;
}

#marby-planner-shell
	.pln-marketing-plan-setup-fields
	#mp-section-occasions
	.mp-occasions-actions {
	display: none;
}

#marby-planner-shell .pln-campaign-workspace {
	gap: 24px;
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-campaign-workspace .pln-campaign-flow-intro,
#marby-planner-shell .pln-campaign-workspace .pln-campaign-builder {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#marby-planner-shell .pln-campaign-workspace .pln-campaign-builder-copy {
	max-width: none;
}

#marby-planner-shell .pln-campaign-workspace .pln-campaign-input-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

#marby-planner-shell .pln-campaign-workspace .pln-campaign-input-row .mp-input,
#marby-planner-shell .pln-campaign-workspace .pln-campaign-input-row .mp-btn {
	width: 100%;
	margin: 0;
}

#marby-planner-shell .pln-campaign-workspace .pln-campaign-input-row .mp-btn {
	justify-self: start;
	width: auto;
	white-space: nowrap;
}

#marby-planner-shell .pln-campaign-response {
	display: grid;
	gap: 20px;
	margin-top: 20px;
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-campaign-response > h3 {
	margin: 0;
}

#marby-planner-shell .pln-campaign-response .pln-report-card {
	margin: 0;
}

#marby-planner-shell
	.pln-campaign-response
	.pln-generated-campaign
	.pln-card-head {
	padding-top: 0;
}

#marby-planner-shell .pln-campaign-response .pln-campaign-breakdown {
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-lg);
	overflow: hidden;
}

#marby-planner-shell .pln-campaign-response [id$="-label"] {
	margin: 0 0 8px;
}

#marby-planner-shell .pln-campaign-response .pln-week-sidebar > h4,
#marby-planner-shell .pln-campaign-response .pln-week-content > h4,
#marby-planner-shell .pln-campaign-response .pln-week-dates h6 {
	margin: 0;
}

#marby-planner-shell .pln-campaign-response .pln-week-phase-heading {
	align-items: center;
	padding: 20px 0;
}

#marby-planner-shell .pln-campaign-response .pln-week-content > h4 {
	font-weight: var(--marby-font-weight-bold);
}

#marby-planner-shell .pln-campaign-response .pln-week-dates {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

#marby-planner-shell .pln-campaign-save-row {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

#marby-planner-shell .pln-campaign-save-message {
	flex: 1 1 100%;
}

#marby-planner-shell .pln-generation-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#marby-planner-shell .pln-posting-layout {
	display: block;
	margin-top: 24px;
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
}

#marby-planner-shell .pln-posting-days,
#marby-planner-shell .pln-posting-days .pln-card-body,
#marby-planner-shell .pln-posting-days .mp-channel {
	width: 100%;
}

#marby-planner-shell .pln-posting-days .mp-channel {
	border-radius: var(--marby-radius-lg);
}

#marby-planner-shell .pln-posting-days [data-pln-day-card] {
	border-radius: var(--marby-radius-md);
}

#marby-planner-shell .pln-generation-card {
	margin-top: 20px;
}

#marby-planner-shell .pln-generation-card .pln-overwrite-option {
	flex: 1 1 auto;
	margin: 0;
}

#marby-planner-shell .pln-generation-card #mp-begin-generation {
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
}

#marby-planner-shell .pln-generation-card .pln-overwrite-option {
	flex: 0 1 auto;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
}

#marby-planner-shell .pln-campaign-save-row > #mp-save-campaign {
	width: auto;
	white-space: nowrap;
}

#marby-planner-shell .pln-generation-card .mp-gen-msg,
#marby-planner-shell .pln-generation-card .mp-error,
#marby-planner-shell .pln-generation-card .mp-progress {
	flex: 1 1 100%;
}

@media (max-width: 900px) {
	#marby-planner-shell > #mp-tabs-wrap {
		width: calc(100% - (2 * var(--marby-page-gutter)));
	}

	#marby-planner-shell .pln-marketing-plan-setup-fields {
		grid-template-columns: 1fr;
	}

	#marby-planner-shell .pln-marketing-plan-setup-fields .pln-planner-setup {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	#marby-planner-shell > #mp-tabs-wrap .mp-tabs {
		justify-content: stretch;
	}

	#marby-planner-shell > #mp-tabs-wrap .mp-tab-btn {
		width: 100%;
	}

	#marby-planner-shell .pln-marketing-plan-setup,
	#marby-planner-shell .pln-campaign-workspace,
	#marby-planner-shell .pln-campaign-response {
		padding: 22px;
	}

	#marby-planner-shell .pln-marketing-plan-setup-fields .pln-planner-setup,
	#marby-planner-shell
		.pln-marketing-plan-setup-fields
		#mp-section-occasions
		.mp-occasions-columns {
		grid-template-columns: 1fr;
	}

	#marby-planner-shell .pln-campaign-save-row,
	#marby-planner-shell .pln-generation-card {
		align-items: stretch;
	}

	#marby-planner-shell .pln-campaign-save-row > .mp-btn {
		width: 100%;
	}

	#marby-planner-shell .pln-generation-card #mp-begin-generation {
		width: auto;
	}
}

/* Planner editable controls use the shared master muted-text token. */
#marby-planner-shell textarea,
#marby-planner-shell input[type="text"],
#marby-planner-shell input[type="url"],
#marby-planner-shell input[type="email"],
#marby-planner-shell input[type="search"],
#marby-planner-shell input[type="number"],
#marby-planner-shell input[type="time"] {
	color: var(--marby-color-muted) !important;
}

#marby-planner-shell textarea::placeholder,
#marby-planner-shell input[type="text"]::placeholder,
#marby-planner-shell input[type="url"]::placeholder,
#marby-planner-shell input[type="email"]::placeholder,
#marby-planner-shell input[type="search"]::placeholder,
#marby-planner-shell input[type="number"]::placeholder,
#marby-planner-shell input[type="time"]::placeholder {
	color: var(--marby-color-muted);
	opacity: 0.72;
}

/* Post Content controls use the shared input-radius token. */
#marby-planner-shell .pln-plan-item-left .mp-section--content textarea,
#marby-planner-shell .pln-plan-item-left .mp-section--content input[type="text"],
#marby-planner-shell .pln-plan-item-left .mp-section--content input[type="url"] {
	border-radius: var(--marby-radius-md) !important;
}