/**
 * ModelingLab Conference Suite — design tokens (premium pass).
 *
 * Identity: "lab notebook" — a faint millimetric grid texture and a graduated
 * measurement-rail motif (burette ticks) that marks progress through the
 * workflow. Typography inherits the theme (Open Sans on the live site) and
 * builds its character from weight contrast: 300-light numerals against
 * 700/800 labels, tabular figures for data. --mlc-accent is injected from
 * settings; every ramp derives from it via color-mix so the identity adapts
 * to any brand colour.
 */

.mlc-root,
.mlc-admin-wrap {
	/* Brand ramps */
	--mlc-accent: #2f7fd0;
	--mlc-accent-soft: color-mix(in srgb, var(--mlc-accent) 10%, transparent);
	--mlc-accent-softer: color-mix(in srgb, var(--mlc-accent) 5%, transparent);
	--mlc-accent-strong: color-mix(in srgb, var(--mlc-accent) 78%, #0c1a28 22%);
	--mlc-accent-deep: color-mix(in srgb, var(--mlc-accent) 55%, #0c1a28 45%);
	--mlc-grad: linear-gradient(135deg, var(--mlc-accent) 0%, var(--mlc-accent-strong) 100%);

	/* Ink & surfaces (cool, paper-like) */
	--mlc-bg: #f2f5f9;
	--mlc-surface: #ffffff;
	--mlc-surface-2: #f7fafd;
	--mlc-surface-3: #eef3f8;
	--mlc-border: #e2e9f1;
	--mlc-border-strong: #c9d5e2;
	--mlc-text: #1b2733;
	--mlc-text-soft: #57687a;
	--mlc-text-faint: #8a97a6;

	/* Status palette (PLAN §11) */
	--mlc-st-draft: #8b94a3;
	--mlc-st-submitted: #2f7fd0;
	--mlc-st-approved: #7c5cd6;
	--mlc-st-presented: #dd9f2f;
	--mlc-st-success: #219a67;
	--mlc-st-danger: #d64545;
	--mlc-success-soft: #e3f5ec;
	--mlc-danger-soft: #fdeaea;
	--mlc-warn-soft: #fcf2dd;

	/* Lab-notebook grid texture (kept below 5% so it reads as paper) */
	--mlc-grid-line: color-mix(in srgb, var(--mlc-accent) 5%, transparent);
	--mlc-grid: repeating-linear-gradient(0deg, var(--mlc-grid-line) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(90deg, var(--mlc-grid-line) 0 1px, transparent 1px 24px);

	/* Measurement-rail ticks (the signature motif) */
	--mlc-tick: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 7px);

	/* Shape & depth — layered, soft, never muddy */
	--mlc-radius: 14px;
	--mlc-radius-sm: 9px;
	--mlc-shadow-sm: 0 1px 2px rgba(16, 34, 53, .05);
	--mlc-shadow: 0 1px 2px rgba(16, 34, 53, .04), 0 4px 12px rgba(16, 34, 53, .05), 0 12px 32px rgba(16, 34, 53, .05);
	--mlc-shadow-lift: 0 2px 4px rgba(16, 34, 53, .06), 0 12px 28px rgba(16, 34, 53, .10), 0 28px 64px rgba(16, 34, 53, .10);
	--mlc-ring: 0 0 0 3px var(--mlc-accent-soft);

	/* Rhythm */
	--mlc-sp-1: 4px;
	--mlc-sp-2: 8px;
	--mlc-sp-3: 12px;
	--mlc-sp-4: 16px;
	--mlc-sp-5: 24px;
	--mlc-sp-6: 32px;
	--mlc-transition: 190ms cubic-bezier(.4, 0, .2, 1);

	/* Type scale — theme family, our voice */
	--mlc-fs-xs: 12px;
	--mlc-fs-sm: 13.5px;
	--mlc-fs-md: 15px;
	--mlc-fs-lg: 18px;
	--mlc-fs-xl: 24px;
	--mlc-fs-num: 30px;
	--mlc-track-wide: .12em;

	font-family: inherit;
	color: var(--mlc-text);
	box-sizing: border-box;
}

/* Fallbacks for browsers without color-mix. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.mlc-root,
	.mlc-admin-wrap {
		--mlc-accent-soft: rgba(47, 127, 208, .10);
		--mlc-accent-softer: rgba(47, 127, 208, .05);
		--mlc-accent-strong: #24639f;
		--mlc-accent-deep: #1c4c7a;
		--mlc-grid-line: rgba(47, 127, 208, .05);
	}
}

/* Dark theme — deep petroleum blue, not grey. */
.mlc-root[data-mlc-theme="dark"] {
	--mlc-bg: #0d141c;
	--mlc-surface: #16202c;
	--mlc-surface-2: #121b25;
	--mlc-surface-3: #1b2735;
	--mlc-border: #253547;
	--mlc-border-strong: #3a5069;
	--mlc-text: #e9eff6;
	--mlc-text-soft: #a4b3c3;
	--mlc-text-faint: #71818f;
	--mlc-success-soft: rgba(33, 154, 103, .16);
	--mlc-danger-soft: rgba(214, 69, 69, .16);
	--mlc-warn-soft: rgba(221, 159, 47, .14);
	--mlc-grid-line: rgba(122, 168, 214, .05);
	--mlc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
	--mlc-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .35), 0 16px 44px rgba(0, 0, 0, .35);
	--mlc-shadow-lift: 0 4px 10px rgba(0, 0, 0, .45), 0 22px 56px rgba(0, 0, 0, .5);
}

.mlc-root *,
.mlc-root *::before,
.mlc-root *::after,
.mlc-admin-wrap *,
.mlc-admin-wrap *::before,
.mlc-admin-wrap *::after {
	box-sizing: inherit;
}

/* Theme-native skin: inherit the host template and theme.json presets. */
.mlc-root.mlc-skin-theme {
	--mlc-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent-1, #2f7fd0));
	--mlc-bg: transparent;
	--mlc-surface: var(--wp--preset--color--base, #fff);
	--mlc-surface-2: color-mix(in srgb, currentColor 4%, transparent);
	--mlc-surface-3: color-mix(in srgb, currentColor 7%, transparent);
	--mlc-border: color-mix(in srgb, currentColor 16%, transparent);
	--mlc-border-strong: color-mix(in srgb, currentColor 28%, transparent);
	--mlc-text: currentColor;
	--mlc-text-soft: color-mix(in srgb, currentColor 70%, transparent);
	--mlc-text-faint: color-mix(in srgb, currentColor 52%, transparent);
	--mlc-radius: var(--wp--custom--border-radius--medium, 14px);
	font: inherit;
	color: inherit;
}

.mlc-root.mlc-layout-inherit { width: 100%; max-width: none; }
.mlc-root.mlc-layout-contained { width: min(100%, var(--wp--style--global--content-size, 1160px)); margin-inline: auto; }
.mlc-root.mlc-layout-wide { width: min(100%, var(--wp--style--global--wide-size, 1400px)); margin-inline: auto; }
.mlc-root.mlc-layout-full { position: relative; left: 50%; width: 100vw; max-width: none; margin-left: -50vw; padding-inline: max(16px, calc((100vw - var(--wp--style--global--wide-size, 1400px)) / 2)); }

.mlc-root .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Voice utilities ---- */

.mlc-root .mlc-eyebrow,
.mlc-admin-wrap .mlc-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: var(--mlc-track-wide);
	text-transform: uppercase;
	color: var(--mlc-accent-strong);
	margin: 0 0 4px;
}

.mlc-root .mlc-num {
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

/* ---- Shared atoms ---- */

.mlc-root .mlc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--mlc-radius-sm);
	border: 1px solid var(--mlc-border-strong);
	background: var(--mlc-surface);
	color: var(--mlc-text);
	font: inherit;
	font-size: var(--mlc-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--mlc-shadow-sm);
	transition: background var(--mlc-transition), box-shadow var(--mlc-transition), transform var(--mlc-transition), border-color var(--mlc-transition), color var(--mlc-transition);
}
.mlc-root .mlc-btn:hover { border-color: var(--mlc-accent); color: var(--mlc-accent-strong); text-decoration: none; transform: translateY(-1px); box-shadow: var(--mlc-shadow); }
.mlc-root .mlc-btn:active { transform: translateY(0); box-shadow: var(--mlc-shadow-sm); }
.mlc-root .mlc-btn:focus-visible { outline: none; box-shadow: var(--mlc-ring), var(--mlc-shadow-sm); border-color: var(--mlc-accent); }
.mlc-root .mlc-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.mlc-root .mlc-btn-primary {
	background: var(--mlc-grad);
	border-color: var(--mlc-accent-strong);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 6px color-mix(in srgb, var(--mlc-accent) 34%, transparent);
}
.mlc-root .mlc-btn-primary:hover {
	background: linear-gradient(135deg, var(--mlc-accent-strong) 0%, var(--mlc-accent-deep) 100%);
	border-color: var(--mlc-accent-deep);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px color-mix(in srgb, var(--mlc-accent) 42%, transparent);
}

.mlc-root .mlc-btn-danger { background: var(--mlc-st-danger); border-color: var(--mlc-st-danger); color: #fff; }
.mlc-root .mlc-btn-danger:hover { background: #b93636; border-color: #b93636; color: #fff; }
.mlc-root .mlc-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--mlc-accent-strong); }
.mlc-root .mlc-btn-sm { padding: 5px 11px; font-size: var(--mlc-fs-xs); }
.mlc-root .mlc-btn-block { width: 100%; }

.mlc-root .mlc-input,
.mlc-root select.mlc-input,
.mlc-root textarea.mlc-input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--mlc-border-strong);
	border-radius: var(--mlc-radius-sm);
	background: var(--mlc-surface);
	color: var(--mlc-text);
	font: inherit;
	font-size: var(--mlc-fs-sm);
	line-height: 1.4;
	box-shadow: inset 0 1px 2px rgba(16, 34, 53, .04);
	transition: border-color var(--mlc-transition), box-shadow var(--mlc-transition);
}
.mlc-root .mlc-input:focus {
	outline: none;
	border-color: var(--mlc-accent);
	box-shadow: var(--mlc-ring), inset 0 1px 2px rgba(16, 34, 53, .04);
}
.mlc-root .mlc-input[aria-invalid="true"] { border-color: var(--mlc-st-danger); }
.mlc-root .mlc-input::placeholder { color: var(--mlc-text-faint); }

.mlc-root .mlc-card {
	background: var(--mlc-surface);
	border: 1px solid var(--mlc-border);
	border-radius: var(--mlc-radius);
	box-shadow: var(--mlc-shadow);
}
.mlc-root .mlc-card-pad { padding: var(--mlc-sp-5); }

.mlc-root .mlc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2.5px 10px;
	border-radius: 999px;
	font-size: var(--mlc-fs-xs);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.6;
	background: var(--mlc-accent-soft);
	color: var(--mlc-accent-strong);
	vertical-align: middle;
	white-space: nowrap;
}
.mlc-root .mlc-badge-success { background: var(--mlc-success-soft); color: var(--mlc-st-success); }
.mlc-root .mlc-badge-danger { background: var(--mlc-danger-soft); color: var(--mlc-st-danger); }
.mlc-root .mlc-badge-warn { background: var(--mlc-warn-soft); color: #9c6d10; }
.mlc-root .mlc-badge-muted { background: var(--mlc-surface-2); color: var(--mlc-text-faint); border: 1px solid var(--mlc-border); }

.mlc-root .mlc-chip {
	display: inline-block;
	padding: 3px 10px;
	margin: 2px 4px 2px 0;
	border-radius: 999px;
	border: 1px solid var(--mlc-border);
	background: var(--mlc-surface-2);
	color: var(--mlc-text-soft);
	font-size: var(--mlc-fs-xs);
	font-weight: 600;
}
.mlc-root .mlc-chip-accent { background: var(--mlc-accent-soft); color: var(--mlc-accent-strong); border-color: transparent; }
.mlc-root .mlc-chip-gold { background: var(--mlc-warn-soft); color: #9c6d10; border-color: transparent; }

.mlc-root .mlc-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--mlc-accent-soft);
	border-top-color: var(--mlc-accent);
	border-radius: 50%;
	animation: mlc-spin .7s linear infinite;
	vertical-align: -3px;
}
@keyframes mlc-spin { to { transform: rotate(360deg); } }

.mlc-root .mlc-skel,
.mlc-admin-wrap .mlc-skel {
	position: relative;
	overflow: hidden;
	background: var(--mlc-surface-2);
	border-radius: var(--mlc-radius-sm);
	min-height: 18px;
}
.mlc-root .mlc-skel::after,
.mlc-admin-wrap .mlc-skel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: translateX(-100%);
	animation: mlc-shimmer 1.3s infinite;
}
.mlc-root[data-mlc-theme="dark"] .mlc-skel::after {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
}
@keyframes mlc-shimmer { to { transform: translateX(100%); } }

.mlc-root .mlc-empty {
	color: var(--mlc-text-faint);
	text-align: center;
	padding: var(--mlc-sp-6) var(--mlc-sp-4);
	font-size: var(--mlc-fs-sm);
}

.mlc-root .mlc-banner {
	padding: 10px 16px;
	border-radius: var(--mlc-radius-sm);
	margin-bottom: var(--mlc-sp-4);
	font-size: var(--mlc-fs-sm);
	font-weight: 600;
}
.mlc-root .mlc-banner-warn { background: var(--mlc-warn-soft); color: #8a6011; }
.mlc-root .mlc-banner-danger { background: var(--mlc-danger-soft); color: var(--mlc-st-danger); }

.mlc-root .mlc-linklike {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: var(--mlc-fs-sm);
	color: var(--mlc-accent-strong);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Entrance choreography — new view content rises in once, quietly. */
@keyframes mlc-rise {
	from { opacity: 0; transform: translateY(7px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Visually hidden honeypot */
.mlc-root .mlc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.mlc-root *, .mlc-admin-wrap * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}