/*
 * The Mystical Door Support: the whole visual language in one file.
 *
 * Colours and type are mysticaldoor.com's own design tokens, so the support site
 * reads as part of the same place. There is no CSS framework underneath. The few
 * Bootstrap-style class names the templates still use (btn, panel, form-control,
 * alert, well) are defined here. Bootstrap 3 itself is loaded on one page only,
 * the staff article editor, whose rich-text toolbar and dialogs are built on it.
 */

:root {
	color-scheme: dark;
	--bg: #0e0b16;
	--panel: #18131f;
	--panel-2: #221a2c;
	--panel-3: #2c2239;
	--field: #120e1a;
	--line: rgba(255, 255, 255, 0.08);
	--line-strong: rgba(255, 255, 255, 0.16);
	--text: #ece6f3;
	--muted: #b5abc4;
	--gold: #e6bd6a;
	--gold-ink: #1d1405;
	--violet: #c27bff;
	--violet-deep: #7a3fc4;
	--danger: #e57b7b;
	--danger-deep: #a8323e;
	--success: #8fd19e;
	--book-oath: #5fae6a;
	--book-fog: #4f8fd6;
	--book-embers: #d0623f;
	--book-fourth: #c27bff;
	--serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ---------- base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Bootstrap 3, loaded on the article editor page, sets this to 10px, which would
	   shrink every rem-based size on that page to 62.5%. */
	font-size: 100%;
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--gold);
	text-decoration: none;
}

/* A link in a sentence is underlined as well as gold. Told apart from the words around it by
   colour alone, at 1.44:1 against them, it was invisible to anyone who cannot tell gold from the
   page's near-white (WCAG 1.4.1, which axe-core checks in tests/browser/accessibility.spec.js).
   Buttons, pills, lists of links and the game's name over the front page stand on their own and
   keep their look. */
.article-body a:not(.btn),
.narrow-page p a:not(.btn),
.help-block a:not(.btn),
.help-card p a:not(.btn),
.help-callout p a:not(.btn),
.help-list-blurb a:not(.btn) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--violet);
	outline-offset: 3px;
	border-radius: 4px;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.6rem;
	color: var(--text);
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.2;
}

h1 {
	font-size: clamp(1.8rem, 4vw, 2.4rem);
}

h2 {
	font-size: clamp(1.4rem, 3vw, 1.8rem);
}

h3 {
	font-size: 1.25rem;
}

p {
	margin: 0 0 1rem;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 1.5rem 0;
}

code {
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
	background: var(--panel-3);
	color: var(--gold);
	font-size: 0.9em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

fieldset {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
}

legend {
	display: block;
	width: 100%;
	margin-bottom: 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--line);
	color: var(--gold);
	font-family: var(--serif);
	font-size: 1.25rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: 1rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--gold);
	color: var(--gold-ink);
	font-weight: 700;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

.displayNone {
	display: none !important;
}

/* An icon from helpers/iconPaths.js, drawn by {{icon "name"}} as inline SVG: as tall as the text
   around it, its baseline on the text's, in the text's colour. Font Awesome's glyphs reach 1/7 em
   below the baseline, which the vertical-align puts back. */
.icon {
	display: inline-block;
	vertical-align: -0.1429em;
	fill: currentColor;
	overflow: visible;
}

.icon-spin {
	animation: icon-spin 2s linear infinite;
}

@keyframes icon-spin {
	to {
		transform: rotate(360deg);
	}
}

.text-muted {
	color: var(--muted);
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.pull-left {
	float: left;
}

.img-circle {
	border-radius: 50%;
}

/* ---------- page frame ---------- */

.container {
	width: 100%;
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.app-header {
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(34, 26, 44, 0.9), rgba(14, 11, 22, 0.95));
	padding: 1rem 0 0.9rem;
}

.app-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.app-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: #f7f0e1;
	font-family: var(--serif);
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
}

.app-brand:hover {
	color: #f7f0e1;
	text-decoration: none;
}

.brand-icon {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 10px;
	box-shadow: 0 0 18px rgba(194, 123, 255, 0.35);
	object-fit: cover;
}

.brand-text {
	text-shadow: 0 0 22px rgba(194, 123, 255, 0.4);
}

.app-bar-actions {
	display: flex;
	gap: 0.5rem;
}

.nav-toggle {
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--panel);
	color: var(--text);
	cursor: pointer;
	line-height: 1;
}

.nav-toggle:hover {
	border-color: var(--gold);
	color: var(--gold);
}

.nav-toggle {
	display: none;
}

/* The sidebar's search box, at the top of the page on a phone only: see phoneSearch. */
.phone-search {
	display: none;
}

.app-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.85rem;
}

.app-nav form {
	display: inline;
	margin: 0;
}

.app-nav .btn {
	border-color: var(--line-strong);
	background: rgba(24, 19, 31, 0.7);
	color: var(--text);
}

.app-nav .btn:hover,
.app-nav .btn:focus-visible {
	border-color: var(--gold);
	background: rgba(24, 19, 31, 0.9);
	color: var(--gold);
}

.app-nav .nav-staff {
	border-color: rgba(194, 123, 255, 0.4);
}

.message-alert {
	display: inline-block;
	margin-left: 0.2rem;
	color: var(--gold);
	font-weight: 700;
}

.app-content {
	min-height: calc(100vh - 220px);
	padding: 2rem 0 3.5rem;
}

.page-grid {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
}

.page-main {
	flex: 1 1 0;
	min-width: 0;
}

.page-aside {
	flex: 0 0 19rem;
	min-width: 0;
}

.app-footer {
	border-top: 1px solid var(--line);
	padding: 2rem 0 2.5rem;
	color: var(--muted);
	font-size: 0.9rem;
	text-align: center;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin-bottom: 0.75rem;
}

.footer-legal,
.footer-version {
	margin: 0.25rem 0 0;
}

/* Dimmed, but no further than 4.5:1 against the footer, which small text needs. At 0.65 it was
   4.3:1. */
.footer-version {
	opacity: 0.72;
	font-size: 0.8rem;
}

/* A button that reads as a link: "Google Play" in the footer, before the game is listed
   there, opens a dialog rather than going anywhere. */
.link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--gold);
	font: inherit;
	cursor: pointer;
}

.link-button:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-update {
	margin: 1.5rem 0 0;
}

.play-soon {
	width: min(100% - 32px, 420px);
	padding: 28px 24px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--text);
	text-align: center;
}

.play-soon::backdrop {
	background: rgba(8, 6, 14, 0.78);
}

.play-soon h2 {
	margin: 0 0 0.75rem;
	color: var(--gold);
	font-family: var(--serif);
	font-size: 1.35rem;
}

.play-soon p {
	margin: 0 0 1.25rem;
	color: var(--muted);
}

.play-soon form {
	margin: 0;
}

/* ---------- sign-in pages ---------- */

.auth-shell {
	display: grid;
	place-items: start center;
	min-height: calc(100vh - 160px);
	padding: 3rem 1.25rem;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(194, 123, 255, 0.18), transparent 60%),
		var(--bg);
}

.auth-card {
	width: 100%;
	max-width: 28rem;
	padding: 2rem;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	box-shadow: var(--shadow);
}

.auth-brand {
	margin-bottom: 1.5rem;
	text-align: center;
}

.auth-card h1 {
	font-size: 1.7rem;
}

.auth-back {
	margin: 1.25rem 0 0;
	font-size: 0.95rem;
}

/* ---------- buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--panel-3);
	color: var(--text);
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.btn:disabled,
.btn[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.btn-primary {
	border-color: var(--violet-deep);
	background: var(--violet-deep);
	color: #fbf7ff;
}

.btn-primary:hover {
	border-color: #8d52d6;
	background: #8d52d6;
	color: #fff;
}

.btn-default,
.btn-secondary {
	border-color: var(--line-strong);
	background: transparent;
	color: var(--text);
}

.btn-default:hover,
.btn-secondary:hover {
	border-color: var(--gold);
	color: var(--gold);
}

.btn-success,
.btn-warning {
	border-color: var(--gold);
	background: var(--gold);
	color: var(--gold-ink);
}

.btn-success:hover,
.btn-warning:hover {
	border-color: #f0cd85;
	background: #f0cd85;
	color: var(--gold-ink);
}

.btn-danger {
	border-color: var(--danger-deep);
	background: var(--danger-deep);
	color: #fff;
}

.btn-danger:hover {
	border-color: #c03d4a;
	background: #c03d4a;
	color: #fff;
}

.btn-xs {
	padding: 0.25rem 0.7rem;
	font-size: 0.82rem;
}

.btn-sm {
	padding: 0.35rem 0.85rem;
	font-size: 0.88rem;
}

.btn-lg {
	padding: 0.7rem 1.5rem;
	font-size: 1.05rem;
}

/* ---------- forms ---------- */

.form-group {
	margin-bottom: 1.1rem;
}

label {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--text);
	font-weight: 600;
}

.form-control {
	display: block;
	width: 100%;
	min-height: 2.6rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--field);
	color: var(--text);
	line-height: 1.4;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-control::placeholder {
	color: #8a8098;
}

.form-control:focus {
	border-color: var(--violet);
	outline: none;
	box-shadow: 0 0 0 3px rgba(194, 123, 255, 0.22);
}

textarea.form-control {
	min-height: 6rem;
	resize: vertical;
}

input[type="file"].form-control {
	padding: 0.45rem 0.6rem;
}

.input-sm {
	width: auto;
	min-height: 0;
	padding: 0.2rem 0.5rem;
	font-size: 0.85rem;
}

.help-block {
	display: block;
	margin-top: 0.35rem;
	color: var(--muted);
	font-size: 0.88rem;
}

.checkbox {
	margin: 0 0 1rem;
}

.checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-weight: 400;
	cursor: pointer;
}

.checkbox input {
	margin-top: 0.3rem;
	accent-color: var(--violet);
}

.form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0 1.25rem;
}

.inline-form {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

/* ---------- surfaces ---------- */

.alert {
	margin-bottom: 1.25rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--line-strong);
	border-left-width: 4px;
	border-radius: var(--radius-sm);
	background: var(--panel);
}

.alert-danger {
	border-color: rgba(229, 123, 123, 0.45);
	border-left-color: var(--danger);
	color: #f6c9c9;
}

.alert-success {
	border-color: rgba(143, 209, 158, 0.4);
	border-left-color: var(--success);
	color: #cfeed6;
}

.panel {
	margin-bottom: 1.5rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	box-shadow: var(--shadow);
}

.panel-heading {
	padding: 1.1rem 1.4rem;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
}

.panel-title {
	margin: 0;
	font-size: 1.2rem;
}

.panel-body {
	padding: 1.4rem;
}

.panel-footer {
	padding: 1rem 1.4rem;
	border-top: 1px solid var(--line);
	background: rgba(34, 26, 44, 0.55);
	color: var(--muted);
}

.panel-primary {
	border-top: 3px solid var(--violet-deep);
}

.well {
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-2);
}

.page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
}

.page-header h1 {
	margin: 0;
}

.empty-state {
	max-width: 48rem;
	padding: 2.75rem 1.5rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--muted);
	text-align: center;
}

.empty-state > .icon {
	margin-bottom: 0.5rem;
	color: var(--violet);
	font-size: 2rem;
}

/* The sidebar, with the search box and the topics, starts hidden on phones, so an
   empty list carries its own ways on. */
.empty-state-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0 0;
}

.empty-state-link {
	display: inline-block;
	padding: 0.5rem 0.25rem;
}

.not-found-search {
	margin: 1.25rem 0 1.75rem;
}

.not-found-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.narrow-page {
	max-width: 40rem;
	margin: 0 auto;
}

.profile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.profile-card h2 {
	font-size: 1.4rem;
}

.profile-card p:last-child {
	margin-bottom: 0;
}

/* ---------- Help Center: front page ---------- */

.help-hero {
	margin-bottom: 2.75rem;
	padding: clamp(2.5rem, 7vw, 4.75rem) 1.25rem clamp(2.25rem, 6vw, 4rem);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background:
		radial-gradient(ellipse at 50% 35%, rgba(14, 11, 22, 0.35) 0%, rgba(14, 11, 22, 0.82) 62%, rgba(14, 11, 22, 0.95) 100%),
		url("/public/img/help-hero.webp") center 68% / cover no-repeat;
	box-shadow: var(--shadow);
	text-align: center;
}

.help-hero-kicker {
	margin: 0;
	color: var(--gold);
	font-family: var(--serif);
	font-size: 1.15rem;
	font-style: italic;
}

/* The game's name above "How can we help?" leads to the game's own site, as the footer's first
   link does, looking as it did: gold and italic, underlined only to show it is a link. */
.help-hero-kicker a {
	color: inherit;
	text-decoration: none;
}

.help-hero-kicker a:hover,
.help-hero-kicker a:focus-visible {
	text-decoration: underline;
}

.help-hero h1 {
	margin: 0.2rem 0 1.4rem;
	color: #f7f0e1;
	font-size: clamp(2.2rem, 6vw, 3.4rem);
	text-shadow: 0 0 28px rgba(194, 123, 255, 0.5);
}

.help-search {
	display: flex;
	gap: 0.5rem;
}

.help-search .form-control {
	flex: 1 1 auto;
	min-width: 0;
}

.help-search-hero {
	max-width: 38rem;
	margin: 0 auto;
}

.help-search-hero .form-control {
	min-height: 3rem;
	border-radius: 999px;
	padding-left: 1.2rem;
	background: rgba(18, 14, 26, 0.92);
}

.help-hero-popular {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.45rem 0.6rem;
	margin: 1.25rem 0 0;
	color: var(--muted);
	font-size: 0.92rem;
}

.help-hero-popular a {
	padding: 0.15rem 0.75rem;
	border: 1px solid rgba(230, 189, 106, 0.4);
	border-radius: 999px;
	background: rgba(24, 19, 31, 0.75);
}

.help-section {
	margin-bottom: 2.75rem;
}

.help-section > h2 {
	color: var(--gold);
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}

.category-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.35rem 1.4rem;
	border: 1px solid var(--line);
	border-top: 3px solid var(--violet-deep);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	color: var(--text);
	transition: border-color 160ms ease, transform 160ms ease;
}

.category-card:hover,
.category-card:focus-visible {
	border-color: rgba(230, 189, 106, 0.55);
	text-decoration: none;
	transform: translateY(-2px);
}

.category-icon {
	color: var(--gold);
	font-size: 1.5rem;
}

.category-card h3 {
	margin: 0.2rem 0 0;
}

.category-card p {
	flex: 1;
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

.category-count {
	color: var(--violet);
	font-size: 0.85rem;
	font-weight: 600;
}

.book-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 1rem;
}

.book-spine {
	display: block;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-top: 3px solid var(--book);
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--text);
	font-family: var(--serif);
	font-size: 1.15rem;
}

.book-spine:hover,
.book-spine:focus-visible {
	border-color: var(--book);
	color: var(--book-text);
	text-decoration: none;
}

.book-spine.book-tag-fourth {
	font-style: italic;
}

.book-spine .icon {
	color: var(--book-text);
	font-size: 0.85em;
}

.book-spine-note {
	display: block;
	margin-top: 0.35rem;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 0.85rem;
	font-style: normal;
}

.help-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.25rem;
}

.help-card {
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
}

.help-card h2 {
	color: var(--gold);
	font-size: 1.35rem;
}

.help-card h3 {
	margin-bottom: 0.35rem;
}

.help-card p:last-child {
	margin-bottom: 0;
}

/* ---------- Help Center: tags ---------- */

.book-tag-oath {
	--book: var(--book-oath);
	--book-text: #a6dcae;
}

.book-tag-fog {
	--book: var(--book-fog);
	--book-text: #a8c9f2;
}

.book-tag-embers {
	--book: var(--book-embers);
	--book-text: #f2a98b;
}

.book-tag-fourth {
	--book: var(--book-fourth);
	--book-text: #dcb8ff;
}

.help-article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
	margin-top: 0.6rem;
	font-size: 0.82rem;
}

.category-tag,
.book-tag,
.book-chip,
.spoiler-tag,
.draft-tag,
.staff-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.65rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	line-height: 1.55;
}

.category-tag {
	color: var(--muted);
}

.book-tag,
.book-chip {
	border-color: var(--book, var(--line-strong));
	color: var(--book-text, var(--text));
}

.book-tag:hover,
.book-chip:hover,
.category-tag:hover {
	text-decoration: none;
	border-color: var(--gold);
}

.spoiler-tag {
	border-color: rgba(230, 189, 106, 0.45);
	color: var(--gold);
}

.draft-tag,
.staff-tag {
	border-color: var(--gold);
	background: var(--gold);
	color: var(--gold-ink);
	font-weight: 700;
}

.help-article-date {
	color: var(--muted);
}

/* ---------- Help Center: lists ---------- */

.help-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.6rem;
	color: var(--muted);
	font-size: 0.9rem;
}

.help-breadcrumb .icon {
	font-size: 0.7rem;
	opacity: 0.7;
}

.help-list-header {
	margin-bottom: 1.5rem;
}

.help-list-header h1 .icon {
	color: var(--gold);
	font-size: 0.8em;
}

.help-list-blurb {
	color: var(--muted);
	font-size: 1.05rem;
}

.book-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: 0.88rem;
}

.book-chip.active {
	background: var(--panel-3);
	border-color: var(--gold);
	color: var(--gold);
}

.help-article-list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.help-article-item {
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	transition: border-color 160ms ease;
}

.help-article-item:hover {
	border-color: var(--line-strong);
}

.help-article-link,
.help-article-link:hover {
	display: block;
	text-decoration: none;
}

.help-article-title {
	display: block;
	color: var(--text);
	font-family: var(--serif);
	font-size: 1.2rem;
	line-height: 1.3;
}

.help-article-link:hover .help-article-title,
.help-article-link:focus-visible .help-article-title {
	color: var(--gold);
}

.help-article-summary {
	display: block;
	margin-top: 0.2rem;
	color: var(--muted);
}

.help-pagination {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

/* ---------- Help Center: article ---------- */

.help-article .panel-heading {
	padding: 1.5rem 1.75rem 1.25rem;
}

.help-article .panel-title {
	font-size: clamp(1.7rem, 3.5vw, 2.3rem);
}

.help-article .panel-body {
	padding: 1.6rem 1.75rem;
}

.help-article .panel-footer {
	display: grid;
	gap: 0.75rem;
	padding: 1.1rem 1.75rem;
}

.help-article-lead {
	margin: 0.5rem 0 0;
	color: var(--muted);
	font-size: 1.1rem;
}

.article-admin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.article-body {
	font-size: 1.05rem;
	line-height: 1.72;
}

.article-body > :last-child {
	margin-bottom: 0;
}

.article-body h2,
.article-body h3,
.article-body h4 {
	margin-top: 1.6rem;
	color: var(--gold);
}

.article-body ul,
.article-body ol {
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.article-body li + li {
	margin-top: 0.35rem;
}

.article-body blockquote {
	margin: 0 0 1rem;
	padding: 0.5rem 1rem;
	border-left: 3px solid var(--violet);
	color: var(--muted);
}

.article-body table {
	width: 100%;
	margin: 0 0 1rem;
	border-collapse: collapse;
}

.article-body th,
.article-body td {
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--line-strong);
	text-align: left;
	vertical-align: top;
}

.article-body th {
	background: var(--panel-2);
	color: var(--gold);
	font-family: var(--serif);
	font-weight: 600;
}

.article-body pre {
	overflow-x: auto;
	padding: 0.9rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--field);
}

.article-body details.spoiler {
	margin: 0 0 1rem;
	padding: 0.6rem 0.9rem;
	border: 1px dashed rgba(230, 189, 106, 0.45);
	border-radius: var(--radius-sm);
}

.article-body details.spoiler > summary {
	color: var(--gold);
	cursor: pointer;
}

.spoiler-gate {
	border: 1px dashed rgba(230, 189, 106, 0.5);
	border-radius: var(--radius-sm);
	background: rgba(230, 189, 106, 0.04);
}

.spoiler-gate > summary {
	display: block;
	padding: 1rem 1.25rem;
	color: var(--gold);
	cursor: pointer;
	list-style: none;
}

.spoiler-gate > summary::-webkit-details-marker {
	display: none;
}

.spoiler-reveal {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.75rem;
	border-radius: 999px;
	background: var(--gold);
	color: var(--gold-ink);
	font-size: 0.85rem;
	font-weight: 700;
}

.spoiler-gate[open] {
	border-style: solid;
	background: transparent;
}

.spoiler-gate[open] > summary {
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.9rem;
}

.spoiler-gate[open] .spoiler-reveal {
	display: none;
}

.spoiler-gate > .article-body,
.spoiler-gate > .article-attachments {
	padding: 1.25rem;
}

.article-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.article-attachment-image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.existing-article-attachment {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.5rem 0;
}

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

.helpful-question {
	margin-right: 0.25rem;
	color: var(--text);
	font-family: var(--serif);
	font-size: 1.05rem;
}

.helpful-result {
	color: var(--success);
	font-size: 0.9rem;
}

/* On a line of its own under the buttons. No display here, so the hidden attribute still hides it. */
.helpful-followup {
	flex-basis: 100%;
	margin: 0.25rem 0 0;
	color: var(--muted);
	font-size: 0.92rem;
}

.article-meta {
	color: var(--muted);
	font-size: 0.88rem;
}

/* A dot between the facts under an article that are showing. The helpful line hides
   until someone answers, and view counts and comments can each be switched off, so a dot
   written after each fact could be left dangling at the end. */
.article-meta > :not(.displayNone) ~ :not(.displayNone)::before {
	content: "\00b7";
	margin: 0 0.45em;
}

.article-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* More from the same topic, between the article and Still stuck? */
.related-articles {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
}

.related-articles h2 {
	margin: 0 0 0.6rem;
	color: var(--gold);
	font-size: 1.05rem;
}

.related-articles ul {
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.related-articles li + li {
	margin-top: 0.35rem;
}

.related-all {
	font-size: 0.92rem;
}

.help-callout {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid rgba(194, 123, 255, 0.35);
	border-radius: var(--radius);
	background:
		radial-gradient(ellipse at 0% 0%, rgba(194, 123, 255, 0.16), transparent 60%),
		var(--panel);
}

.help-callout > .icon {
	margin-top: 0.15rem;
	color: var(--violet);
	font-size: 1.5rem;
}

.help-callout p {
	margin: 0;
}

.comments-panel {
	display: none;
}

.comments-panel.comments-visible {
	display: block;
}

.comments-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.post-comment {
	display: none;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--line);
}

.post-comment.post-comment-open {
	display: block;
}

/* "View comments" carries both of its labels; whether the comments are showing picks one. */
.show-comments[aria-expanded="true"] .when-closed,
.show-comments:not([aria-expanded="true"]) .when-open {
	display: none;
}

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

.media {
	display: flex;
	gap: 0.9rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--line);
}

.media:first-child {
	border-top: 0;
	padding-top: 0;
}

.media-object {
	flex: 0 0 auto;
	width: 45px;
	height: 45px;
	object-fit: cover;
	background: var(--panel-3);
}

.media-body {
	flex: 1 1 auto;
	min-width: 0;
}

.media-body .delete-comment {
	float: right;
}

.comment-text {
	margin: 0 0 0.3rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* ---------- sidebar ---------- */

.sidebar-panel {
	box-shadow: none;
}

.sidebar-panel .panel-heading {
	padding: 0.85rem 1.1rem;
}

.sidebar-panel .panel-title {
	color: var(--gold);
	font-size: 1.05rem;
}

.sidebar-panel .panel-body {
	padding: 1rem 1.1rem;
}

.sidebar-panel .help-search .btn {
	border-radius: var(--radius-sm);
}

.topic-list,
.popular-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.topic-list a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.5rem;
	border-radius: var(--radius-sm);
	color: var(--text);
}

.topic-list a:hover,
.topic-list a.active {
	background: var(--panel-3);
	color: var(--gold);
	text-decoration: none;
}

.topic-list .icon {
	width: 1.1rem;
	color: var(--gold);
	text-align: center;
}

.topic-count {
	margin-left: auto;
	color: var(--muted);
	font-size: 0.82rem;
}

.popular-list li + li {
	margin-top: 0.5rem;
}

.stat-list {
	margin: 0;
}

.stat-list div {
	display: flex;
	justify-content: space-between;
	padding: 0.25rem 0;
}

.stat-list dt {
	color: var(--muted);
	font-weight: 400;
}

.stat-list dd {
	margin: 0;
	font-weight: 600;
}

/* ---------- article editor (staff) ---------- */

.editor-panel .panel-body {
	padding: 1.5rem;
}

.editor-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

/* A label for what is not a form field: the article's text, the files attached already. */
.editor-label {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--text);
	font-weight: 600;
}

/* The toolbar, its buttons in groups, staying in view while a long article scrolls under it.
   public/js/articleEditor.js. */
.editor-toolbar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	padding: 0.45rem;
	border: 1px solid var(--line-strong);
	border-bottom: 0;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background: var(--panel-2);
}

.editor-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem;
}

.editor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	margin: 0;
	padding: 0 0.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.editor-button:hover,
.editor-button[aria-pressed="true"] {
	border-color: var(--line-strong);
	background: var(--panel-3);
	color: var(--gold);
}

.editor-button:disabled {
	opacity: 0.4;
	cursor: default;
}

.editor-text-button {
	font-family: var(--serif);
}

/* The colour picker sits inside its button, covering it, so a click on the brush opens it. */
.editor-colour {
	position: relative;
	margin: 0;
}

.editor-colour input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* The article as it will look: it takes the article page's own styles (.article-body). */
.editor-area,
.editor-source {
	min-height: 22rem;
	max-height: 70vh;
	overflow: auto;
	margin: 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--line-strong);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	background: var(--field);
	color: var(--text);
}

.editor-area:focus,
.editor-source:focus {
	border-color: var(--violet);
	outline: none;
	box-shadow: 0 0 0 3px rgba(194, 123, 255, 0.22);
}

.editor-area[hidden],
.editor-source[hidden] {
	display: none;
}

.editor-source {
	width: 100%;
	font-family: Consolas, "SFMono-Regular", Menlo, monospace;
	font-size: 0.88rem;
	line-height: 1.5;
}

.editor-area img {
	max-width: 100%;
	height: auto;
}

.editor-area td,
.editor-area th {
	min-width: 3rem;
	padding: 0.35rem 0.5rem;
}

/* The toolbar's dialogs: a link, a picture, a table. */
.editor-dialog {
	width: min(100% - 32px, 460px);
	padding: 24px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--text);
}

.editor-dialog::backdrop {
	background: rgba(8, 6, 14, 0.78);
}

.editor-dialog h2 {
	margin: 0 0 1rem;
	color: var(--gold);
	font-family: var(--serif);
	font-size: 1.35rem;
}

.editor-dialog form {
	margin: 0;
}

.editor-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: 1rem;
}

.editor-dialog-problem {
	margin: 0.5rem 0 0;
	color: var(--danger);
}

/* ---------- administration ---------- */

.user-list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.user-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
}

.user-card-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.75rem;
}

.user-card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

/* ---------- messages ---------- */

.list-group {
	margin: 0;
}

.message-list .list-group-item {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--line);
}

.message-list .list-group-item:first-child {
	border-top: 0;
}

.message-list .list-group-item:hover {
	background: rgba(194, 123, 255, 0.06);
}

.message-link,
.message-link:hover {
	display: block;
	color: inherit;
	text-decoration: none;
}

.message-list-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.message-list-row small,
.message-sender {
	display: block;
	color: var(--muted);
	font-size: 0.88rem;
}

.message-list .list-group-item p {
	max-width: 70ch;
	margin: 0.35rem 0 0;
	overflow: hidden;
	color: var(--muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.message-unread {
	border-left: 4px solid var(--gold);
}

.message-unread strong {
	color: var(--gold);
}

.message-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.message-actions .message-action-active {
	border-color: var(--gold);
	color: var(--gold);
}

.message-delete-form {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
}

.message-attachment-link {
	margin-top: 0.6rem;
}

.message-form-panel,
.message-detail {
	max-width: 48rem;
}

.message-detail .panel-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.message-detail .message-delete-form {
	margin: 0;
}

.message-body {
	white-space: pre-wrap;
}

/* ---------- support tickets ---------- */

/* The contact form's trap for scripts: out of sight, and out of reach of the keyboard. */
.contact-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-details,
.ticket-details {
	font-family: Consolas, "SFMono-Regular", Menlo, monospace;
	font-size: 0.88rem;
}

/* Under the game details when the game filled them in: see public/js/contact.js. It sets no
   display of its own, so the hidden attribute it starts with keeps it out of sight. */
.contact-filled {
	margin: 0.35rem 0 0;
	color: var(--gold);
	font-size: 0.88rem;
}

/* Under the subject, articles that might answer the message before it is sent: see
   public/js/contact.js. Like .contact-filled, it sets no display of its own, so the hidden
   attribute it starts with keeps it out of sight. */
.contact-suggestions {
	margin: 0.5rem 0 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	font-size: 0.92rem;
}

.contact-suggestions p {
	margin: 0 0 0.4rem;
	color: var(--gold);
}

.contact-suggestions ul {
	margin: 0 0 0.4rem;
	padding: 0;
	list-style: none;
}

.contact-suggestions li + li {
	margin-top: 0.3rem;
}

.contact-suggestions small {
	color: var(--muted);
}

/* On the page that says a message was sent, a copy of it for the player to keep: the server
   cannot email one. See views/contactSent.handlebars. */
.contact-copy {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--panel);
}

.contact-copy h2 {
	margin: 0 0 0.25rem;
	font-size: 1.15rem;
}

.contact-copy dl {
	margin: 1rem 0 0;
}

.contact-copy dt {
	color: var(--muted);
	font-size: 0.88rem;
	font-weight: 600;
}

.contact-copy dd {
	margin: 0.15rem 0 0.9rem;
	overflow-wrap: anywhere;
}

.contact-copy dd:last-child {
	margin-bottom: 0;
}

/* A message keeps the lines it was written in. */
.contact-copy-message {
	white-space: pre-wrap;
}

.help-block.contact-problem {
	color: var(--danger);
}

.ticket-search {
	margin-bottom: 1rem;
}

.ticket-filters {
	margin-bottom: 1.25rem;
}

.ticket-link,
.ticket-link:hover {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ticket-number {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.ticket-meta {
	display: block;
	margin: 0.35rem 0 0;
	color: var(--muted);
	font-size: 0.88rem;
}

/* Staff: searches that found nothing (views/missedSearches.handlebars). Each row's Clear button
   sits to the right of its words. */
.missed-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.missed-search form {
	flex-shrink: 0;
}

/* ---------- passkeys: the sign-in step and the staff page ---------- */

.page-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.passkey-status {
	min-height: 1.5em;
	margin: 0.75rem 0 0;
	color: var(--muted);
}

.passkey-recovery {
	margin-top: 1.25rem;
}

.passkey-recovery summary {
	cursor: pointer;
	color: var(--gold);
}

.passkey-recovery form {
	margin-top: 1rem;
}

.passkeys-page h2 {
	margin-top: 2rem;
	font-size: 1.3rem;
}

.passkey-list {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.passkey {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
}

.passkey + .passkey {
	border-top: 1px solid var(--line);
}

.passkey .ticket-meta {
	display: block;
}

.passkey form {
	flex-shrink: 0;
}

.recovery-codes {
	margin: 1.5rem 0;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--panel);
}

.recovery-codes h2 {
	margin-top: 0;
}

.recovery-code-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.5rem 1.5rem;
	margin: 1rem 0 1.25rem;
	padding-left: 1.5rem;
}

.recovery-code-list code {
	font-size: 1.05rem;
	letter-spacing: 0.04em;
}

.ticket-status {
	display: inline-block;
	padding: 0 0.6rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.6;
	white-space: nowrap;
}

.ticket-status-new {
	border-color: var(--gold);
	background: var(--gold);
	color: var(--gold-ink);
	font-weight: 700;
}

.ticket-status-open {
	border-color: rgba(194, 123, 255, 0.55);
	color: var(--violet);
}

.ticket-status-closed {
	color: var(--muted);
}

.ticket-request .panel-heading .ticket-meta {
	margin: 0;
}

.ticket-request .ticket-from {
	margin: 0.35rem 0 0;
}

.ticket-text {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ticket-subheading {
	margin: 1.5rem 0 0.6rem;
	font-size: 1rem;
}

.ticket-details {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--field);
	color: var(--text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ticket-screenshots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.75rem;
}

.ticket-screenshots a {
	display: block;
	color: var(--muted);
	font-size: 0.8rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ticket-screenshots img {
	display: block;
	width: 100%;
	height: 12rem;
	margin-bottom: 0.35rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--field);
	object-fit: cover;
	object-position: top;
}

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

.ticket-notes {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.ticket-notes li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line);
}

.ticket-notes .ticket-meta {
	margin: 0 0 0.25rem;
}

/* ---------- small screens ---------- */

@media (max-width: 767px) {
	.app-header {
		padding: 0.8rem 0 0.7rem;
	}

	.brand-icon {
		width: 34px;
		height: 34px;
	}

	.nav-toggle {
		display: inline-block;
	}

	.app-nav {
		display: none;
		flex-direction: column;
	}

	.app-nav.nav-open {
		display: flex;
	}

	.app-nav .btn,
	.app-nav form,
	.app-nav form .btn {
		width: 100%;
	}

	.app-content {
		padding: 1.5rem 0 2.5rem;
	}

	.page-grid {
		display: block;
	}

	/* No sidebar on phones. Its search box is at the top of the page instead, and the
	   topics are on the front page. A button for it took a second unlabeled icon in the
	   header, and opening it replaced the article. */
	.page-aside {
		display: none;
	}

	.phone-search {
		display: flex;
		margin-bottom: 1.25rem;
	}

	/* Nothing a thumb taps is under 40px tall on a phone. Book chips and topic tags were 26
	   to 28px, the menu's buttons and Yes and No 27px, and the breadcrumbs and footer links
	   only as tall as their text. Tags that are not links grow too, so a row of them stays
	   even. The links are inline-flex so their text stays centred in the taller box. */
	.btn,
	.category-tag,
	.book-tag,
	.book-chip,
	.spoiler-tag,
	.draft-tag,
	.staff-tag {
		min-height: 2.5rem;
	}

	.category-tag,
	.book-tag,
	.book-chip,
	.spoiler-tag,
	.draft-tag,
	.staff-tag {
		padding-left: 0.85rem;
		padding-right: 0.85rem;
	}

	.help-hero-kicker a,
	.editor-button,
	.help-hero-popular a,
	.help-breadcrumb a,
	.help-card-link,
	.related-articles li a,
	.related-all,
	.contact-suggestions li a,
	.footer-links a,
	.footer-links .link-button {
		display: inline-flex;
		align-items: center;
		min-height: 2.5rem;
	}

	.panel-heading,
	.panel-body,
	.panel-footer,
	.help-article .panel-heading,
	.help-article .panel-body,
	.help-article .panel-footer {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}

	.help-search-hero {
		flex-direction: column;
	}

	.message-list-row {
		flex-direction: column;
		gap: 0.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}

	.btn:hover,
	.category-card:hover {
		transform: none;
	}
}

/* The dialog shown while something is being sent: an article from the editor (public/js/scripts.js)
   and a message from the contact form (public/js/contact.js). One place for both, since both pages
   load this stylesheet. */
.save-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 6, 14, 0.78);
}
.save-overlay[hidden],
.save-overlay [hidden] {
  display: none !important;
}
.save-box {
  width: 100%;
  max-width: 420px;
  padding: 28px 24px;
  text-align: center;
  color: #ece6f3;
  background: #18131f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.save-spinner {
  display: inline-block;
  color: #e6bd6a;
  font-size: 3em;
  line-height: 1;
  margin-bottom: 14px;
}
.save-status {
  font-size: 1.2em;
  margin: 0 0 8px;
}
.save-detail {
  color: #b5abc4;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.save-back {
  margin-top: 16px;
}