/* StoryCodex MVC front-end — theme + responsive shell.
   Dark-first palette layered over Bootstrap 5 CSS variables, the Inter typeface, and an app shell
   (sticky frosted app bar + offcanvas sidebar) that collapses to a drawer on tablets/phones. */

/* ----- Palette ------------------------------------------------------------------ */
:root {
	--bs-primary: #5B4BD6;
	--bs-primary-rgb: 91, 75, 214;
	--bs-secondary: #5A5B73;
	--bs-secondary-rgb: 90, 91, 115;
	--bs-success: #16A34A;
	--bs-success-rgb: 22, 163, 74;
	--bs-info: #3B82F6;
	--bs-info-rgb: 59, 130, 246;
	--bs-warning: #F59E0B;
	--bs-warning-rgb: 245, 158, 11;
	--bs-danger: #EF4444;
	--bs-danger-rgb: 239, 68, 68;
	--sc-tertiary: #E0457B;
	--bs-link-color: #5B4BD6;
	--bs-link-hover-color: #4536b8;
	--bs-border-radius: 0.6rem;
	--sc-surface: #ffffff;
	--sc-surface-2: #f1f2f8;
	--sc-border: rgba(20, 22, 40, 0.12);
	--sc-appbar-bg: rgba(255, 255, 255, 0.78);
	--sc-nav-active-bg: rgba(91, 75, 214, 0.12);
	--bs-body-bg: #f6f7fb;
	--bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-bs-theme="dark"] {
	--bs-primary: #7C6BFF;
	--bs-primary-rgb: 124, 107, 255;
	--bs-secondary: #8B8CA7;
	--bs-secondary-rgb: 139, 140, 167;
	--bs-success: #34D399;
	--bs-success-rgb: 52, 211, 153;
	--bs-info: #60A5FA;
	--bs-info-rgb: 96, 165, 250;
	--bs-warning: #FBBF24;
	--bs-warning-rgb: 251, 191, 36;
	--bs-danger: #F87171;
	--bs-danger-rgb: 248, 113, 113;
	--sc-tertiary: #FF6FA3;
	--bs-link-color: #9b8dff;
	--bs-link-hover-color: #b3a8ff;
	--sc-surface: #161826;
	--sc-surface-2: #1e2133;
	--sc-border: rgba(255, 255, 255, 0.10);
	--sc-appbar-bg: rgba(14, 15, 26, 0.72);
	--sc-nav-active-bg: rgba(124, 107, 255, 0.18);
	--bs-body-bg: #0E0F1A;
	--bs-body-color: #e6e7ef;
	--bs-secondary-color: rgba(230, 231, 239, 0.65);
	--bs-emphasis-color: #ffffff;

}

html {
	font-size: 15px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

/* Hide Alpine-controlled regions until Alpine initialises (avoids a flash of the hidden content). */
[x-cloak] {
	display: none !important;
}

body {
	font-family: var(--bs-body-font-family);
}

.text-tertiary {
	color: var(--sc-tertiary) !important;
}

.sc-hero-logo {
	display: block;
}

.sc-wordmark {
	font-weight: 700;
	letter-spacing: -0.01em;
}

a {
	text-decoration: none;
}

	a:hover {
		text-decoration: underline;
	}
	/* Anchors styled as buttons never underline (Bootstrap sets none; the a:hover rule above would re-add it). */
	a.btn,
	a.btn:hover {
		text-decoration: none;
	}

/* The logo in the app-bar. */
.sc-appbar-logo {
	width: 1.5rem;
	height: 1.5rem;
}

/* ----- Buttons (MudBlazor-derived palette) --------------------------------------
   Bootstrap's .btn-* classes hard-code their own --bs-btn-bg (e.g. #0d6efd) rather than
   reading --bs-primary, so the theme palette alone leaves them stock-blue/green/etc. Drive
   each variant's button variables from the semantic tokens above; hover/active shades are
   derived with color-mix so they track the per-theme colour automatically. */
.btn-primary {
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, #000);
	--bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, #000);
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #fff;
}

.btn-success {
	--bs-btn-bg: var(--bs-success);
	--bs-btn-border-color: var(--bs-success);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 88%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 85%, #000);
	--bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 78%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 75%, #000);
	--bs-btn-disabled-bg: var(--bs-success);
	--bs-btn-disabled-border-color: var(--bs-success);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #fff;
}

.btn-info {
	--bs-btn-bg: var(--bs-info);
	--bs-btn-border-color: var(--bs-info);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 88%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 85%, #000);
	--bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 78%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 75%, #000);
	--bs-btn-disabled-bg: var(--bs-info);
	--bs-btn-disabled-border-color: var(--bs-info);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #fff;
}

.btn-warning {
	--bs-btn-bg: var(--bs-warning);
	--bs-btn-border-color: var(--bs-warning);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 88%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 85%, #000);
	--bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 78%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 75%, #000);
	--bs-btn-disabled-bg: var(--bs-warning);
	--bs-btn-disabled-border-color: var(--bs-warning);
	--bs-btn-color: #000;
	--bs-btn-hover-color: #000;
	--bs-btn-active-color: #000;
	--bs-btn-disabled-color: #000;
}

.btn-danger {
	--bs-btn-bg: var(--bs-danger);
	--bs-btn-border-color: var(--bs-danger);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 88%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 85%, #000);
	--bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 78%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 75%, #000);
	--bs-btn-disabled-bg: var(--bs-danger);
	--bs-btn-disabled-border-color: var(--bs-danger);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #fff;
}

/* Outline buttons: the colour fills on hover/active (and on a checked btn-check, e.g. the
   build-sheet "pick existing / create new" toggle). */
.btn-outline-primary {
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: var(--bs-primary);
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-secondary {
	--bs-btn-color: var(--bs-secondary);
	--bs-btn-border-color: var(--bs-secondary);
	--bs-btn-hover-bg: var(--bs-secondary);
	--bs-btn-hover-border-color: var(--bs-secondary);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--bs-secondary);
	--bs-btn-active-border-color: var(--bs-secondary);
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: var(--bs-secondary);
	--bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-danger {
	--bs-btn-color: var(--bs-danger);
	--bs-btn-border-color: var(--bs-danger);
	--bs-btn-hover-bg: var(--bs-danger);
	--bs-btn-hover-border-color: var(--bs-danger);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--bs-danger);
	--bs-btn-active-border-color: var(--bs-danger);
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: var(--bs-danger);
	--bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-outline-success {
	--bs-btn-color: var(--bs-success);
	--bs-btn-border-color: var(--bs-success);
	--bs-btn-hover-bg: var(--bs-success);
	--bs-btn-hover-border-color: var(--bs-success);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--bs-success);
	--bs-btn-active-border-color: var(--bs-success);
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: var(--bs-success);
	--bs-btn-disabled-border-color: var(--bs-success);
}

.text-small {
	font-size:.7em;
}

/* ----- Toasts -------------------------------------------------------------------- */
/* Bootstrap's .text-bg-* utilities bake in a white foreground (color-contrast against
   its darker default theme colours), but our dark palette overrides those backgrounds to
   light pastels (e.g. --bs-success becomes mint). White text then fails contrast on the
   light toast, so force dark text + a dark close button on the light variants for WCAG-AA
   readability. The grey secondary fallback isn't overridden, so it keeps its light text. */
[data-bs-theme="dark"] .toast.text-bg-success,
[data-bs-theme="dark"] .toast.text-bg-primary,
[data-bs-theme="dark"] .toast.text-bg-warning,
[data-bs-theme="dark"] .toast.text-bg-danger {
	color: #000 !important;
}

	[data-bs-theme="dark"] .toast.text-bg-success .btn-close,
	[data-bs-theme="dark"] .toast.text-bg-primary .btn-close,
	[data-bs-theme="dark"] .toast.text-bg-warning .btn-close,
	[data-bs-theme="dark"] .toast.text-bg-danger .btn-close {
		filter: none; /* undo .btn-close-white so the × reads dark on the light background */
	}

/* ----- Badges -------------------------------------------------------------------- */
/* Same root cause as the toasts above: Bootstrap bakes color:#fff into .text-bg-success /
   .text-bg-danger, but our dark palette re-tints --bs-success to a light mint and
   --bs-danger to a light salmon, so the white text fails contrast. Force dark text on
   these light-background variants for AA readability. */
[data-bs-theme="dark"] .badge.text-bg-success,
[data-bs-theme="dark"] .badge.text-bg-danger {
	color: #000 !important;
}

/* Inverse case in light mode: Bootstrap bakes color:#000 into .text-bg-info, which reads
   muddy on light mode's saturated --bs-info blue — white is cleaner. Dark mode uses a lighter
   info blue where the baked black reads well, so this is light mode only. */
[data-bs-theme="light"] .badge.text-bg-info {
	color: #fff !important;
}

/* ----- Text utilities ------------------------------------------------------------ */
/* .text-warning renders --bs-warning (amber) as a text colour. In light mode that amber is
   too pale against the near-white background, so darken it in light mode only — dark mode's
   brighter amber on the dark background already reads well. Scoped to the utility (not the
   --bs-warning token) so warning badges/borders/buttons keep their amber. */
[data-bs-theme="light"] .text-warning {
	color: #B45309 !important;
}

/* ----- App shell ---------------------------------------------------------------- */
.sc-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sc-appbar {
	position: sticky;
	top: 0;
	z-index: 1035;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 58px;
	padding: 0 0.75rem;
	background: var(--sc-appbar-bg);
	backdrop-filter: saturate(150%) blur(12px);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid var(--sc-border);
}

.sc-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--bs-emphasis-color);
}

	.sc-brand:hover {
		text-decoration: none;
	}

	.sc-brand .bi {
		color: var(--bs-primary);
		font-size: 1.25rem;
	}

@media (max-width: 420px) {
	.sc-brand-text {
		display: none;
	}
}

.sc-collection-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 14rem;
	margin-left: 0.5rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--sc-border);
	border-radius: 2rem;
	background: var(--sc-surface);
	color: var(--bs-body-color);
	font-size: 0.85rem;
}

	.sc-collection-pill:hover {
		text-decoration: none;
		border-color: var(--bs-primary);
	}

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 0.5rem;
	color: var(--bs-body-color);
}

	.btn-icon:hover {
		background: var(--sc-surface-2);
	}

.sc-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: var(--bs-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.8rem;
}

.sc-body {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.sc-sidebar {
	--bs-offcanvas-width: 264px;
	width: 264px;
	flex-shrink: 0;
	border-right: 1px solid var(--sc-border);
	background: var(--bs-body-bg);
}

@media (min-width: 992px) {
	.sc-sidebar {
		position: sticky;
		top: 58px;
		height: calc(100vh - 58px);
		overflow-y: auto;
	}
}

.sc-sidebar-body {
	padding: 0.75rem;
}

.sc-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.sc-content {
	flex: 1 1 auto;
	padding: 1.5rem;
}

@media (max-width: 575px) {
	.sc-content {
		padding: 1rem;
	}
}

/* ----- Navigation --------------------------------------------------------------- */
.sc-nav {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.sc-nav-link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0.7rem;
	border-radius: 0.55rem;
	color: var(--bs-body-color);
	font-size: 0.92rem;
}

	.sc-nav-link:hover {
		background: var(--sc-surface-2);
		text-decoration: none;
	}

	.sc-nav-link.active {
		background: var(--sc-nav-active-bg);
		color: var(--bs-primary);
		font-weight: 600;
	}

	.sc-nav-link .bi {
		font-size: 1.05rem;
		width: 1.2rem;
		text-align: center;
	}

.sc-nav-group {
	margin: 0.9rem 0.7rem 0.25rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
}

.sc-nav-hint {
	padding: 0.75rem 0.7rem;
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
}

.sc-nav-divider {
	margin: 0.75rem 0.3rem;
	border-color: var(--sc-border);
}

/* ----- Footer ------------------------------------------------------------------- */
.sc-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--sc-border);
	color: var(--bs-secondary-color);
	font-size: 0.85rem;
}

.sc-footer-links {
	display: flex;
	gap: 1rem;
}

/* ----- Cards / surfaces --------------------------------------------------------- */
.sc-card {
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--bs-border-radius);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

	.sc-card:hover {
		border-color: rgba(var(--bs-primary-rgb), 0.6);
	}

.sc-page-header {
	margin-bottom: 1.25rem;
}

	.sc-page-header h1 {
		font-size: 1.6rem;
		font-weight: 700;
		margin-bottom: 0.15rem;
	}

.sc-page-subtitle {
	color: var(--bs-secondary-color);
	margin: 0;
}

.sc-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ----- Tables ------------------------------------------------------------------- */
.sc-table {
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--bs-border-radius);
	overflow: hidden;
}

	.sc-table .table {
		margin-bottom: 0;
	}

	.sc-table thead th {
		background: var(--sc-surface-2);
		font-weight: 600;
		font-size: 0.82rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	.sc-table tbody tr:last-child td {
		border-bottom: 0;
	}

.sc-actions {
	text-align: right;
	white-space: nowrap;
}

/* ----- Grade / rarity colour badge ---------------------------------------------- */
.sc-color-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.6rem;
	border-radius: 1rem;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	/* Dark-first default. BadgeTagHelper emits both theme colour pairs as custom properties; this rule uses the
	   dark pair and the [data-bs-theme="light"] rule below swaps to the light pair. Falls back to a neutral surface. */
	background: var(--sc-badge-bg-dark, var(--sc-surface-2));
	color: var(--sc-badge-fg-dark, inherit);
}

[data-bs-theme="light"] .sc-color-badge {
	/* Light theme: use the light pair, falling back to the dark pair (mirror-dark) then a neutral surface. */
	background: var(--sc-badge-bg-light, var(--sc-badge-bg-dark, var(--sc-surface-2)));
	color: var(--sc-badge-fg-light, var(--sc-badge-fg-dark, inherit));
}

/* ----- Rich text ---------------------------------------------------------------- */
.sc-rich-text :first-child {
	margin-top: 0;
}

.sc-rich-text :last-child {
	margin-bottom: 0;
}

/* Trumbowyg ships a light skin; re-skin it for dark mode so the editor meshes with the theme. */
[data-bs-theme="dark"] .trumbowyg-box,
[data-bs-theme="dark"] .trumbowyg-editor {
	background: var(--sc-surface);
	color: var(--bs-body-color);
	border-color: var(--sc-border);
}

	[data-bs-theme="dark"] .trumbowyg-box.trumbowyg-fullscreen {
		background: var(--bs-body-bg);
	}

	[data-bs-theme="dark"] .trumbowyg-editor[contenteditable="true"]:empty::before {
		color: var(--bs-secondary-color);
	}

[data-bs-theme="dark"] .trumbowyg-button-pane {
	background: var(--sc-surface-2);
	border-bottom-color: var(--sc-border);
}

	[data-bs-theme="dark"] .trumbowyg-button-pane::after {
		background: var(--sc-border);
	}

	[data-bs-theme="dark"] .trumbowyg-button-pane .trumbowyg-button-group::after {
		background: var(--sc-border);
	}
	/* The toolbar icons are a dark monochrome sprite; invert them to read on the dark toolbar. */
	[data-bs-theme="dark"] .trumbowyg-button-pane button svg {
		filter: invert(0.9);
	}

[data-bs-theme="dark"] .trumbowyg button:not(.trumbowyg-disable):hover,
[data-bs-theme="dark"] .trumbowyg button:not(.trumbowyg-disable):focus {
	background-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .trumbowyg button.trumbowyg-active,
[data-bs-theme="dark"] .trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-active:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

[data-bs-theme="dark"] .trumbowyg-dropdown {
	background: var(--sc-surface);
	border-color: var(--sc-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

	[data-bs-theme="dark"] .trumbowyg-dropdown button {
		background: var(--sc-surface);
		color: var(--bs-body-color);
	}

		[data-bs-theme="dark"] .trumbowyg-dropdown button svg {
			filter: invert(0.9);
		}

		[data-bs-theme="dark"] .trumbowyg-dropdown button:hover,
		[data-bs-theme="dark"] .trumbowyg-dropdown button:focus {
			background: var(--sc-surface-2);
		}

[data-bs-theme="dark"] .trumbowyg-modal-box {
	background: var(--sc-surface);
	color: var(--bs-body-color);
}

	[data-bs-theme="dark"] .trumbowyg-modal-box .trumbowyg-modal-title {
		background: var(--sc-surface-2);
		color: var(--bs-body-color);
		border-bottom-color: var(--sc-border);
	}

	[data-bs-theme="dark"] .trumbowyg-modal-box input {
		background: var(--bs-body-bg);
		color: var(--bs-body-color);
		border-color: var(--sc-border);
	}

	[data-bs-theme="dark"] .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
		color: var(--bs-body-color);
	}

/* ----- Getting Started checklist ------------------------------------------------ */
.sc-checklist {
	display: flex;
	flex-direction: column;
}

.sc-checklist-row {
	padding: 0.5rem 0.5rem;
	border-radius: 0.5rem;
	color: var(--bs-body-color);
}

	.sc-checklist-row:hover {
		background: var(--sc-surface-2);
	}

/* ----- Build sheet / stat sheet ------------------------------------------------- */
.sc-resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.6rem;
}

.sc-resource-card {
	background: var(--sc-surface-2);
	border: 1px solid var(--sc-border);
	border-left: 3px solid var(--bs-primary);
	border-radius: 0.5rem;
	padding: 0.5rem 0.7rem;
}

.sc-resource-card-special {
	border-left-color: #b07cff;
}

.sc-resource-label {
	font-size: 0.72rem;
	color: var(--bs-secondary-color);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.sc-resource-value {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

.sc-stat-head {
	display: flex;
	align-items: center;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bs-secondary-color);
}

.sc-stat-head-spacer {
	flex: 1 1 auto;
}

.sc-stat-col {
	width: 4.5rem;
	text-align: right;
}

.sc-stat-line {
	display: flex;
	align-items: baseline;
}

.sc-stat-line-name {
	flex: 1 1 auto;
	font-size: 0.9rem;
}

.sc-stat-num {
	width: 4.5rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sc-stat-num-pre {
	color: var(--bs-secondary-color);
}

.sc-stat-num-total {
	font-weight: 700;
}

.sc-stat-breakdown {
	word-break: break-word;
}

@media (min-width: 992px) {
	.sc-build-sheet-sticky {
		position: sticky;
		top: 72px;
	}
}

/* ----- Empty state -------------------------------------------------------------- */
.sc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 3rem 1.5rem;
	color: var(--bs-secondary-color);
	background: var(--sc-surface);
	border: 1px dashed var(--sc-border);
	border-radius: var(--bs-border-radius);
}

	.sc-empty .bi {
		font-size: 2rem;
		margin-bottom: 0.5rem;
	}

/* ----- Public (marketing / auth) shell ------------------------------------------ */
.sc-public-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sc-public-header {
	display: flex;
	align-items: center;
	padding: 1rem 1.5rem;
}

.sc-public-main {
	flex: 1 1 auto;
}

.sc-hero {
	max-width: 56rem;
	margin: 0 auto;
	padding: 4rem 1.5rem;
	text-align: center;
}

	.sc-hero h1 {
		font-size: clamp(2rem, 5vw, 3.2rem);
		font-weight: 700;
		line-height: 1.1;
	}

	.sc-hero p.lead {
		color: var(--bs-secondary-color);
		max-width: 38rem;
		margin: 1rem auto 2rem;
	}

.sc-feature-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.sc-auth-card {
	max-width: 25rem;
	margin: 3rem auto;
}

/* ----- Cookie consent banner ---------------------------------------------------- */
.sc-cookie-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1080;
	padding: 0.75rem 1rem;
	background: var(--sc-surface);
	border-top: 1px solid var(--sc-border);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}

	.sc-cookie-consent[hidden] {
		display: none;
	}

.sc-cookie-consent-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	max-width: 70rem;
	margin: 0 auto;
}

.sc-cookie-consent-text {
	font-size: 0.85rem;
	color: var(--bs-body-color);
	flex: 1 1 18rem;
}

.sc-cookie-consent-actions {
	display: flex;
	gap: 0.5rem;
}

/* ----- Modal polish ------------------------------------------------------------- */
.modal-content {
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
}

/* Our form partials wrap .modal-body + .modal-footer in a <form>, so that <form> — not the body/
   footer — is the flex child of .modal-content. That extra block defeats .modal-dialog-scrollable:
   the body never gets a bounded height, so a tall form overflows and .modal-content's overflow:hidden
   clips the footer (the Save button) off-screen on short viewports (e.g. an iPad). Make the <form>
   itself the flex column so .modal-body scrolls and the header/footer stay pinned on screen. */
#sc-modal-content > form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0; /* let the form shrink below its content height so the body can scroll */
	overflow: hidden;
}

@media (max-width: 575px) {
	.modal-dialog {
		margin: 0;
		min-height: 100%;
	}

	.modal-dialog-centered {
		align-items: stretch;
	}

	.modal-content {
		border-radius: 0;
		min-height: 100vh;
	}
}

/* ----- reCAPTCHA ---------------------------------------------------------------- */
/* Hide the floating v3 badge — the Contact form shows the required text disclosure instead (Google ToS). */
.grecaptcha-badge {
	visibility: hidden;
}