html {
	font-size: 14px;
}

/* Icon drawn in the current text color: <span class="wb-icon" style="--icon:url('/icons/x.svg')"></span> */
.wb-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* Lexical editor surface: when user prefers a light canvas, use .editor-light */
/* the light page in the dark theme carries its own light tokens */
.wb-editor:has(#lexical-editor-root.editor-light) {
	--wb-page-bg: #ffffff;
	--wb-page-color: #111111;
	--wb-sheet: #ffffff;
	--wb-desk: #2a3343;
}

/* Toolbar switch adjustments */
.lexical-toolbar .form-check {
	margin: 0;
}

.lexical-toolbar .form-check-input {
	width: 2rem;
	height: 1rem;
}

/* Make the switch knob use the primary color for better visibility.
   This forces the knob (the pseudo-element) and the checked track to use --bs-primary. */
.form-check-input:checked {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}
.form-check-input:focus {
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15) !important;
}
.form-check-input::before {
	/* knob */
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}
.form-check-input:checked::before {
	background-color: var(--bs-primary) !important;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem var(--bs-body-bg, #fff), 0 0 0 0.25rem #258cfb;
}

html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* -----------------------------------------
   Global Layout & Typography
----------------------------------------- */

body {
	font-family: system-ui, sans-serif;
	margin: 0;
	padding: 0;
	background: #f5f7fa;
	color: #333;
}

h1, h2 {
	font-weight: 600;
	margin: 0;
}

/* Page headers, cards, panels, empty states, fields, list rows and menus
   live in ui.css (see docs/UI-Guide.md). */

/* -----------------------------------------
   Buttons
   Use Bootstrap .btn with the modifiers in ui.css.
----------------------------------------- */

/* The app blue (--wb-accent in theme.css) for Bootstrap's primary button */
.btn.btn-primary {
	--bs-btn-bg: #4a6cf7;
	--bs-btn-border-color: #4a6cf7;
	--bs-btn-hover-bg: #3a57d9;
	--bs-btn-hover-border-color: #3a57d9;
	--bs-btn-active-bg: #3149c4;
	--bs-btn-active-border-color: #3149c4;
	--bs-btn-disabled-bg: #4a6cf7;
	--bs-btn-disabled-border-color: #4a6cf7;
}

/* -----------------------------------------
   Tables (Books Index)
----------------------------------------- */

.book-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wb-surface);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

	.book-table th {
		background: var(--wb-surface-2);
		text-align: left;
		padding: 0.75rem 1rem;
		font-weight: 600;
		color: var(--bs-body-color);
		border-bottom: 1px solid var(--wb-border);
	}

	.book-table td {
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--wb-border);
	}

	.book-table tr:last-child td {
		border-bottom: none;
	}

/* -----------------------------------------
   Forms
   New forms use .wb-field (ui.css). These two are kept because the
   sign-in pages, the speed reader and account settings still use them.
----------------------------------------- */

label {
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.form-hint {
	font-size: var(--wb-text-sm, 0.85rem);
	color: var(--wb-muted);
	margin-top: 0.3rem;
}


/* -----------------------------------------
   Goal Bar
----------------------------------------- */

.goal-bar {
	display: flex;
	align-items: center;
	gap: 8px;
}

.goal-progress {
	flex-grow: 1;
	height: 6px;
	background-color: var(--wb-border);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.goal-progress-fill {
	height: 100%;
	width: 0%;
	background-color: #4caf50;
	transition: width 0.25s ease-in-out;
}

.goal-text {
	font-size: 0.85rem;
	color: var(--wb-muted);
	line-height: 1;
	white-space: nowrap;
}


/* -----------------------------------------
   Speed Reader
----------------------------------------- */
.reader-display {
	text-align: center;
	margin-top: 40px;
}

.reader-word {
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 1px;
}

	.reader-word .orp {
		color: #ff5252;
	}

/* Mobile tweaks */
@media (max-width: 600px) {
	.reader-word {
		font-size: 2.2rem;
	}
}

.spritz-word {
	position: relative;
	width: 100%;
	white-space: pre;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.spritz-word .left,
	.spritz-word .right {
		flex: 1 1 0;
		overflow: hidden;
	}

	.spritz-word .orp {
		flex: 0 0 1ch; /* fixed ORP column */
		text-align: center;
		color: #ff5252;
	}

	.spritz-word .left {
		text-align: right;
		white-space: pre;
	}

	.spritz-word .right {
		text-align: left;
		white-space: pre;
	}

.reader-word {
	width: 100%;
	height: 200px;
	position: relative;
	background: #111;
}

#readerCanvas {
	width: 100%;
	height: 100px;
	display: block;
	background: #222;
}
/* -----------------------------------------
   Book tabs (_BookNav.cshtml)
----------------------------------------- */

body:has(.book-nav) {
	--wb-booknav-h: 44px;
}

.book-nav {
	/* the divider is an inset shadow, not a border, so the bar is exactly --wb-booknav-h tall */
	box-shadow: inset 0 -1px 0 var(--bs-border-color);
	background: var(--bs-body-bg);
}

.book-nav-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 44px; /* keep in sync with --wb-booknav-h above */
	padding: 0 1rem;
	overflow: hidden;
}

.book-nav-back {
	color: var(--wb-muted);
	text-decoration: none;
	font-size: 0.85rem;
	white-space: nowrap;
}

	.book-nav-back:hover {
		color: var(--bs-body-color);
	}

.book-nav-title {
	font-weight: 600;
	max-width: 280px;
}

.book-nav-tabs {
	display: flex;
	flex: 1;
	min-width: 0;
	align-self: stretch;
	align-items: center;
	overflow-y: hidden;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
}

.book-nav-link {
	display: block;
	padding: 0.65rem 0.75rem;
	color: var(--wb-muted);
	text-decoration: none;
	white-space: nowrap;
	font-size: 0.9rem;
	border-bottom: 2px solid transparent;
}

	.book-nav-link:hover {
		color: var(--bs-body-color);
	}

	.book-nav-link.active {
		color: var(--bs-body-color);
		font-weight: 600;
		border-bottom-color: var(--bs-primary);
	}

.book-nav-export {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	white-space: nowrap;
	text-decoration: none;
}

/* -----------------------------------------
   Top navbar (_Header.cshtml, _LoginPartial.cshtml)
   Stays on one line from the sm breakpoint up; below sm the
   Bootstrap collapse toggler takes over.
----------------------------------------- */

#mainNavbar .theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.5rem;
	line-height: 1;
	text-decoration: none;
	border: 0;
}

@media (min-width: 576px) {
	#mainNavbar {
		flex-wrap: nowrap;
	}

		#mainNavbar > .container {
			flex-wrap: nowrap;
			flex: 1 1 auto;
		}

		#mainNavbar .navbar-brand,
		#mainNavbar .nav-link {
			white-space: nowrap;
		}

		#mainNavbar .navbar-collapse > .navbar-nav,
		#mainNavbar > .navbar-nav {
			flex-wrap: nowrap;
		}

		/* right-hand group: theme button, greeting, sign out */
		#mainNavbar > .navbar-theme,
		#mainNavbar > .navbar-nav {
			flex: none;
		}

		#mainNavbar > .navbar-nav {
			margin-right: 0.75rem;
		}

		/* long user names (emails) get an ellipsis instead of pushing the bar wider */
		#mainNavbar #manage {
			max-width: 16rem;
			overflow: hidden;
			text-overflow: ellipsis;
		}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	#mainNavbar #manage {
		max-width: 9rem;
	}
}

/* -----------------------------------------
   Sign-in and account pages (Areas/Identity)
   Signed-out pages: <div class="auth-page"><div class="auth-card">
   Account settings: Manage/_Layout.cshtml (.settings-*)
----------------------------------------- */

.auth-page {
	display: flex;
	justify-content: center;
	padding: 3rem 0 2rem;
}

.auth-card {
	width: 100%;
	max-width: 420px;
	padding: 2rem;
	background: var(--wb-surface);
	border: 1px solid var(--wb-border);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	color: var(--bs-body-color);
}

.auth-brand {
	display: block;
	margin-bottom: 1.25rem;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	color: var(--bs-body-color);
	text-decoration: none;
}

	.auth-brand:hover {
		color: var(--bs-body-color);
	}

.auth-card h1 {
	font-size: 1.5rem;
	margin-bottom: 0.35rem;
}

.auth-lede {
	color: var(--wb-muted);
	margin-bottom: 1.5rem;
}

.auth-card .form-label,
.settings-content .form-label {
	margin-bottom: 0.3rem;
}

.auth-card .form-control,
.settings-content .form-control {
	background-color: var(--wb-surface);
	border-color: var(--wb-border);
	color: var(--bs-body-color);
}

	.auth-card .form-control:focus,
	.settings-content .form-control:focus {
		border-color: #4a6cf7;
	}

	.settings-content .form-control:disabled {
		background-color: var(--wb-surface-2);
		color: var(--wb-muted);
	}

.auth-card .form-check-label,
.settings-content .form-check-label {
	font-weight: 400;
	margin-bottom: 0;
}

.auth-card .text-danger,
.settings-content .text-danger {
	color: var(--wb-danger-text) !important;
	font-size: 0.9rem;
}

/* ModelOnly / All summaries render an empty list when there are no errors */
.auth-card .validation-summary-valid,
.settings-content .validation-summary-valid {
	display: none;
}

.auth-card .validation-summary-errors ul,
.settings-content .validation-summary-errors ul {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
}

.auth-submit {
	width: 100%;
	margin-top: 0.5rem;
}

.auth-links {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wb-border);
	font-size: 0.95rem;
	color: var(--wb-muted);
}

	.auth-links p {
		margin: 0;
	}

.auth-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0 1rem;
	color: var(--wb-muted);
	font-size: 0.85rem;
}

	.auth-divider::before,
	.auth-divider::after {
		content: "";
		flex: 1;
		border-top: 1px solid var(--wb-border);
	}

.auth-providers {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Account settings: nav on the left, content card on the right */
.settings-layout {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

@media (max-width: 767.98px) {
	.settings-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.settings-nav .nav-pills {
	--bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle);
	--bs-nav-pills-link-active-color: var(--bs-body-color);
	gap: 0.15rem;
}

.settings-nav .nav-link {
	color: var(--wb-muted);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
}

	.settings-nav .nav-link:hover {
		color: var(--bs-body-color);
		background: var(--wb-surface-2);
	}

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

/* .settings-content is also a .wb-card (ui.css), which gives it its look */
.settings-content form {
	max-width: 420px;
}

.settings-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.settings-subtitle {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 1.5rem 0 0.75rem;
}

.settings-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}