/*
 * mokey console theme — sysadmin-grade token layer over Bootstrap 5.3.
 * Light is the default; [data-bs-theme="dark"] flips the palette.
 * Principles: 1px borders over shadows, 4-6px radius, one steel-blue
 * accent, IBM Plex Mono for identifiers.
 */

/* tokens: slate neutrals, one steel-blue accent */
:root {
	--mokey-accent: #2453b3;
	--mokey-accent-hover: #1a3f8f;
	/* label on an accent fill; must clear 4.5:1 on accent and accent-hover */
	--mokey-on-accent: #ffffff;
	--mokey-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

	--mokey-bg: #f4f6f9;
	--mokey-sidebar: #eef1f6;
	--mokey-surface: #ffffff;
	--mokey-ink: #141a26;
	--mokey-muted: #5a6477;
	--mokey-border: #dfe4ec;
	--mokey-border-strong: #c9d0db;
	/* an editable field needs >=3:1 against its surface (WCAG 1.4.11) */
	--mokey-field-border: #8a93a3;
	--mokey-accent-subtle: #e8eefb;
	--mokey-ok: #16733a;
	--mokey-ok-bg: #e5f4ea;
	--mokey-warn: #9a5800;
	--mokey-warn-bg: #fdf1df;
	--mokey-danger: #a8322a;
	--mokey-danger-bg: #fde8e6;

	--mokey-surface-raised: var(--mokey-bg);
	--mokey-rail-active-bg: var(--mokey-accent-subtle);
	--mokey-eyebrow: var(--mokey-muted);

	--bs-body-font-size: 0.875rem;
	--bs-body-line-height: 1.5;
	--bs-body-bg: var(--mokey-bg);
	--bs-body-color: var(--mokey-ink);
	--bs-border-color: var(--mokey-border);
	--bs-secondary-color: var(--mokey-muted);
	--bs-tertiary-bg: var(--mokey-sidebar);
	--bs-border-radius: 8px;
	--bs-border-radius-sm: 6px;
	--bs-border-radius-lg: 12px;
	--bs-focus-ring-width: 2px;
	--bs-focus-ring-opacity: 1;
	--bs-focus-ring-color: var(--mokey-accent);
	--bs-primary: var(--mokey-accent);
	--bs-primary-rgb: 36, 83, 179;
	--bs-link-color: var(--mokey-accent);
	--bs-link-hover-color: var(--mokey-accent-hover);
	--bs-link-color-rgb: 36, 83, 179;
	--bs-link-hover-color-rgb: 26, 63, 143;
}

[data-bs-theme="dark"] {
	--mokey-bg: #0f1318;
	--mokey-sidebar: #12161c;
	--mokey-surface: #171c23;
	--mokey-ink: #e7ebf1;
	--mokey-muted: #a0a9b8;
	--mokey-border: #252c36;
	--mokey-border-strong: #343c48;
	--mokey-field-border: #6f7988;
	--mokey-accent-subtle: #1b2540;
	--mokey-ok: #5fd38a;
	--mokey-ok-bg: #142a1c;
	--mokey-warn: #f2b75c;
	--mokey-warn-bg: #2b2114;
	--mokey-danger: #f08a80;
	--mokey-danger-bg: #2e1715;
	--mokey-accent: #6f96e8;
	--mokey-accent-hover: #92b0ef;
	/* the dark accent is light, so its label goes dark: white was 2.9:1 */
	--mokey-on-accent: #0f1318;
	--bs-primary-rgb: 111, 150, 232;
	--bs-link-color: #6f96e8;
	--bs-link-hover-color: #92b0ef;
	--bs-link-color-rgb: 111, 150, 232;
	--bs-link-hover-color-rgb: 146, 176, 239;
}

/* short pages keep the footer at the bottom of the viewport */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
}
h1,
.h1 {
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}

:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-check-input:focus-visible,
.btn-close:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
	outline: 2px solid var(--mokey-accent);
	outline-offset: 2px;
	box-shadow: none;
}

.bg-white {
	background-color: var(--mokey-surface) !important;
}

.card,
.mokey-card,
.login-card {
	background: var(--mokey-surface);
	border: 1px solid var(--mokey-border);
	border-radius: 12px;
	box-shadow: none;
}
.mokey-card {
	padding: 0;
}
.mokey-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
}
.mokey-row > .flex-grow-1 {
	min-width: 0;
}
.mokey-row > .btn,
.mokey-row > .d-flex {
	flex: none;
}
.mokey-row + .mokey-row {
	border-top: 1px solid var(--mokey-border);
}
.mokey-section-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}
.mokey-mono {
	font-family: var(--mokey-mono);
}
.mokey-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--mokey-accent-subtle);
	color: var(--mokey-accent);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}
.mokey-pill.is-muted {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--mokey-border-strong);
	color: var(--mokey-muted);
}
.mokey-pill.is-ok {
	background: var(--mokey-ok-bg);
	color: var(--mokey-ok);
}
.mokey-pill.is-warn {
	background: var(--mokey-warn-bg);
	color: var(--mokey-warn);
}
.mokey-pill.is-danger {
	background: var(--mokey-danger-bg);
	color: var(--mokey-danger);
}

.mokey-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	font-size: 1.1rem;
}
.mokey-tile.is-ok {
	background: var(--mokey-ok-bg);
	color: var(--mokey-ok);
}
.mokey-tile.is-warn {
	background: var(--mokey-warn-bg);
	color: var(--mokey-warn);
}
.mokey-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 14px 20px;
	border-top: 1px solid var(--mokey-border);
	color: var(--mokey-muted);
	font-size: 0.8125rem;
}
.mokey-steps .is-done {
	color: var(--mokey-ok);
}
.mokey-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mokey-ok);
}
.mokey-dot.is-warn {
	background: var(--mokey-warn);
}
.mokey-dot.is-danger {
	background: var(--mokey-danger);
}
.mokey-tile.is-neutral {
	background: var(--mokey-bg);
	color: var(--mokey-ink);
}
.mokey-card-body {
	padding: 20px;
}
.mokey-card .table {
	margin: 0;
}
.mokey-card .table > :last-child > tr:last-child > * {
	border-bottom: 0;
}
.mokey-facts {
	margin: 0;
}
.mokey-facts .mokey-row {
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 16px;
	padding: 14px 20px;
}
.mokey-facts dt {
	flex: 0 0 200px;
	font-weight: 400;
	color: var(--mokey-muted);
}
.mokey-facts dd {
	flex: 1 1 240px;
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}
.mokey-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mokey-chip {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid var(--mokey-border);
	border-radius: 6px;
	background: var(--mokey-bg);
	color: var(--mokey-ink);
	font-family: var(--mokey-mono);
	font-size: 0.75rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.table .mokey-chip {
	white-space: nowrap;
	overflow-wrap: normal;
}
.mokey-chip.is-danger {
	border-color: transparent;
	background: var(--mokey-danger-bg);
	color: var(--mokey-danger);
}
.mokey-empty {
	padding: 32px 20px;
	text-align: center;
	color: var(--mokey-muted);
}
.mokey-empty p {
	margin: 0 auto 16px;
}
.mokey-numbered {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mokey-step;
}
.mokey-numbered > li {
	display: flex;
	gap: 12px;
	counter-increment: mokey-step;
}
.mokey-numbered > li::before {
	content: counter(mokey-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--mokey-accent-subtle);
	color: var(--mokey-accent);
	font-size: 0.75rem;
	font-weight: 600;
}
.mokey-numbered > li.is-done::before {
	content: "\2713";
	background: var(--mokey-ok-bg);
	color: var(--mokey-ok);
}
.mokey-numbered > li > div {
	flex: 1;
	min-width: 0;
	padding-top: 1px;
}
.mokey-qr {
	display: block;
	width: 200px;
	max-width: 100%;
	margin: 12px 0;
	border: 1px solid var(--mokey-border);
	border-radius: 8px;
	background: #ffffff;
}
.modal-content {
	background: var(--mokey-surface);
	border: 1px solid var(--mokey-border);
	border-radius: 12px;
}
.modal-header,
.modal-footer {
	border-color: var(--mokey-border);
}
.mokey-error {
	max-width: 480px;
	margin: 0 auto;
	padding: 120px 16px;
}
.mokey-error h1 {
	font-size: 1.375rem;
}
/* phones: text takes the first line, its pills and buttons the next */
@media (max-width: 575.98px) {
	.mokey-row:has(> .btn, > .mokey-pill, > .d-flex) {
		flex-wrap: wrap;
		row-gap: 12px;
	}
	.mokey-row:has(> .btn, > .mokey-pill, > .d-flex) > .flex-grow-1 {
		flex-basis: 100%;
	}
	.mokey-row:has(> .mokey-tile):has(> .btn, > .mokey-pill, > .d-flex) > .flex-grow-1 {
		flex-basis: calc(100% - 56px);
	}
	.mokey-row:has(> .mokey-tile):has(> .btn, > .mokey-pill, > .d-flex) > .flex-grow-1 + * {
		margin-left: 56px;
	}
}

.login-card {
	max-width: 400px;
}
.login-card .login-body {
	padding: 28px !important;
}
.login-card .login-body .login-body-wrapper {
	max-width: none;
}
.login-failed {
	max-width: 400px;
}
/* status messages in the narrow auth card run 2-3 lines; balancing keeps a
   lone word off the last line (#34). Older browsers just wrap normally */
.login-card .alert {
	text-wrap: balance;
}
.login-step {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1rem;
}
.login-links {
	font-size: 0.8125rem;
}
.login-alt {
	margin-top: 1rem;
}
.mokey-signin-head {
	text-align: center;
	margin: 1.5rem 0 1.25rem;
}
.mokey-signin-head h1 {
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 0.25rem;
}
.mokey-auth-brand {
	margin: 3rem 0 1.25rem;
}
.mokey-auth-brand + .main-content,
.mokey-auth-brand + .mokey-error {
	padding-top: 0;
}
.mokey-signin-brand {
	display: inline-block;
	text-decoration: none;
}
.mokey-signin-brand .mokey-logo {
	max-height: 44px;
	max-width: 200px;
}

/* auth pages still carrying the old dark header bar get the plain card head */
.login-card .login-head.bg-dark {
	background: transparent !important;
	color: var(--mokey-ink) !important;
	padding: 28px 28px 0 !important;
}
.login-card .login-head.bg-dark h3 {
	text-align: left !important;
}


.main-content {
	padding-top: 100px;
	padding-bottom: 100px;
}

/* app shell: grouped sidebar, offcanvas below lg */
.mokey-page-foot {
	margin-top: auto;
}
.mokey-shell {
	display: flex;
	flex: 1;
	align-items: stretch;
}
.mokey-column {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.mokey-sidebar {
	--bs-offcanvas-width: 280px;
	background: var(--mokey-sidebar);
	border-right: 1px solid var(--mokey-border);
}
/* doubled class: Bootstrap's .offcanvas-lg .offcanvas-body zeroes padding at lg */
.mokey-sidebar .mokey-sidebar-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-height: 0;
	padding: 16px 12px;
	overflow-y: auto;
}
@media (min-width: 992px) {
	.mokey-sidebar {
		flex: 0 0 248px;
		width: 248px;
		align-self: stretch;
		/* Bootstrap makes .offcanvas-lg transparent at lg with !important */
		background-color: var(--mokey-sidebar) !important;
	}
	.mokey-sidebar .mokey-sidebar-body {
		position: sticky;
		top: 0;
		height: 100vh;
	}
}
.mokey-brand {
	display: block;
	padding: 4px 12px 12px;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.01em;
	color: var(--mokey-ink);
	text-decoration: none;
}
.mokey-brand img {
	max-height: 28px;
	max-width: 100%;
}
.mokey-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	margin-right: 10px;
	vertical-align: middle;
	border-radius: 8px;
	background: var(--mokey-accent);
	color: var(--mokey-on-accent);
}
.mokey-mark-lg {
	width: 44px;
	height: 44px;
	margin-right: 0;
	border-radius: 12px;
}
.mokey-nav-group {
	padding: 16px 12px 6px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mokey-muted);
}
.mokey-nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--mokey-ink);
	text-decoration: none;
}
.mokey-nav-link i {
	width: 16px;
	text-align: center;
	color: var(--mokey-muted);
}
.mokey-nav-link:hover {
	background: var(--mokey-accent-subtle);
}
.mokey-nav-link[aria-current="page"] {
	background: var(--mokey-accent-subtle);
	font-weight: 600;
}
.mokey-nav-link[aria-current="page"] i {
	color: var(--mokey-accent);
}
.mokey-sidebar-foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--mokey-border);
}
.mokey-sidebar-name,
.mokey-sidebar-user {
	padding: 0 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mokey-sidebar-name {
	font-weight: 600;
}
.mokey-sidebar-user {
	margin-bottom: 8px;
	font-size: 0.8125rem;
	color: var(--mokey-muted);
}
.mokey-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 52px;
	padding: 0 16px;
	background: var(--mokey-sidebar);
	border-bottom: 1px solid var(--mokey-border);
}
.mokey-topbar .mokey-brand {
	flex: 1;
	padding: 0;
}
.mokey-menu-btn {
	background: none;
	border: 0;
	min-width: 44px;
	min-height: 44px;
	padding: 8px;
	color: var(--mokey-ink);
}
.mokey-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--mokey-accent);
	color: var(--mokey-on-accent);
	font-size: 0.75rem;
	font-weight: 600;
}
.mokey-main {
	flex: 1;
	width: 100%;
	max-width: 1152px;
	padding: 76px 16px 24px;
}
.mokey-foot {
	width: 100%;
	max-width: 1152px;
	padding: 0 16px;
}
.mokey-main p {
	max-width: 70ch;
}
html {
	scroll-padding-top: 64px;
}
@media (min-width: 992px) {
	.mokey-main {
		max-width: 1216px;
		padding: 40px 48px 64px;
	}
	html {
		scroll-padding-top: 0;
	}
	.mokey-foot {
		max-width: 1216px;
		padding: 0 48px;
	}
}
.mokey-split {
	display: grid;
	gap: 0 24px;
	align-items: start;
}
@media (min-width: 1400px) {
	.mokey-split {
		grid-template-columns: 3fr 2fr;
	}
}
.mokey-split > * {
	min-width: 0;
}
.mokey-back {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 0.875rem;
	color: var(--mokey-muted);
	text-decoration: none;
}
.mokey-back:hover {
	color: var(--mokey-ink);
}

/* headings: tighter console scale */
.mokey-main h3,
.login-head h3 {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}
.mokey-main h5 {
	font-size: 1rem;
	font-weight: 600;
}

/* identifiers are typeset like the terminal */
.badge.rounded-pill {
	font-family: var(--mokey-mono);
	font-weight: 400;
	letter-spacing: 0;
}
.badge.rounded-pill.bg-dark {
	background: var(--bs-tertiary-bg) !important;
	border: 1px solid var(--bs-border-color);
	color: var(--bs-body-color);
	font-size: 0.75rem;
	padding: 0.3em 0.9em;
}

.btn {
	--bs-btn-font-size: 0.875rem;
	--bs-btn-font-weight: 500;
	--bs-btn-padding-x: 14px;
	--bs-btn-padding-y: 7px;
}
.btn-sm {
	--bs-btn-font-size: 0.8125rem;
	--bs-btn-padding-x: 10px;
	--bs-btn-padding-y: 4px;
}
.btn-lg {
	--bs-btn-font-size: 1rem;
	--bs-btn-padding-x: 16px;
	--bs-btn-padding-y: 9px;
}
.btn-outline-secondary {
	--bs-btn-color: var(--mokey-ink);
	--bs-btn-bg: var(--mokey-surface);
	--bs-btn-border-color: var(--mokey-border-strong);
	--bs-btn-hover-color: var(--mokey-ink);
	--bs-btn-hover-bg: var(--mokey-bg);
	--bs-btn-hover-border-color: var(--mokey-border-strong);
	--bs-btn-active-color: var(--mokey-accent);
	--bs-btn-active-bg: var(--mokey-accent-subtle);
	--bs-btn-active-border-color: var(--mokey-border-strong);
	--bs-btn-disabled-color: var(--mokey-muted);
	--bs-btn-disabled-bg: var(--mokey-surface);
	--bs-btn-disabled-border-color: var(--mokey-border);
}
.btn-primary {
	--bs-btn-color: var(--mokey-on-accent);
	--bs-btn-hover-color: var(--mokey-on-accent);
	--bs-btn-active-color: var(--mokey-on-accent);
	--bs-btn-bg: var(--mokey-accent);
	--bs-btn-border-color: var(--mokey-accent);
	--bs-btn-hover-bg: var(--mokey-accent-hover);
	--bs-btn-hover-border-color: var(--mokey-accent-hover);
	--bs-btn-active-bg: var(--mokey-accent-hover);
	--bs-btn-active-border-color: var(--mokey-accent-hover);
	font-weight: 600;
}

.form-control,
.form-select {
	background-color: var(--mokey-surface);
	border-color: var(--mokey-field-border);
	color: var(--bs-body-color);
}
/* read-only values sit flat on the surface, so the recessed wells are
   unambiguously the parts you can type into */
.form-control:disabled,
.form-control[readonly] {
	background-color: var(--mokey-bg);
	border-color: transparent;
	color: var(--bs-secondary-color);
	font-family: var(--mokey-mono);
	font-size: 0.9rem;
}
.form-control:focus,
.form-select:focus {
	border-color: var(--mokey-accent);
	box-shadow: none;
}

/* Phone: a compact country trigger welded to the number field. The trigger
   shows flag + dial code only — the flag already names the country, so the
   name would be saying it twice. */
.mokey-phone {
	flex-wrap: nowrap;
}
.mokey-dial {
	position: relative;
	display: flex;
}
.mokey-dial-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 100%;
	padding: 0.375rem 0.6rem;
	background: var(--mokey-surface-raised);
	border: 1px solid var(--mokey-field-border);
	border-right: 0;
	border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
	color: var(--bs-body-color);
	font-size: 0.925rem;
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
}
.mokey-dial-btn:hover {
	background: var(--bs-tertiary-bg);
}
.mokey-dial-btn:focus-visible {
	outline: 2px solid var(--mokey-accent);
	outline-offset: -1px;
}
.mokey-dial-flag {
	font-size: 1.05rem;
	line-height: 1;
}
i.mokey-dial-flag {
	font-size: 0.9rem;
	color: var(--bs-secondary-color);
}
/* dial codes are identifiers, so they get the terminal face the rest of the
   theme gives identifiers */
.mokey-dial-code {
	font-family: var(--mokey-mono);
	font-size: 0.875rem;
}
.mokey-dial-caret {
	font-size: 0.6rem;
	color: var(--mokey-eyebrow);
	margin-left: 0.1rem;
}
.mokey-phone input[type="tel"] {
	flex: 1 1 auto;
	min-width: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.mokey-dial-pop {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 1060;
	width: 20rem;
	max-width: min(20rem, 78vw);
	background: var(--mokey-surface);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-lg);
	overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
	.mokey-dial-pop:not([hidden]) {
		animation: mokey-dial-in 90ms ease-out;
	}
}
@keyframes mokey-dial-in {
	from { opacity: 0; transform: translateY(-2px); }
	to { opacity: 1; transform: none; }
}

.mokey-dial-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.65rem;
	border-bottom: 1px solid var(--bs-border-color);
	background: var(--mokey-surface);
}
.mokey-dial-search i {
	color: var(--mokey-eyebrow);
	font-size: 0.8rem;
}
.mokey-dial-input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--bs-body-color);
	font-size: 0.925rem;
}
.mokey-dial-input:focus {
	outline: none;
}

.mokey-dial-list {
	display: flex;
	flex-direction: column;
	max-height: 15rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}
.mokey-dial-opt {
	display: grid;
	grid-template-columns: 1.5rem 1fr auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.7rem;
	border-left: 2px solid transparent;
	cursor: pointer;
}
/* the active row carries the same 2px accent edge the left nav uses for the
   page you are on */
.mokey-dial-opt.is-active {
	background: var(--mokey-rail-active-bg);
	border-left-color: var(--mokey-accent);
}
.mokey-dial-name {
	font-size: 0.9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mokey-dial-opt .mokey-dial-code {
	color: var(--bs-secondary-color);
}
.mokey-dial-empty {
	margin: 0;
	padding: 0.9rem 0.7rem;
	color: var(--bs-secondary-color);
	font-size: 0.9rem;
	text-align: center;
}

@media (max-width: 575.98px) {
	.mokey-dial-pop {
		width: min(20rem, 90vw);
	}
}

.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--bs-body-color);
	border-color: var(--bs-border-color);
}
.table > :not(caption) > * > * {
	padding: 12px 16px;
}
.table > thead > tr > th {
	color: var(--bs-secondary-color);
	font-size: 0.75rem;
	font-weight: 500;
}

.theme-toggle {
	background: transparent;
	border: 0;
	border-radius: var(--bs-border-radius);
	color: var(--bs-secondary-color);
	padding: 0;
	line-height: 1;
	cursor: pointer;
}
.theme-toggle:hover {
	color: var(--bs-body-color);
}
.theme-toggle:focus-visible {
	outline: 2px solid var(--mokey-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}
.mokey-captcha {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px;
	background: var(--mokey-surface);
	border: 1px solid var(--mokey-border);
	border-radius: 8px;
}
/* the captcha PNG is dark ink on transparency, so it needs a light card in both themes */
.mokey-captcha img {
	max-width: 100%;
	height: auto;
	background: #fff;
	border-radius: 6px;
}
.mokey-captcha-new {
	align-self: flex-end;
	min-height: 32px;
	padding: 4px 8px;
}
@media (max-width: 575.98px) {
	.mokey-captcha-new {
		min-height: 44px;
		padding: 10px 12px;
	}
}

/* success toasts (site.js moves .alert-success out of the pane) */
.mokey-toasts {
	z-index: 1090;
}
.mokey-toast {
	--bs-toast-max-width: 420px;
	background: var(--mokey-ok-bg);
	color: var(--mokey-ink);
	border: 1px solid var(--mokey-border);
	border-radius: 12px;
	box-shadow: none;
}
.mokey-toast .toast-body {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.mokey-toast .fa-circle-check {
	color: var(--mokey-ok);
	line-height: inherit;
}
.mokey-toast .btn-close {
	flex: none;
	margin-left: auto;
}

.mokey-skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2000;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--mokey-accent);
	color: var(--mokey-on-accent);
	font-size: 0.875rem;
	text-decoration: none;
}
#main:focus {
	outline: none;
}