/* 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 these .text-bg-* variants,
   but our dark palette re-tints their backgrounds to lighter colours (mint success, salmon danger,
   lilac primary, grey secondary), so the white text fails contrast. Force dark text on the badges
   for AA readability. (info/warning already bake #000, so they're not in this list.) */
[data-bs-theme="dark"] .badge.text-bg-success,
[data-bs-theme="dark"] .badge.text-bg-danger,
[data-bs-theme="dark"] .badge.text-bg-primary,
[data-bs-theme="dark"] .badge.text-bg-secondary {
	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;
	}

/* Below md the app bar has no room for the wordmark: the hamburger + logo + collection pill + search /
   theme / avatar already fill a phone's width, and the overflow made Chrome shrink-to-fit the whole
   page. Show the logo alone and let the pill (min-width: 0, above) truncate. Scoped to .sc-appbar so
   the public shell's header — which carries the same .sc-brand-text but only a Sign in / Sign up
   beside it — keeps the wordmark on phones, where it's the marketing front door's branding. */
@media (max-width: 767.98px) {
	.sc-appbar .sc-brand-text {
		display: none;
	}
}

.sc-collection-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 14rem;
	min-width: 0; /* let the pill shrink so its text-truncate span can ellipsis instead of widening the app bar */
	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;
}

/* Character avatar circle — an uploaded image or the character's initials (list rows + detail header). */
.sc-char-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--bs-primary);
	color: #fff;
	font-weight: 600;
	line-height: 1;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
}

	.sc-char-avatar img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.sc-char-avatar-sm {
	width: 36px;
	height: 36px;
	font-size: 0.8rem;
}

.sc-char-avatar-lg {
	width: 64px;
	height: 64px;
	font-size: 1.5rem;
}

/* Clickable header avatar: a button revealing a camera "edit" overlay on hover/focus. */
button.sc-char-avatar-button {
	padding: 0;
	border: 0;
	cursor: pointer;
	appearance: none;
}

.sc-char-avatar-edit {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 1rem;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}

.sc-char-avatar-button:hover .sc-char-avatar-edit,
.sc-char-avatar-button:focus-visible .sc-char-avatar-edit {
	opacity: 1;
}

/* Avatar crop stage (Cropper.js) — bound the height so a large image fits the modal, and round the crop
   preview so it hints the circular avatar the square becomes. */
.sc-avatar-crop {
	margin-inline: auto;
}

#sc-avatar-crop-image {
	display: block;
	max-width: 100%;
	max-height: 320px;
}

.sc-avatar-crop .cropper-view-box,
.sc-avatar-crop .cropper-face {
	border-radius: 50%;
}

.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);
}

/* A collapsible group's header is a button, so it resets the button chrome but keeps the .sc-nav-group label
   look. No width is set: .sc-nav is a flex column, so it already stretches to the sidebar minus its margins. */
.sc-nav-group-toggle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	background: none;
	border: 0;
	text-align: left;
}

	.sc-nav-group-toggle:hover {
		color: var(--bs-body-color);
	}

.sc-nav-chevron {
	font-size: 0.7rem;
	transition: transform 0.15s ease;
}

	.sc-nav-chevron.sc-nav-chevron-open {
		transform: rotate(90deg);
	}

/* Links are nested inside a section now, so the gap lives here rather than only on .sc-nav. */
.sc-nav-section-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.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);
	}

/* Collection setup hub (/setup) — a card per reference-data page. The card is a link, so it opts out of the
   link colour and lets the icon carry the accent; .sc-card:hover supplies the affordance. */
.sc-setup-card {
	color: inherit;
}

/* Recent-activity feed (dashboard) — divider-separated rows with a hover affordance. */
.sc-activity-feed > li + li {
	border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.sc-activity-item {
	color: inherit;
	border-radius: var(--bs-border-radius);
	transition: background-color 0.12s ease;
}

	.sc-activity-item:hover {
		background-color: var(--sc-surface-2);
	}

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

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

/* Build sheet (progression detail): on desktop (≥ lg, where the two-column
   layout lives), keep the back/prev/next row + page header pinned below the app
   bar as the page scrolls, with the same frosted translucency as the app bar
   (--sc-appbar-bg + backdrop blur) so scrolling content shows through softly.
   The top padding (offset by the negative margin so the initial layout is
   unchanged) gives breathing room when stuck; JS on the page publishes this
   bar's height into --sc-bsheet-header-h so the sticky stat sheet clears it.
   Below lg the columns stack, so the wrapper is a plain (non-sticky) block. */
@media (min-width: 992px) {
	.sc-build-sheet-header {
		position: sticky;
		top: 58px;
		z-index: 1020;
		background: var(--sc-appbar-bg);
		backdrop-filter: saturate(150%) blur(12px);
		-webkit-backdrop-filter: saturate(150%) blur(12px);
		padding-top: 0.75rem;
		margin-top: -0.75rem;
		padding-bottom: 0.75rem;
		margin-bottom: 1.25rem;
		border-bottom: 1px solid var(--sc-border);
	}

		.sc-build-sheet-header .sc-page-header {
			margin-bottom: 0;
		}
}

.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-table tfoot td {
		background: var(--sc-surface-2);
		font-weight: 400;
		font-size: 0.82rem;
		letter-spacing: 0.03em;
		/* The last tbody row has its border-bottom zeroed above, so draw the divider on
		   the footer's top edge — mirrors how thead th gets its bottom border from
		   Bootstrap (same width/colour vars, so it tracks the light/dark theme). */
		border-top: var(--bs-border-width) solid var(--bs-border-color);
		border-bottom: 0;
	}

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

/* Drag-to-reorder grids (SortableJS) — a narrow grip-handle column before the first data column. */
.sc-drag-col {
	width: 2.25rem;
	text-align: center;
	padding-left: 0.35rem;
	padding-right: 0.35rem;
}

.sc-drag-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bs-secondary-color);
	cursor: grab;
	line-height: 1;
	/* Let SortableJS own the touch drag gesture instead of the browser scrolling the page. */
	touch-action: none;
}

	.sc-drag-handle:hover {
		color: var(--bs-body-color);
	}

	.sc-drag-handle:active {
		cursor: grabbing;
	}

/* The placeholder gap left where the dragged row will drop, and the row being dragged. */
.sc-sortable-ghost {
	opacity: 0.5;
	background: var(--sc-surface-2);
}

.sc-sortable-chosen {
	background: var(--sc-surface-2);
}

/* Inline-edit inputs inside a grid (the build sheet's Free Points values): Bootstrap's light-mode
   --bs-border-color (#dee2e6) barely separates the textbox from the table surface, so darken the
   border in light mode only — dark mode's border already contrasts well against the dark rows. */
[data-bs-theme="light"] .sc-inline-value {
	border-color: var(--bs-gray-500, #adb5bd);
}

/* ----- 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));
}

.sc-color-badge-outlined {
	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. */
	border-width: thin;
	border-style: solid;
	border-color: var(--sc-badge-bg-dark, var(--sc-surface-2));
	color: var(--sc-badge-fg-dark, inherit);
}

[data-bs-theme="light"] .sc-color-badge-outlined {
	/* Light theme: use the light pair, falling back to the dark pair (mirror-dark) then a neutral surface. */
	border-color: 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));
}

/* ----- Tag chips ---------------------------------------------------------------- */
/* A tag's colour is applied inline (background + a contrast-derived text colour) by TagColors.ChipStyle; this
   class supplies the shape + the neutral fallback when a tag has no colour. */
.sc-tag-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1rem 0.55rem;
	border-radius: 1rem;
	border: 1px solid var(--bs-border-color);
	background: var(--sc-surface-2);
	color: var(--bs-body-color);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
}

.sc-tag-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: center;
}

/* The "manage tags" affordance rendered alongside a record's chips. */
.sc-tag-manage-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.05rem 0.45rem;
	border-radius: 1rem;
	border: 1px dashed var(--bs-border-color);
	background: transparent;
	color: var(--bs-secondary-color);
	font-size: 0.72rem;
	line-height: 1.35;
}

	.sc-tag-manage-btn:hover {
		border-color: var(--bs-primary);
		color: var(--bs-primary);
	}

/* The manage-tags modal checklist. */
.sc-tag-checklist {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	max-height: 45vh;
	overflow-y: auto;
}

.sc-tag-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	margin: 0;
}

	.sc-tag-check input {
		flex: 0 0 auto;
	}

/* ----- Change history (revision log) -------------------------------------------- */
.sc-revision-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sc-revision {
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	overflow: hidden;
}

.sc-revision-head {
	padding: 0.4rem 0.75rem;
	background: var(--sc-surface-2);
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.sc-revision-body {
	padding: 0.6rem 0.75rem;
	max-height: 14rem;
	overflow-y: auto;
}

	/* The sanitized rich-text preview shouldn't carry big leading/trailing margins in the small box. */
	.sc-revision-body :first-child {
		margin-top: 0;
	}

	.sc-revision-body :last-child {
		margin-bottom: 0;
	}

/* ----- Login history ------------------------------------------------------------ */
/* A user agent is one long unbroken token, so it must wrap inside the cell rather than widen the table. */
.sc-login-agent {
	max-width: 22rem;
	overflow-wrap: anywhere;
}

/* ----- Collaborator comments ---------------------------------------------------- */
/* The count badge sits in the corner of the comment button. */
.sc-comment-btn {
	overflow: visible;
}

.sc-comment-count {
	position: absolute;
	top: -0.15rem;
	right: -0.15rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.22rem;
	border-radius: 1rem;
	background: var(--bs-primary);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1rem;
	text-align: center;
}

.sc-comment-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.sc-comment {
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	padding: 0.5rem 0.75rem;
}

.sc-comment-head {
	margin-bottom: 0.35rem;
}

.sc-comment-body :first-child {
	margin-top: 0;
}

.sc-comment-body :last-child {
	margin-bottom: 0;
}

.sc-comment-add {
	border-top: var(--bs-border-width) solid var(--bs-border-color);
	padding-top: 0.75rem;
}

/* ----- 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;
		/* clear the sticky build-sheet header (app bar 58px + its measured height + a small gap) */
		top: calc(58px + var(--sc-bsheet-header-h, 121px) + 0.75rem);
	}
}

/* ----- 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);
}

/* A mobile browser resolves 100vh — and the 100% Bootstrap sizes .modal with — against the *large*
   viewport: the height with the retractable address bar hidden. So while that bar is showing, the modal
   is taller than the screen by exactly its height, and the footer pinned to the bottom of the modal (the
   Save button) sits below the fold, reachable only by scrolling. dvh instead tracks the viewport actually
   on screen. Pin .modal to it and the dialog/content — sized off 100% of it — follow, so the body takes
   the squeeze and the footer stays put. Browsers without dvh keep Bootstrap's 100%. The modal locks body
   scroll while open, so the address bar can't retract underneath it and resize this mid-edit. */
.modal {
	height: 100dvh;
}

/* 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; /* fallback: browsers without dvh keep the previous full-screen sheet */
		min-height: 100dvh;
	}
}

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

/* ----- Timeline (/timeline) ----------------------------------------------------- */
/* Vertical "list" view: a continuous rail with a node per event. */
.sc-timeline-list {
	position: relative;
	margin-top: 0.25rem;
}

.sc-timeline-year {
	font-weight: 600;
	color: var(--bs-secondary-color);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.78rem;
	margin: 1.1rem 0 0.5rem 2rem;
}

.sc-timeline-item {
	position: relative;
	padding-left: 2rem;
	padding-bottom: 0.75rem;
}

	.sc-timeline-item::before {
		content: "";
		position: absolute;
		left: 0.4rem;
		top: 0;
		bottom: 0;
		width: 2px;
		background: var(--bs-border-color);
	}

.sc-timeline-node {
	position: absolute;
	left: 0.01rem;
	top: 0.95rem;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--bs-primary);
	border: 2px solid var(--sc-surface-2);
	z-index: 1;
}

.sc-timeline-card {
	padding: 0.75rem 1rem;
}

.sc-timeline-chip {
	background: var(--sc-surface-2);
	color: var(--bs-body-color);
	border: 1px solid var(--bs-border-color);
	font-weight: 500;
}

.sc-timeline-desc > :last-child {
	margin-bottom: 0;
}

/* Horizontal "axis" view: events placed along a scrollable line, spacing proportional to elapsed time. */
.sc-timeline-axis {
	overflow-x: auto;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: var(--sc-surface-2);
	padding: 0.5rem 0;
}

.sc-timeline-axis-track {
	position: relative;
	height: 360px;
}

.sc-timeline-axis-inner {
	position: relative;
	height: 100%;
	margin: 0 5rem;
}

.sc-timeline-axis-line {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--bs-border-color);
}

.sc-timeline-axis-point {
	position: absolute;
	top: 0;
	height: 100%;
	width: 172px;
	transform: translateX(-50%);
}

.sc-timeline-axis-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bs-primary);
	border: 2px solid var(--sc-surface-2);
	z-index: 2;
}

.sc-timeline-axis-card {
	position: absolute;
	left: 0;
	right: 0;
	padding: 0.45rem 0.6rem;
}

.sc-timeline-axis-point.is-above .sc-timeline-axis-card {
	bottom: calc(50% + 16px);
}

.sc-timeline-axis-point.is-below .sc-timeline-axis-card {
	top: calc(50% + 16px);
}

.sc-timeline-axis-date {
	font-size: 0.75rem;
}

/* ----- Relationship graph ------------------------------------------------------- */
/* Container for the vis-network canvas on /relationship-graph. Fixed, responsive height so the
   force-directed layout has room; theme-aware surface + border like the other cards. */
.sc-relationship-graph {
	height: min(72vh, 760px);
	min-height: 420px;
	width: 100%;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: var(--sc-surface-2);
	/* Let vis-network own the drag/zoom gestures instead of the browser scrolling the page. */
	touch-action: none;
}

/* Legend chips (gender → colour), populated by relationshipgraph.js. */
.sc-graph-legend-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--bs-secondary-color);
}

.sc-graph-legend-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

/* vis-network hover tooltip (name · gender · race). We don't load vis-network's stylesheet, so style its
   tooltip element here to match the theme. It's appended to <body>, so this is a plain (unscoped) rule. */
.vis-tooltip {
	position: absolute;
	padding: 0.35rem 0.55rem;
	font-family: inherit;
	font-size: 0.8125rem;
	color: var(--bs-body-color);
	background: var(--sc-surface-2);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
	pointer-events: none;
	white-space: nowrap;
	z-index: 1080;
}

/* ----- Progression charts (/characters/{id}/charts) ----------------------------- */
/* Container for a Chart.js canvas — a fixed, responsive height (Chart.js fills it with
   maintainAspectRatio:false). */
.sc-chart {
	position: relative;
	height: min(58vh, 420px);
	min-height: 260px;
	width: 100%;
}

/* ----- Global search command palette (Ctrl/Cmd+K) ------------------------------- */
/* App-bar trigger: a search "pill" that collapses to an icon on small screens. */
.sc-search-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	height: 38px;
	padding: 0 0.6rem;
	border: 1px solid var(--sc-border);
	border-radius: 0.5rem;
	background: var(--sc-surface);
	color: var(--bs-secondary-color);
	font-size: 0.85rem;
}

	.sc-search-trigger:hover {
		border-color: var(--bs-primary);
		color: var(--bs-body-color);
	}

.sc-search-trigger-label {
	white-space: nowrap;
}

.sc-search-trigger-kbd {
	font-size: 0.7rem;
	padding: 0.05rem 0.35rem;
	border-radius: 0.3rem;
	background: var(--sc-surface-2);
	color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
	.sc-search-trigger-label,
	.sc-search-trigger-kbd {
		display: none;
	}
}

/* Palette dialog: near the top, a touch wider than default so results have room. */
.sc-search-dialog {
	max-width: 640px;
	margin-top: 4.5rem;
}

.sc-search-content {
	overflow: hidden;
}

.sc-search-inputrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--sc-border);
}

.sc-search-inputicon {
	color: var(--bs-secondary-color);
}

.sc-search-input {
	border: 0;
	box-shadow: none !important;
	padding: 0;
	font-size: 1.05rem;
	background: transparent;
}

	.sc-search-input:focus {
		outline: none;
	}

.sc-search-esc {
	font-size: 0.7rem;
	padding: 0.1rem 0.4rem;
	border-radius: 0.3rem;
	background: var(--sc-surface-2);
	color: var(--bs-secondary-color);
}

.sc-search-results {
	max-height: min(60vh, 26rem);
	overflow-y: auto;
	padding: 0.4rem;
}

.sc-search-hint {
	padding: 1.4rem 1rem;
	text-align: center;
	color: var(--bs-secondary-color);
	font-size: 0.9rem;
}

.sc-search-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-search-group {
	padding: 0.5rem 0.6rem 0.25rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bs-secondary-color);
}

.sc-search-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 0.5rem;
	color: var(--bs-body-color);
	text-decoration: none;
}

	.sc-search-item:hover,
	.sc-search-item.sc-search-active {
		background: var(--sc-nav-active-bg);
		text-decoration: none;
	}

.sc-search-item-icon {
	color: var(--bs-primary);
	flex: 0 0 auto;
}

.sc-search-item-title {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sc-search-item-sub {
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
	max-width: 40%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----- Plot threads & storylines ------------------------------------------------ */
/* Beat-kind colours: Introduced (start) → Developed (advance) → Resolved (payoff), plus Referenced. */
.sc-beat-introduced {
	--sc-beat-color: #0d6efd;
}

.sc-beat-developed {
	--sc-beat-color: #fd7e14;
}

.sc-beat-resolved {
	--sc-beat-color: #198754;
}

.sc-beat-referenced {
	--sc-beat-color: #6c757d;
}

/* A labelled pill (grids) and a bare dot (the board). */
.sc-beat-kind {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 2rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	background: var(--sc-beat-color, #6c757d);
	white-space: nowrap;
}

.sc-beat-dot {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	margin: 0.1rem;
	border-radius: 50%;
	background: var(--sc-beat-color, #6c757d);
	vertical-align: middle;
}

/* The Storylines board: a threads × chapters grid; the thread column is sticky while chapters scroll. */
.sc-storyline {
	border: 1px solid var(--sc-border);
	border-radius: 0.5rem;
	overflow: auto;
	max-height: 72vh;
}

.sc-storyline-table {
	border-collapse: separate;
	border-spacing: 0;
	width: max-content;
	min-width: 100%;
}

	.sc-storyline-table th,
	.sc-storyline-table td {
		border-bottom: 1px solid var(--sc-border);
		border-right: 1px solid var(--sc-border);
	}

.sc-storyline-corner,
.sc-storyline-thread {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--sc-surface-2);
	min-width: 12rem;
	max-width: 16rem;
	padding: 0.5rem 0.75rem;
	text-align: left;
	vertical-align: middle;
}

.sc-storyline-thread {
	background: var(--sc-surface);
	font-weight: 500;
}

.sc-storyline-corner {
	top: 0;
	z-index: 4;
}

.sc-storyline-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--sc-surface-2);
}

.sc-storyline-chead {
	min-width: 3rem;
	padding: 0.4rem 0.5rem;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
}

.sc-storyline-book {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--bs-primary);
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 8rem;
}

.sc-storyline-ch {
	color: var(--bs-secondary-color);
}

.sc-storyline-cell {
	padding: 0.4rem 0.5rem;
	text-align: center;
	min-width: 3rem;
}

.sc-storyline-bookstart {
	border-left: 2px solid var(--bs-primary);
}

/* ----- Inventory over time (a character's assets across chapters) ---------------- */
.sc-inv-dot {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.15rem;
}

	.sc-inv-dot.sc-inv-gained {
		background: var(--bs-success);
	}

	.sc-inv-dot.sc-inv-lost {
		background: var(--bs-danger);
	}

	.sc-inv-dot.sc-inv-held {
		background: var(--bs-primary);
	}

.sc-inv-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1rem 0.5rem;
	margin: 0.15rem 0.15rem 0 0;
	border: 1px solid var(--bs-border-color);
	border-radius: 1rem;
	background: var(--sc-surface-2);
	font-size: 0.8rem;
}

.sc-inv-change {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem;
}

.sc-inv-tag {
	display: inline-block;
	padding: 0.05rem 0.5rem;
	border-radius: 1rem;
	font-size: 0.68rem;
	font-weight: 600;
	margin-right: 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
}

	.sc-inv-tag.sc-inv-gained {
		background: var(--bs-success);
	}

	.sc-inv-tag.sc-inv-lost {
		background: var(--bs-danger);
	}

.sc-inv-lost-item {
	text-decoration: line-through;
	opacity: 0.7;
}

.sc-inv-matrix-wrap {
	overflow-x: auto;
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

.sc-inv-matrix {
	border-collapse: collapse;
	width: auto;
	font-size: 0.85rem;
}

	.sc-inv-matrix th,
	.sc-inv-matrix td {
		border-bottom: 1px solid var(--bs-border-color);
	}

	.sc-inv-matrix thead th {
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--sc-surface-2);
		padding: 0.35rem 0.5rem;
	}

.sc-inv-chapter-col {
	text-align: center;
	min-width: 2.2rem;
	font-weight: 500;
	color: var(--bs-secondary-color);
}

.sc-inv-item-col {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--bs-body-bg);
	min-width: 11rem;
	max-width: 16rem;
	padding: 0.3rem 0.6rem;
	white-space: nowrap;
}

.sc-inv-matrix thead .sc-inv-item-col {
	z-index: 2;
	background: var(--sc-surface-2);
}

.sc-inv-cell {
	text-align: center;
	min-width: 2.2rem;
	padding: 0.3rem 0.4rem;
	color: var(--bs-secondary-color);
}

	.sc-inv-cell.sc-inv-gained {
		background: color-mix(in srgb, var(--bs-success) 22%, transparent);
		color: var(--bs-success);
		font-weight: 700;
	}

	.sc-inv-cell.sc-inv-lost {
		background: color-mix(in srgb, var(--bs-danger) 22%, transparent);
		color: var(--bs-danger);
		font-weight: 700;
	}

	.sc-inv-cell.sc-inv-held {
		background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
		color: var(--bs-primary);
	}

/* ----- Scene & beat board (kanban) ---------------------------------------------- */
.sc-kanban {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	overflow-x: auto;
	padding-bottom: 0.5rem;
}

.sc-kanban-col {
	flex: 0 0 17rem;
	max-width: 17rem;
	background: var(--sc-surface-2);
	border: 1px solid var(--sc-border);
	border-radius: 0.6rem;
	display: flex;
	flex-direction: column;
	max-height: 76vh;
}

.sc-kanban-col-head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--sc-border);
}

.sc-kanban-col-grip {
	cursor: grab;
	color: var(--bs-secondary-color);
}

.sc-kanban-col-title {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 0.9rem;
}

.sc-kanban-col-actions {
	display: inline-flex;
	opacity: 0;
	transition: opacity 0.12s ease-in-out;
}

.sc-kanban-col-head:hover .sc-kanban-col-actions {
	opacity: 1;
}

.sc-kanban-cards {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 3rem;
}

.sc-kanban-card {
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: 0.5rem;
	padding: 0.55rem 0.6rem;
	cursor: grab;
	position: relative;
}

	.sc-kanban-card:hover {
		border-color: var(--bs-primary);
	}

.sc-kanban-card-title {
	font-weight: 500;
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
	padding-right: 2.5rem;
}

.sc-kanban-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.sc-kanban-card-chapter {
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
	text-decoration: none;
}

	.sc-kanban-card-chapter:hover {
		color: var(--bs-primary);
	}

.sc-kanban-card-desc {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
}

.sc-kanban-card-actions {
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	display: inline-flex;
	opacity: 0;
	transition: opacity 0.12s ease-in-out;
}

.sc-kanban-card:hover .sc-kanban-card-actions {
	opacity: 1;
}

.sc-kanban-add {
	margin: 0.5rem;
	padding: 0.35rem;
	border: 1px dashed var(--sc-border);
	border-radius: 0.5rem;
	background: transparent;
	color: var(--bs-secondary-color);
	font-size: 0.85rem;
}

	.sc-kanban-add:hover {
		border-color: var(--bs-primary);
		color: var(--bs-primary);
	}

.sc-kanban-card-ghost,
.sc-kanban-col-ghost {
	opacity: 0.5;
}

/* Scene writing-progress status chips: Idea -> Outlined -> Drafted -> Revised -> Done. */
.sc-scene-status {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 2rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	background: var(--sc-scene-color, #6c757d);
}

.sc-scene-idea {
	--sc-scene-color: #6c757d;
}

.sc-scene-outlined {
	--sc-scene-color: #0d6efd;
}

.sc-scene-drafted {
	--sc-scene-color: #fd7e14;
}

.sc-scene-revised {
	--sc-scene-color: #6f42c1;
}

.sc-scene-done {
	--sc-scene-color: #198754;
}

/* ----- Quests & arcs ------------------------------------------------------------ */
/* Quest status chips: Available -> Active -> Completed, plus Failed. */
.sc-quest-status {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 2rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: #fff;
	background: var(--sc-quest-color, #6c757d);
	white-space: nowrap;
}

.sc-quest-available {
	--sc-quest-color: #6c757d;
}

.sc-quest-active {
	--sc-quest-color: #0d6efd;
}

.sc-quest-completed {
	--sc-quest-color: #198754;
}

.sc-quest-failed {
	--sc-quest-color: #dc3545;
}

/* Reward type chips: Title / Skill / Item. */
.sc-reward-type {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 2rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	background: var(--sc-reward-color, #6c757d);
}

.sc-reward-title {
	--sc-reward-color: #6f42c1;
}

.sc-reward-skill {
	--sc-reward-color: #0d6efd;
}

.sc-reward-item {
	--sc-reward-color: #fd7e14;
}

.sc-quest-objective-check {
	cursor: pointer;
}

/* ----- Skill/spell prerequisite trees ------------------------------------------- */
.sc-skill-tree {
	height: min(66vh, 640px);
	min-height: 380px;
	width: 100%;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: var(--sc-surface-2);
	touch-action: none;
}

/* Ability kind chips (Skill / Spell) on the prerequisites list. */
.sc-ability-kind {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 2rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	background: var(--sc-ability-color, #6c757d);
}

.sc-ability-skill {
	--sc-ability-color: #5b8def;
}

.sc-ability-spell {
	--sc-ability-color: #9b6cd8;
}

.sc-ability-freetext {
	--sc-ability-color: #6c757d;
}

/* ----- Bestiary stat-block kind chips -------------------------------------------- */
.sc-statblock-kind {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 2rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	background: var(--sc-statblock-color, #6c757d);
}

.sc-statblock-npc {
	--sc-statblock-color: #0d9488;
}

.sc-statblock-monster {
	--sc-statblock-color: #b45309;
}

.sc-statblock-antagonist {
	--sc-statblock-color: #b91c1c;
}

.sc-statblock-boss {
	--sc-statblock-color: #7e22ce;
}

/* ----- Stat comparison & power-scaling ------------------------------------------- */
.sc-compare-table th,
.sc-compare-table td {
	text-align: center;
	vertical-align: top;
}

/* The stat-name column stays put while the value columns scroll. */
.sc-compare-rowhead {
	text-align: left !important;
	position: sticky;
	left: 0;
	background: var(--sc-surface);
	z-index: 1;
	white-space: nowrap;
}

.sc-compare-col {
	min-width: 9.5rem;
}

.sc-compare-baseline {
	background: var(--sc-surface-2);
}

.sc-compare-section th {
	text-align: left !important;
	background: var(--sc-surface-2);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bs-secondary-color);
}

.sc-compare-value {
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.1;
}

/* Relative-magnitude bar: width is the cell's value ÷ the row's largest value. */
.sc-compare-bar {
	height: 4px;
	border-radius: 2px;
	background: var(--sc-surface-2);
	margin: 4px auto 2px;
	overflow: hidden;
}

	.sc-compare-bar > span {
		display: block;
		height: 100%;
		background: var(--bs-primary);
		border-radius: 2px;
	}

.sc-compare-delta {
	font-size: 0.72rem;
	display: flex;
	gap: 0.35rem;
	justify-content: center;
}

.sc-delta-pos {
	color: #16a34a;
	font-weight: 600;
}

.sc-delta-neg {
	color: #dc2626;
	font-weight: 600;
}

.sc-compare-ratio {
	color: var(--bs-secondary-color);
}

/* ----- Writing progress & goals -------------------------------------------------- */
.sc-progress-bar {
	height: 8px;
	border-radius: 4px;
	background: var(--sc-surface-2);
	overflow: hidden;
}

	.sc-progress-bar > span {
		display: block;
		height: 100%;
		background: var(--bs-primary);
		border-radius: 4px;
		transition: width 0.3s ease;
	}

/* --- Place hierarchy + map pins (WI59) --------------------------------------------------- */
.sc-link-plain {
	color: inherit;
	text-decoration: none;
}

	.sc-link-plain:hover {
		color: var(--bs-primary);
		text-decoration: underline;
	}

/* Nested-tree indentation in the Places grid (one step per depth level). */
.sc-tree-indent {
	display: inline-block;
	width: calc(var(--sc-tree-depth, 0) * 1.25rem);
}

/* The map image frame: pins are absolutely positioned as a percentage of the image. */
.sc-map-frame {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	touch-action: none;
}

	.sc-map-frame[data-mode="arrange"] {
		cursor: crosshair;
	}

.sc-map-image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	border: var(--bs-border-width) solid var(--bs-border-color);
}

.sc-map-preview {
	max-width: 100%;
	max-height: 240px;
	border-radius: 8px;
	border: var(--bs-border-width) solid var(--bs-border-color);
}

/* A pin: the icon tip sits on the (X, Y) coordinate. */
.sc-map-pin {
	position: absolute;
	transform: translate(-50%, -100%);
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.sc-map-frame[data-mode="arrange"] .sc-map-pin {
	cursor: move;
}

.sc-map-pin.sc-map-pin-dragging {
	z-index: 5;
	opacity: 0.85;
}

.sc-map-pin-icon {
	font-size: 1.5rem;
	color: var(--bs-primary);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* The label bubble — hidden until hover so a dense map stays readable. */
.sc-map-pin-label {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 2px;
	padding: 1px 8px;
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--bs-body-color);
	background: var(--sc-surface-2, var(--bs-tertiary-bg));
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	display: none;
}

.sc-map-pin:hover .sc-map-pin-label {
	display: block;
}

/* The delete affordance (shown only in arrange mode via Alpine x-show). */
.sc-map-pin-delete {
	position: absolute;
	top: -6px;
	right: -10px;
	width: 18px;
	height: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6rem;
	line-height: 1;
	color: #fff;
	background: var(--bs-danger);
	border: 1px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	z-index: 3;
}
/* --- Wiki-style [[mentions]] + backlinks (WI53) ------------------------------------------ */
/* An inline cross-link rendered from a [[Type:Name]] mention in a rich-text body. */
.sc-mention {
	color: var(--bs-primary);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px dotted currentColor;
}

	.sc-mention:hover {
		text-decoration: none;
		border-bottom-style: solid;
	}

/* A mention that didn't resolve to a record — muted, not a link. */
.sc-mention-broken {
	color: var(--bs-secondary-color, var(--bs-secondary));
	font-weight: 500;
	border-bottom: 1px dashed var(--bs-danger);
	cursor: help;
}

/* The "Mentioned in" backlinks panel on a detail page. */
.sc-backlinks-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.6rem;
	margin: 0 0.35rem 0.35rem 0;
	font-size: 0.85rem;
	color: var(--bs-body-color);
	text-decoration: none;
	background: var(--sc-surface-2, var(--bs-tertiary-bg));
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: 999px;
}

	.sc-backlinks-item:hover {
		border-color: var(--bs-primary);
		color: var(--bs-primary);
	}

	.sc-backlinks-item .sc-backlinks-kind {
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--bs-secondary-color, var(--bs-secondary));
	}

/* The [[ mention autocomplete dropdown (appended to <body>, positioned at the caret). */
.sc-mention-dropdown {
	position: absolute;
	z-index: 2000;
	min-width: 220px;
	max-width: 340px;
	max-height: 260px;
	overflow-y: auto;
	padding: 0.25rem;
	background: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.sc-mention-option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.3rem 0.55rem;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--bs-body-color);
	cursor: pointer;
}

	.sc-mention-option:hover,
	.sc-mention-option.sc-mention-active {
		background: var(--bs-primary);
		color: #fff;
	}

.sc-mention-option-name {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sc-mention-option-kind {
	flex-shrink: 0;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
}

/* --- Release announcements & change log ---------------------------------------------------------------- */
/* The version pill on the change log, the admin grid and the announcement modal. */
.sc-release-version {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 0.35rem;
	font-family: var(--bs-font-monospace);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--bs-primary);
	background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
	border: var(--bs-border-width) solid color-mix(in srgb, var(--bs-primary) 30%, transparent);
}

/* A change-log group's heading chip (Added / Changed / Fixed / Removed). */
.sc-release-kind {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.5rem;
	border-radius: 2rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
	background: var(--sc-release-kind-color, #6c757d);
}

.sc-release-kind-added {
	--sc-release-kind-color: #16a34a;
}

.sc-release-kind-changed {
	--sc-release-kind-color: #2563eb;
}

.sc-release-kind-fixed {
	--sc-release-kind-color: #d97706;
}

.sc-release-kind-removed {
	--sc-release-kind-color: #dc2626;
}

.sc-release-group {
	margin-top: 1rem;
}

.sc-release-items {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.sc-release-items li {
	margin-bottom: 0.25rem;
}

/* The public change log stacks one card per release. */
.sc-release-log {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Inside the announcement modal each release is a section, divided from the next. */
.modal-body > .sc-release-entry + .sc-release-entry {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: var(--bs-border-width) solid var(--bs-border-color);
}