html, body {
	scroll-behavior: smooth;
}

/* Slim, frosted app bar that sits above a hairline divider. */
.sc-appbar {
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sc-wordmark {
	font-weight: 600;
	letter-spacing: .02em;
}

.sc-collection-switch {
	text-transform: none;
	font-weight: 500;
	border-radius: 999px;
}

/* MudBlazor buttons default to uppercase; modern UIs use normal-case labels. */
.mud-button-root {
	text-transform: none;
	letter-spacing: normal;
}

/* Colored pill for grades / rarity tiers (uses each row's own colours). */
.sc-color-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 12px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.7;
	white-space: nowrap;
	border: 1px solid rgba(127, 127, 127, 0.18);
}

/* Right-align a grid's action-button column. Do NOT use `d-flex` on the cell:
   `display:flex` drops the <td> out of the table box model, so the browser wraps it in an
   anonymous full-height cell while the real <td> (which carries the border) shrinks to its
   content — leaving its bottom border floating above the rest of the row. Keeping the cell a
   normal table cell and right-aligning its inline content makes it inherit the same height and
   bottom border as every other column. */
.sc-actions-cell {
	text-align: right;
	white-space: nowrap;
}

/* Data-grid column header row — shaded, bolder and a stronger underline so the titles stand out
   from the body rows. Scoped to .mud-data-grid so it applies to every grid in the app. */
.mud-data-grid .mud-table-head .mud-table-cell {
	background-color: var(--mud-palette-background-gray);
	font-weight: 600;
	color: var(--mud-palette-text-primary);
	border-bottom: 2px solid var(--mud-palette-table-lines);
}

	/* Round the top corners of the header band (first cell top-left, last cell top-right). */
	.mud-data-grid .mud-table-head .mud-table-cell:first-child {
		border-top-left-radius: 8px;
	}

	.mud-data-grid .mud-table-head .mud-table-cell:last-child {
		border-top-right-radius: 8px;
	}

/* Don't render a bottom border on a grid's last row. */
.mud-data-grid .mud-table-body .mud-table-row:last-child .mud-table-cell {
	border-bottom: none;
}

/* Outer frame on the left, right and bottom — the shaded header band caps the top. The top border is
   kept transparent so only three sides show a line, while the 8px radius still rounds all four corners
   cleanly against the rounded header band. */
.mud-data-grid .mud-table-root {
	border-radius: 8px;
}

/* Round the last row's outer corners so the cell backgrounds follow the rounded bottom frame. */
.mud-data-grid .mud-table-body .mud-table-row:last-child .mud-table-cell:first-child {
	border-bottom-left-radius: 8px;
}

.mud-data-grid .mud-table-body .mud-table-row:last-child .mud-table-cell:last-child {
	border-bottom-right-radius: 8px;
}

.sc-nested-card-grid {
	border: 1px solid var(--mud-palette-table-lines);
	border-top-color: transparent;
}

	.sc-nested-card-grid .mud-table-body .mud-table-empty-row {
		/*border: 1px solid var(--mud-palette-table-lines);*/
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

/* Inherited skill/spell rows on the build sheet — exactly two columns to conserve vertical space,
   collapsing to one column when the card gets narrow. minmax(0, …) lets each column shrink so the inner
   three-column item layout truncates instead of overflowing. */
.sc-inherited-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

@media (max-width: 700px) {
	.sc-inherited-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Drawer + grouped navigation. */
.sc-drawer {
	border-right: 1px solid var(--mud-palette-lines-default);
}

.sc-nav-group {
	padding: 18px 16px 6px;
	font-size: .70rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mud-palette-text-disabled);
}

/* Cards lift gently and pick up the primary colour on hover. */
.sc-card {
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: 14px;
	height: 100%;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

	.sc-card:hover {
		border-color: var(--mud-palette-primary);
		transform: translateY(-2px);
	}

/* Two-line clamp for description snippets in cards. */
.sc-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

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

/* Quieter, rounder scrollbars. */
*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-thumb {
	background: var(--mud-palette-lines-default);
	border-radius: 8px;
}

	*::-webkit-scrollbar-thumb:hover {
		background: var(--mud-palette-text-disabled);
	}

/* Rich-text editor (Quill snow theme) re-skinned to match the MudBlazor theme. */
.sc-rte-label {
	display: block;
	font-size: .75rem;
	color: var(--mud-palette-text-secondary);
	margin-bottom: 4px;
}

.sc-rte .ql-toolbar.ql-snow,
.sc-rte .ql-container.ql-snow {
	border-color: var(--mud-palette-lines-inputs);
}

.sc-rte .ql-toolbar.ql-snow {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.sc-rte .ql-container.ql-snow {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	background: var(--mud-palette-surface);
}

.sc-rte .ql-editor {
	min-height: 120px;
	color: var(--mud-palette-text-primary);
	font-family: inherit;
	font-size: .95rem;
}

	.sc-rte .ql-editor.ql-blank::before {
		color: var(--mud-palette-text-disabled);
		font-style: normal;
	}

.sc-rte .ql-snow .ql-stroke {
	stroke: var(--mud-palette-text-secondary);
}

.sc-rte .ql-snow .ql-fill {
	fill: var(--mud-palette-text-secondary);
}

.sc-rte .ql-snow .ql-picker {
	color: var(--mud-palette-text-secondary);
}

.sc-rte .ql-snow.ql-toolbar button:hover .ql-stroke,
.sc-rte .ql-snow.ql-toolbar button.ql-active .ql-stroke {
	stroke: var(--mud-palette-primary);
}

.sc-rte .ql-snow.ql-toolbar button:hover .ql-fill,
.sc-rte .ql-snow.ql-toolbar button.ql-active .ql-fill {
	fill: var(--mud-palette-primary);
}

.sc-rte .ql-snow .ql-picker-options {
	background: var(--mud-palette-surface);
	border-color: var(--mud-palette-lines-inputs);
}

.sc-rte .ql-snow .ql-tooltip {
	background: var(--mud-palette-surface);
	color: var(--mud-palette-text-primary);
	border-color: var(--mud-palette-lines-inputs);
	box-shadow: none;
}

	.sc-rte .ql-snow .ql-tooltip input[type=text] {
		background: var(--mud-palette-background);
		color: var(--mud-palette-text-primary);
		border-color: var(--mud-palette-lines-inputs);
	}

/* Sanitized rich-text display blocks. */
.sc-richtext :first-child {
	margin-top: 0;
}

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

/* Calculated resource cards on the progression build sheet. */
.sc-resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
}

.sc-resource-card {
	background: var(--mud-palette-background);
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: 12px;
	padding: 10px 14px;
}

.sc-resource-label {
	font-size: .78rem;
	color: var(--mud-palette-text-secondary);
}

.sc-resource-value {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.4;
}

/* Author-entered special resources (e.g. Quantum Essence) sit alongside the calculated cards but
   read as distinct via a secondary-tinted accent border. */
.sc-resource-card-special {
	border-color: var(--mud-palette-info);
	border-left-width: 3px;
}

/* Keep the stat panel in view while editing composition on wide screens. */
@media (min-width: 960px) {
	.sc-statsheet-sticky {
		position: sticky;
		top: 88px;
	}
}

/* Composition summary rows on the build sheet. */
.sc-comp-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	border-bottom: 1px solid var(--mud-palette-lines-default);
}

	.sc-comp-row:last-child {
		border-bottom: none;
	}

.sc-comp-label {
	color: var(--mud-palette-text-secondary);
}

.sc-comp-muted {
	color: var(--mud-palette-text-disabled);
	margin-left: 6px;
	font-size: .85em;
}

/* Effective-stat rows: stat name + two number columns (before vs. with bonuses). */
.sc-stat-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

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

.sc-stat-col {
	flex: 0 0 64px;
	text-align: right;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mud-palette-text-disabled);
	cursor: default;
}

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

.sc-stat-line-name {
	flex: 1 1 auto;
	min-width: 0;
}

.sc-stat-num {
	flex: 0 0 64px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sc-stat-num-pre {
	color: var(--mud-palette-text-secondary);
}

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

/* Public (unauthenticated) pages: marketing home, sign-in, onboarding. */
.sc-public-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--mud-palette-primary) 14%, transparent), transparent 70%);
}

/* Keep the footer at the bottom of the public shell even on short pages. */
.sc-public-content {
	flex: 1 0 auto;
}

/* Site-wide footer (public shell + authenticated app) carrying the privacy link. */
/* Dock the footer at the bottom of the viewport on short pages: the main content fills at least one
   viewport (border-box absorbs the app-bar padding; the fixed app bar is out of flow, so no extra
   scrollbar), and the page container grows to push the footer down. Long pages scroll as usual. */
.sc-main {
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.sc-main > .mud-container {
	flex: 1 0 auto;
}

.sc-footer {
	border-top: 1px solid var(--mud-palette-divider);
	padding: 1.25rem 0;
	margin-top: 2rem;
}

.sc-hero {
	padding: 3rem 0 1rem;
}

/* The favicon logo in the marketing hero — a touch larger than the Size.Large icon it replaced. */
.sc-hero-logo {
	width: 3rem;
	height: 3rem;
}

/* The favicon logo in the app-bar — sized to match a standard MudIcon (smaller hero variant). */
.sc-appbar-logo {
	width: 1.5rem;
	height: 1.5rem;
}

.sc-hero-title {
	font-weight: 700;
	letter-spacing: -.02em;
	background: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-tertiary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sc-hero-sub {
	max-width: 680px;
}