@use '../variables' as *;
@use 'panel-mixins' as *;
@use '../../../editor-shell/styles/settings-panel-rows' as *;
@use '../../../editor-shell/styles/motion-picker' as *;

// Redesign settings panel column (400) — hub rows, then "More settings"
// accordion sections (admin-ui Accordion).
.modula-settings-panel {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	height: 100%;
	/* The panel sits in the sidebar's admin-ui scope (canvas: a white panel). */
	--modula-admin-control-height: 32px;
	background: var(--modula-admin-surface);
	color: var(--modula-admin-ink);

	/*
	 * Compact tip cluster (option B): label text wraps; ⓘ stays first-line,
	 * never wraps onto its own row.
	 */
	.modula-settings-editor__field-label-with-tip {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: $mod-space-4;
		min-width: 0;
		width: 100%;
		flex: 1 1 auto;
	}

	/* The ⓘ follows the label's text; the row's free space stays after it. */
	.modula-settings-editor__field-label-with-tip>.modula-settings-editor__field-label {
		flex: 0 1 auto;
		min-width: 0;
	}

	// The tooltip's anchor wraps the ⓘ (inside the admin-ui scope's
	// `display: contents` root).
	.modula-settings-editor__field-label-with-tip .modula-admin-tooltip-anchor {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	/*
	 * A column row has no control beside its label, so the reset dot follows
	 * the label and its ⓘ instead of the row's far edge. Other rows keep it
	 * at the end of the label, beside their control.
	 */
	.modula-settings-editor__field-row--layout-column,
	.modula-settings-panel__field-row.is-column {

		.modula-settings-editor__field-label-with-tip {
			width: auto;
			flex: 0 1 auto;
		}

		.modula-settings-editor__field-reset {
			margin-left: 0;
		}
	}

	/*
	 * Row labels, per-device row titles included: the panel's 14px text in
	 * regular weight (canvas `lblStyle`). Row layouts below set no label type.
	 */
	.modula-settings-editor__field-label,
	.modula-settings-editor__inline-field-label,
	.modula-settings-editor__composite-stack-heading,
	.modula-settings-panel__toggle-upsell-label {
		overflow-wrap: anywhere;
		hyphens: auto;
		font-size: var(--modula-admin-text-control);
		font-weight: 400;
		line-height: 1.35;
	}

	// The locked toggle's own label.
	.modula-settings-panel__toggle-upsell-label {
		margin: 0;
		color: var(--modula-admin-ink);
	}
}

/*
 * 24px gutter (canvas): the scroll keeps 8px each side and rows, headings and
 * boxes add their own 16px, so row hover and highlight backgrounds stop 8px
 * short of the panel edge.
 */
$settings-panel-scroll-inset: $mod-space-8;

.modula-settings-panel > .modula-settings-panel__header {
	padding-inline: $settings-panel-scroll-inset + $mod-se-gut;
}

.modula-settings-panel__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 0 $settings-panel-scroll-inset $mod-space-32;
}

.modula-settings-editor__composite-stack-heading-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: $mod-space-4;
	min-width: 0;
}

// The first row starts right under the search's 14px bottom padding (canvas).
.modula-settings-panel__body {
	display: flex;
	flex-direction: column;
}

// A labelled hub submenu (Interact › Share): a heading inside the hub.
.modula-settings-panel__hub-heading {
	margin: 0;
	padding: 22px $mod-se-gut $mod-space-6;
	color: var(--modula-admin-ink);
	font-size: 16px;
	font-weight: 600;
	// The canvas's 1.3, rounded to whole pixels.
	line-height: 20px;
}

// A section inside the hub or inside another section: its own bordered box.
.modula-settings-panel__box {
	margin: $mod-space-6 $mod-se-gut $mod-space-12;
}

// A headless box (dependents that only repeat their toggle's name): the
// accordion's frame and panel padding, without a header.
.modula-settings-panel__dependents {
	display: flex;
	flex-direction: column;
	padding: $mod-space-6 0 $mod-space-10;
	border: 1px solid var(--modula-admin-border);
	border-radius: var(--modula-admin-radius-lg);
	background: var(--modula-admin-surface);
}

.modula-settings-panel__more-title {
	margin: 0;
	padding: $mod-space-24 $mod-se-gut $mod-space-8;
	color: var(--modula-admin-ink);
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
}

.modula-settings-panel__more-sections {
	margin: 0 $mod-se-gut $mod-space-16;
}

/*
 * Section panels hold full-width rows that bring their own 16px padding, so
 * the accordion panel adds only the canvas's 6/10px above and below.
 */
.modula-settings-panel .modula-admin-accordion__panel {
	gap: 0;
	padding: $mod-space-6 0 $mod-space-10;
}

.modula-settings-panel__section-upsell {
	box-sizing: border-box;
	padding: $mod-space-10 $mod-se-gut;
}

// A hub toggle row (`.modula-settings-panel__field-row`, below): the 44px
// hit target overhangs it, so the row stays 52px with the 22px track
// centred, as in the schema rows' toggles. Kept ahead of those rules, which
// select their toggles more specifically.
.modula-settings-panel__field-row .modula-admin-toggle {
	margin-block: -11px;
}

/*
 * Schema rows in the hub and in sections sit on the panel or box surface
 * without dividers (canvas), with their own 16px side padding.
 */
.modula-settings-panel__hub,
.modula-settings-panel__section-fields {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	background: transparent;

	.modula-settings-editor__field-row--disabled-when {
		opacity: 0.45;
		pointer-events: none;
	}

	/*
	 * Schema headings inside a section (What they can take, Placement, …): a
	 * quiet label over the rows that follow. The canvas drops them; they stay
	 * because they group long sections.
	 */
	.modula-settings-editor__field-row--section-heading {
		box-sizing: border-box;
		grid-template-columns: 1fr;
		align-items: center;
		margin: 0;
		padding: $mod-space-16 $mod-se-gut $mod-space-4;
		border-bottom: none;
		background: transparent;

		&:first-child {
			padding-top: $mod-space-6;
		}

		.modula-settings-editor__section-heading-label {
			font-size: 11px;
			font-weight: 600;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--modula-admin-ink-muted);
		}
	}

	/*
	 * Rows follow `fieldRowLayout` (the `--layout-*` class). A column puts
	 * the label above the control (overrides the metabox 2-col grid).
	 */
	.modula-settings-editor__field-row--layout-column:not(.modula-settings-editor__field-row--toggle):not(.modula-settings-editor__field-row--toggle-nested) {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: $mod-space-8;
		align-items: stretch;
		/* Match hub row rhythm — was 20/16 and read as “labartat”. */
		padding: $mod-space-12 $mod-se-gut;
		border-bottom: none;

		.modula-settings-editor__field-label-col {
			width: 100%;
			min-width: 0;
		}

		.modula-settings-editor__field-control-col {
			width: 100%;
			min-width: 0;
			/* Let Select/TextInput/Slider + help size naturally (do not clip help). */
			height: auto;
			min-height: 0;
			overflow: visible;
		}

		.modula-settings-editor__field-label {
			color: var(--modula-admin-ink);
		}
	}

	/*
	 * Toggle: label left, switch right — the bridge steps aside
	 * (display: contents) so its children join the row grid.
	 */
	.modula-settings-editor__field-toggle-grid-bridge {
		display: contents;
	}

	.modula-settings-editor__field-row--stacked.modula-settings-editor__field-row--toggle:not(.modula-settings-editor__field-row--toggle-nested) {
		grid-template-columns: minmax(0, 1fr) auto;
		/* Single row by default — a spare `auto` track + row-gap leaves 8px dead air under the switch. */
		grid-template-rows: auto;
		column-gap: $mod-space-16;
		row-gap: 0;
		/* The canvas's 52px row (`HE_ROW`): label and switch centred in it. */
		align-items: center;
		box-sizing: border-box;
		min-height: 52px;
		padding: 0 $mod-se-gut;
		border-bottom: none;

		// Help or a foot under the label: both lines start at the top.
		&:has(.modula-settings-editor__field-help),
		&:has(.modula-settings-editor__field-toggle-foot) {
			grid-template-rows: auto auto;
			row-gap: $mod-space-8;
			align-items: start;
			padding-block: $mod-space-12;
		}

		>.modula-settings-editor__field-label-col {
			grid-column: 1;
			grid-row: 1;
			min-width: 0;
			width: auto;
			max-width: none;
		}

		/*
		 * Flatten wrappers so the switch sits in column 2 and help spans the
		 * full row underneath (otherwise long help greedily shrinks the label to 0).
		 */
		.modula-settings-editor__field-control-col--toggle-inline,
		.modula-settings-editor__field-control-col--toggle-inline>[id^='modula-field-'],
		.modula-settings-editor__toggle-end {
			display: contents;
		}

		// The 44px hit target overhangs the row so the row places the 22px
		// track, as it places the label.
		.modula-admin-toggle {
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
			margin-block: -11px;
		}

		.modula-settings-editor__field-help {
			grid-column: 1 / -1;
			grid-row: 2;
			margin: 0;
			min-width: 0;
			width: auto;
		}

		.modula-settings-editor__field-toggle-foot {
			grid-column: 1 / -1;
			grid-row: 2;
			min-width: 0;
			width: 100%;
		}

		.modula-settings-editor__field-label {
			color: var(--modula-admin-ink);
		}
	}

	.modula-settings-editor__field-row--composite,
	.modula-settings-editor__field-row--device-tabs {
		padding: $mod-space-12 $mod-se-gut;
		border-bottom: none;
	}

	/*
	 * Metabox compact-stack / composite divider-before use hard-coded light
	 * borders — neutralize inside nested so dark mode does not flash white.
	 */
	.modula-settings-editor__field-row--compact-stack {
		padding-left: $mod-se-gut;
		padding-right: $mod-se-gut;
	}

	.modula-settings-editor__field-row--compact-stack+.modula-settings-editor__field-row:not(.modula-settings-editor__field-row--compact-stack):not(.modula-settings-editor__field-row--section-heading) {
		border-top: none;
		margin-top: 0;
	}

	.modula-settings-editor__field-row--composite-divider-before {
		border-top-color: var(--modula-admin-border-divider);
	}

	/*
	 * A row: label left, control right, on one 52px line (select, colour,
	 * text, position). Selects are 150–190px wide, text boxes 150px (canvas);
	 * a text box narrows before its label wraps (`text-row`, below).
	 */
	.modula-settings-editor__field-row--layout-row:not(.modula-settings-editor__field-row--toggle):not(.modula-settings-editor__field-row--toggle-nested) {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: $mod-space-10;
		row-gap: $mod-space-8;
		box-sizing: border-box;
		min-height: 52px;
		padding: $mod-space-10 $mod-se-gut;
		border-bottom: none;

		.modula-settings-editor__field-label-col {
			grid-column: 1;
			grid-row: 1;
			width: auto;
			max-width: none;
			min-width: 0;
		}

		.modula-settings-editor__field-control-col {
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
			width: auto;
			min-width: 0;
		}

		.modula-admin-field,
		.modula-settings-editor__select-menu {
			width: auto;
			min-width: 150px;
			max-width: 190px;
		}

		// The colour picker's hex box keeps its own width.
		.modula-admin-text-input:not(.modula-admin-color__hex) {
			width: 150px;
		}

		// The unit box ("100 %") is the canvas's 86px value box.
		.modula-admin-field:has(> .modula-settings-editor__css-length) {
			width: 86px;
			min-width: 0;
		}

		// Gallery width's number box, then its px / % toggle on the same line.
		.modula-settings-editor__css-length-toggle {
			display: flex;
			align-items: center;
			gap: $mod-space-8;

			.modula-admin-text-input.modula-settings-editor__css-length {
				width: 100%;
			}

			// Two short labels: 36px options in the 2px-inset track, so the
			// number box and the toggle stay inside the 190px control column.
			.modula-admin-segmented {
				flex: none;
				width: 76px;
			}
		}

		.modula-settings-editor__position-grid {
			align-items: flex-end;
		}

		@include open-color-joins-row(".modula-settings-editor__field-control-col");

		.modula-admin-color.is-open > .modula-admin-color__button {
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
		}

		.modula-admin-color.is-open > .modula-admin-color__panel,
		.modula-admin-color.is-open ~ * {
			grid-column: 1 / -1;
		}
	}

	/*
	 * A slider: label, device switch and value box on one line, the slider
	 * under them (canvas range and `dev` rows). The control's wrappers step
	 * aside (`display: contents`) so its parts join the row's grid; anything
	 * else in the control column (upsell, error) spans the row.
	 */
	.modula-settings-editor__field-row--layout-slider:not(.modula-settings-editor__field-row--device-tabs) {
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		column-gap: 0;
		row-gap: $mod-space-8;
		padding: $mod-space-12 $mod-se-gut;
		border-bottom: none;

		.modula-settings-editor__field-label-col {
			grid-column: 1;
			grid-row: 1;
			width: auto;
			min-width: 0;
		}

		.modula-settings-editor__field-control-col,
		.modula-settings-editor__field-control-col > [id^="modula-field-"],
		.modula-settings-editor__tuple3-device-tabs {
			display: contents;
		}

		.modula-settings-editor__field-control-col > :not([id^="modula-field-"]) {
			grid-column: 1 / -1;
		}

		.modula-settings-editor__device-switch {
			grid-column: 2;
			grid-row: 1;
			margin: 0 0 0 $mod-space-10;
		}

		@include panel-slider-parts(3);

		// Custom CSS: the selector chip on the label line, the code field
		// and the AI button under it.
		.modula-custom-css-field {
			display: contents;
		}

		.modula-custom-css-field__scope {
			grid-column: 3;
			grid-row: 1;
		}

		.modula-custom-css-field__editor,
		.modula-custom-css-field__toolbar,
		.modula-custom-css-field .modula-settings-editor__field-help {
			grid-column: 1 / -1;
		}
	}

	// A per-device row: the title line (title, reset, device switch), the
	// value box beside it and the slider under them.
	.modula-settings-editor__field-row--device-tabs .modula-settings-editor__composite-with-heading-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		row-gap: $mod-space-8;

		> .modula-settings-editor__composite-stack-heading-row {
			grid-column: 1;
			grid-row: 1;
		}

		.modula-settings-editor__device-switch {
			margin: 0 0 0 auto;
		}

		> .modula-settings-editor__field-row--control-only,
		> .modula-settings-editor__field-row--control-only > .modula-settings-editor__field-control-col,
		.modula-settings-editor__field-control-col > [id^="modula-field-"] {
			display: contents;
		}

		.modula-settings-editor__field-control-col > :not([id^="modula-field-"]) {
			grid-column: 1 / -1;
		}

		// A per-device number (Images per page) is typed in the value box.
		.modula-admin-field {
			grid-column: 2;
			grid-row: 1;
			width: 86px;
			margin-left: $mod-space-10;
		}

		@include panel-slider-parts(2);
	}

	/* Color pair under a composite heading (Page button colors). */
	.modula-settings-editor__composite-grid--cells-stacked>.modula-settings-editor__inline-field:has(.modula-settings-editor__color-picker--swatch) {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		column-gap: $mod-space-12;
		padding: $mod-space-6 0;
		/* Keep each color row in its own stacking context so help cannot paint over the next label. */
		isolation: isolate;
		overflow: visible;

		.modula-settings-editor__inline-field-label-line {
			flex: 1 1 auto;
			min-width: 0;
			min-height: 28px;
			display: flex;
			align-items: center;
		}

		.modula-settings-editor__inline-field-control {
			flex: 0 1 auto;
			width: auto;
			max-width: min(100%, 240px);
			min-width: 0;
		}

		.modula-settings-editor__color-picker--swatch {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: $mod-space-4;
			width: 100%;
			max-width: 240px;
		}

		.modula-settings-editor__color-picker-help {
			display: block;
			margin: 0;
			width: 100%;
			max-width: 240px;
			text-align: right;
			line-height: 1.35;
			overflow-wrap: anywhere;
		}
	}

	.modula-settings-editor__field-row--control-only {
		grid-template-columns: 1fr;
		padding: 0;
		border-bottom: none;
	}

	.modula-settings-editor__field-row--stacked.modula-settings-editor__field-row--control-only {
		padding: $mod-space-12 $mod-se-gut $mod-space-16;
	}

	/* A per-device row's title reads like any row label (canvas). */
	.modula-settings-editor__composite-stack-heading {
		color: var(--modula-admin-ink);
	}

	.modula-settings-editor__device-switch {
		margin-bottom: $mod-space-4;
	}

	.modula-settings-editor__inline-field-label {
		color: var(--modula-admin-ink);
	}

	@include dependent-row("modula-settings-editor");
	@include text-row("modula-settings-editor");
}

.modula-settings-panel__section {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;

	/* Same 28px “above section heading” rhythm for Structure after the panel header. */
	&:first-child {
		margin-top: $mod-space-20;
	}

	&+& {
		margin-top: $mod-space-20;
	}
}

.modula-settings-panel__section-heading {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: $mod-space-8 $mod-se-gut;
	background: var(--modula-admin-surface-sunken);
	color: var(--modula-admin-ink-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.modula-settings-panel__section-body {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	/* Rows sit on the admin-ui surface, like the rest of the panel. */
	background: var(--modula-admin-surface);

	/* Last row must not keep a divider — that reads as an empty row before the next section. */
	> :last-child {
		border-bottom: none;

		.modula-settings-panel__exit-row {
			border-bottom: none;
		}
	}
}

.modula-settings-panel__note-text {
	margin: 0;
	padding: $mod-space-12 $mod-se-gut $mod-space-16;
	font-size: 12px;
	line-height: 1.45;
	color: var(--modula-admin-ink-muted);
}

/*
 * Hub field row (SettingsPanelFieldRow, the gallery type row), laid out by
 * `fieldRowLayout` as the canvas draws it (`HE_ROW` / `HE_ROWCOL`): a row
 * keeps the control right of the label on one 52px line; a column puts it
 * under the label.
 */
.modula-settings-panel__field-row {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: $mod-space-10;
	row-gap: $mod-space-8;
	min-height: 52px;
	padding: $mod-space-10 $mod-se-gut;
	color: var(--modula-admin-ink);

	&.is-column,
	&.is-slider {
		flex-direction: column;
		align-items: stretch;
		padding-block: $mod-space-12;
	}

	/* Beat `__app[data-appearance=dark] .field-label` (metabox secondary ink). */
	.modula-settings-editor__app[data-appearance] & .modula-settings-editor__field-label {
		color: inherit;
	}
}

.modula-settings-panel__field-label-line {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: $mod-space-4;
	min-width: 0;
}

.modula-settings-panel__field-control {
	flex: 0 1 auto;
	min-width: 0;

	// Canvas: selects 150–190px wide, beside the label.
	.is-row > & .modula-admin-field,
	.is-row > & .modula-settings-editor__select-menu {
		width: auto;
		min-width: 150px;
		max-width: 190px;
	}

	.is-column > &,
	.is-slider > & {
		width: 100%;
	}
}

.modula-settings-panel__field-row.is-row {

	@include open-color-joins-row(".modula-settings-panel__field-control");

	.modula-admin-color.is-open > .modula-admin-color__panel,
	.modula-admin-color.is-open ~ * {
		flex-basis: 100%;
	}
}

.modula-settings-panel__color-row {
	padding-left: $mod-se-gut;
	padding-right: $mod-se-gut;

	.modula-settings-editor__color-swatch-btn--chip {
		max-width: 100%;
	}
}

.modula-settings-panel__segmented-row {
	padding-left: $mod-se-gut;
	padding-right: $mod-se-gut;
}

.modula-settings-panel__segmented-row--stacked {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: $mod-space-8;
	padding: $mod-space-12 $mod-se-gut;
	border-bottom: 1px solid var(--modula-admin-border);
}

.modula-settings-panel__segmented-row-label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--modula-admin-ink);
}

.modula-settings-panel__select-row {
	padding-left: $mod-se-gut;
	padding-right: $mod-se-gut;
}

.modula-settings-panel__select-row--stacked {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: $mod-space-8;
	padding: $mod-space-12 $mod-se-gut;
	border-bottom: 1px solid var(--modula-admin-border);
}

// The hover preset row is a `--layout-row` select row; Customize takes the
// line under it, ending under the select. Customize is hidden for now
// (useHoverBuilderPanel); the rule stays for when it returns.
.modula-settings-panel__hover-preset-actions {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: end;
}

// The Entrance menu and its replay button (editor-shell's Motion picker).
@include motion-picker('modula-settings-editor');

.modula-settings-editor__info-callout {
	display: flex;
	align-items: flex-start;
	gap: $mod-space-8;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: $mod-space-12 $mod-se-gut $mod-space-16;
	font-size: 12px;
	line-height: 1.45;
	color: var(--modula-admin-ink-muted);
}

.modula-settings-editor__info-callout-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border: 1px solid var(--modula-admin-ink-muted);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 600;
	font-style: italic;
	line-height: 1;
	color: var(--modula-admin-ink-muted);
}

.modula-settings-editor__info-callout-text {
	flex: 1 1 auto;
	min-width: 0;
}

.modula-settings-editor__placeholder-pattern {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: $mod-space-8;
	width: 100%;
	min-width: 0;
}

.modula-settings-editor__placeholder-pattern-tokens {
	display: flex;
	flex-wrap: wrap;
	gap: $mod-space-8;
}

.modula-settings-editor__placeholder-pattern-token {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: $mod-space-4 $mod-space-8;
	border: 1px solid var(--modula-admin-border);
	border-radius: 0;
	background: var(--modula-admin-surface-sunken);
	color: var(--modula-admin-ink-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.35;
	cursor: pointer;

	&:hover:not(:disabled) {
		background: var(--modula-admin-surface);
		color: var(--modula-admin-ink);
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

.modula-settings-editor__placeholder-pattern-preview {
	box-sizing: border-box;
	padding: $mod-space-8 $mod-space-12;
	border: 1px solid var(--modula-admin-border-divider);
	background: var(--modula-admin-surface-sunken);
}

.modula-settings-editor__placeholder-pattern-preview-name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.4;
	color: var(--modula-admin-ink);
	word-break: break-all;
}

.modula-settings-editor__placeholder-pattern-help {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--modula-admin-ink-muted);
}

.modula-settings-editor__field-row--info-callout {
	grid-template-columns: 1fr;
	padding: 0;
	border-bottom: 0;
}

.modula-settings-editor__field-row--help-only {
	grid-template-columns: 1fr;
	padding: $mod-space-12 $mod-se-gut $mod-space-16;
	border-bottom: 1px solid var(--modula-admin-border-divider);
}

.modula-settings-editor__field-row--exif-result,
.modula-settings-editor__field-row--deeplink-url,
.modula-settings-editor__field-row--gallery-defaults-shell,
.modula-settings-editor__field-row--instagram-account {
	grid-template-columns: 1fr;
	border-bottom: 0;
}

.modula-settings-panel__hub .modula-settings-editor__gallery-defaults-shell,
.modula-settings-panel__section-fields .modula-settings-editor__gallery-defaults-shell {
	box-sizing: border-box;
	margin: 0;
	padding: $mod-space-16 $mod-se-gut;
}

.modula-settings-editor__field-row--exif-result,
.modula-settings-editor__field-row--deeplink-url,
.modula-settings-editor__field-row--instagram-account {
	padding: $mod-space-12 $mod-se-gut $mod-space-16;
}

.modula-settings-editor__settings-preview {
	display: flex;
	flex-direction: column;
	gap: $mod-space-8;
}

.modula-settings-editor__settings-preview-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--modula-admin-ink);
}

.modula-settings-editor__settings-preview-box {
	box-sizing: border-box;
	padding: $mod-space-12 $mod-space-14;
	border: 1px solid var(--modula-admin-border);
	border-radius: 6px;
	background: transparent;
}

.modula-settings-editor__settings-preview-sample {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--modula-admin-ink-muted);
	word-break: break-word;
}

.modula-settings-editor__settings-preview-footer {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--modula-admin-ink-muted);
}

.modula-settings-editor__deeplink-url-preview-url {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.45;
	word-break: break-all;
}

.modula-settings-editor__deeplink-url-preview-base {
	color: var(--modula-admin-ink-muted);
}

.modula-settings-editor__deeplink-url-preview-hash {
	color: var(--modula-admin-ink);
	font-weight: 600;
}

.modula-settings-editor__instagram-account-status {
	margin: 0 0 $mod-space-6;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--modula-admin-ink);
}

.modula-settings-editor__instagram-account-hint {
	margin: 0 0 $mod-space-10;
	font-size: 12px;
	line-height: 1.45;
	color: var(--modula-admin-ink-muted);
}

.modula-settings-panel__toggle-upsell {
	display: flex;
	flex-direction: column;
	gap: $mod-space-8;
	box-sizing: border-box;
	padding: $mod-space-12 $mod-se-gut;
	border-bottom: 1px solid var(--modula-admin-border-divider);
}

// Lite: a locked setting is its muted label and the dark PRO pill (canvas).
.modula-settings-panel__locked-row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: $mod-space-10;
	min-height: 52px;
	padding: $mod-space-10 $mod-se-gut;
}

// A locked single dependent row keeps the ↳ row's inset; the row's gap
// already spaces the ↳ from the label.
.modula-settings-panel__dependent-row .modula-settings-panel__locked-row {
	padding-inline-start: $mod-space-28;

	.modula-settings-panel__dependent-icon {
		margin-inline-end: 0;
	}
}

.modula-settings-panel__locked-row-label {
	flex-grow: 1;
	line-height: 1.35;
	color: var(--modula-admin-ink-muted);
}

// Lite upsell cards: a locked section's mini card, a locked tab's card.
.modula-lite-upsell {
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
	padding: $mod-se-gut;

	&.is-tab {
		gap: 16px;
		margin: $mod-space-8 $mod-se-gut 0;
		padding: 24px;
		border: 1px solid var(--modula-admin-border);
		border-radius: var(--modula-admin-radius-lg);
		background: var(--modula-admin-surface);
	}

	// A schema upsell (EditorUpsellBlurb): its row or section wrapper pads it.
	&.is-blurb {
		gap: 10px;
		padding: 0;
	}
}

.modula-lite-upsell__badge {
	display: flex;
}

.modula-lite-upsell__heading {
	margin: 0;
	font-size: var(--modula-admin-text-group-title);
	font-weight: 500;
	line-height: 1.35;
	color: var(--modula-admin-ink);
}

.modula-lite-upsell__title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--modula-admin-ink);
}

.modula-lite-upsell__message {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-line;
	color: var(--modula-admin-ink-soft);

	.is-tab & {
		font-size: 14.5px;
	}
}

.modula-lite-upsell__points {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.modula-lite-upsell__point {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--modula-admin-ink);
}

.modula-lite-upsell__check {
	display: flex;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--modula-admin-success);
}

.modula-lite-upsell__point-label {
	flex-grow: 1;
}

.modula-lite-upsell__point-tag {
	font-size: 12.5px;
	white-space: nowrap;
	color: var(--modula-admin-ink-muted);
}

.modula-lite-upsell__plan {
	font-size: 13.5px;
	color: var(--modula-admin-ink-secondary);
}

// The call to action, then the guarantee and the license key link under it.
.modula-lite-upsell__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;

	.is-section & {
		gap: 14px;
	}
}

.modula-lite-upsell__cta {
	justify-content: center;
	height: 40px;

	.is-tab & {
		height: 44px;
	}

	// Schema labels can be long: they wrap instead of overflowing.
	.is-blurb & {
		height: auto;
		min-height: 40px;
		white-space: normal;
		text-align: center;
	}
}

.modula-lite-upsell__guarantee {
	align-self: center;
	font-size: 13px;
	color: var(--modula-admin-ink-muted);
}

.modula-lite-upsell__license {
	align-self: center;
	padding: 4px;
	font-size: 14px;
	color: var(--modula-admin-ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;

	&:hover {
		color: var(--modula-admin-ink);
	}

	// admin-ui's focus ring.
	&:focus-visible {
		outline: 2px solid var(--modula-admin-ink);
		outline-offset: 2px;
	}
}