/*
 * 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;
	--book-oath-text: #a6dcae;
	--book-fog-text: #a8c9f2;
	--book-embers-text: #f2a98b;
	--book-fourth-text: #dcb8ff;
	--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);
	/* What the rules below draw with beyond the palette: the gold, violet and panels again as
	   channels, for the rules that make them translucent, and the header's, the front page's and
	   the dialogs' own colours. Each is the game's, as it was written into those rules before
	   Whimbrel's theme (the end of this file) gave them values of its own. */
	--gold-rgb: 230, 189, 106;
	--violet-rgb: 194, 123, 255;
	--danger-rgb: 229, 123, 123;
	--success-rgb: 143, 209, 158;
	--panel-rgb: 24, 19, 31;
	--panel-2-rgb: 34, 26, 44;
	--ink-rgb: 255, 255, 255;
	--title: #f7f0e1;
	--placeholder: #8a8098;
	--danger-text: #f6c9c9;
	--success-text: #cfeed6;
	--btn-primary-ink: #fbf7ff;
	--btn-primary-hover: #8d52d6;
	--btn-primary-hover-ink: #fff;
	--gold-hover: #f0cd85;
	--btn-danger-ink: #fff;
	--btn-danger-hover: #c03d4a;
	--header-bg: linear-gradient(180deg, rgba(34, 26, 44, 0.9), rgba(14, 11, 22, 0.95));
	--nav-bg: rgba(24, 19, 31, 0.7);
	--nav-bg-hover: rgba(24, 19, 31, 0.9);
	--icon-glow: 0 0 18px rgba(194, 123, 255, 0.35);
	--brand-glow: 0 0 22px rgba(194, 123, 255, 0.4);
	--hero-glow: 0 0 28px rgba(194, 123, 255, 0.5);
	--hero-bg:
		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;
	--hero-field: rgba(18, 14, 26, 0.92);
	--hero-chip: rgba(24, 19, 31, 0.75);
	--card-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	--box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	--scrim: rgba(8, 6, 14, 0.78);
}

/* A dialog's ::backdrop inherited nothing from :root until Chrome 122, Firefox 120 and Safari
   17.4, so it is given its scrim itself: the game opens the Help Center in a Custom Tab, and
   Android 7's last Chrome is 119. Its own rule, since a browser that does not know ::backdrop
   would drop every property in a rule that named it beside :root. */
::backdrop {
	--scrim: rgba(8, 6, 14, 0.78);
}

/* ---------- 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: var(--header-bg);
	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: var(--title);
	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: var(--title);
	text-decoration: none;
}

.brand-icon {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 10px;
	box-shadow: var(--icon-glow);
	object-fit: cover;
}

.brand-text {
	text-shadow: var(--brand-glow);
}

.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: var(--nav-bg);
	color: var(--text);
}

.app-nav .btn:hover,
.app-nav .btn:focus-visible {
	border-color: var(--gold);
	background: var(--nav-bg-hover);
	color: var(--gold);
}

.app-nav .nav-staff {
	border-color: rgba(var(--violet-rgb), 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: var(--scrim);
}

.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(var(--violet-rgb), 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: var(--btn-primary-ink);
}

.btn-primary:hover {
	border-color: var(--btn-primary-hover);
	background: var(--btn-primary-hover);
	color: var(--btn-primary-hover-ink);
}

.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: var(--gold-hover);
	background: var(--gold-hover);
	color: var(--gold-ink);
}

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

.btn-danger:hover {
	border-color: var(--btn-danger-hover);
	background: var(--btn-danger-hover);
	color: var(--btn-danger-ink);
}

.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: var(--placeholder);
}

.form-control:focus {
	border-color: var(--violet);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 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(var(--danger-rgb), 0.45);
	border-left-color: var(--danger);
	color: var(--danger-text);
}

.alert-success {
	border-color: rgba(var(--success-rgb), 0.4);
	border-left-color: var(--success);
	color: var(--success-text);
}

.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(var(--panel-2-rgb), 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: var(--hero-bg);
	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: var(--title);
	font-size: clamp(2.2rem, 6vw, 3.4rem);
	text-shadow: var(--hero-glow);
}

.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: var(--hero-field);
}

.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(var(--gold-rgb), 0.4);
	border-radius: 999px;
	background: var(--hero-chip);
}

.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: var(--card-shadow);
	color: var(--text);
	transition: border-color 160ms ease, transform 160ms ease;
}

.category-card:hover,
.category-card:focus-visible {
	border-color: rgba(var(--gold-rgb), 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: var(--book-oath-text);
}

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

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

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

.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(var(--gold-rgb), 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(var(--gold-rgb), 0.45);
	border-radius: var(--radius-sm);
}

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

.spoiler-gate {
	border: 1px dashed rgba(var(--gold-rgb), 0.5);
	border-radius: var(--radius-sm);
	background: rgba(var(--gold-rgb), 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(var(--violet-rgb), 0.35);
	border-radius: var(--radius);
	background:
		radial-gradient(ellipse at 0% 0%, rgba(var(--violet-rgb), 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(var(--violet-rgb), 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: var(--scrim);
}

.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(var(--violet-rgb), 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(var(--violet-rgb), 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: var(--scrim);
}
.save-overlay[hidden],
.save-overlay [hidden] {
  display: none !important;
}
.save-box {
  width: 100%;
  max-width: 420px;
  padding: 28px 24px;
  text-align: center;
  color: var(--text);
  background: var(--panel);
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
}
.save-spinner {
  display: inline-block;
  color: var(--gold);
  font-size: 3em;
  line-height: 1;
  margin-bottom: 14px;
}
.save-status {
  font-size: 1.2em;
  margin: 0 0 8px;
}
.save-detail {
  color: var(--muted);
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.save-back {
  margin-top: 16px;
}

/* ---------- Whimbrel ---------- */

/* Whimbrel's Help Center, which server/products.js gives the theme "whimbrel": the cream and deep
   teal of its icon, the bird whose bill runs on as a pen's line, where the game's is night and
   gold. The page is cream paper in teal ink. The header, the front page's hero and the footer are
   the icon's teal lettered in its cream, and the hero ends in the icon's line, drawn as a pen's
   stroke (public/img/whimbrel-hero.svg). Headings are a plain sans-serif rather than the game's
   book face, and the corners are rounder, as the icon's are. The rules above draw in the tokens
   alone, so this gives the tokens Whimbrel's values, and the teal bands their own inside them.
   tests/browser/accessibility.spec.js holds Whimbrel's pages to WCAG 2.1 AA as it does the game's. */
:root[data-theme="whimbrel"] {
	color-scheme: light;
	--bg: #f5eee2;
	--panel: #fffbf4;
	--panel-2: #fbf4e8;
	--panel-3: #efe4d1;
	--field: #fffdf9;
	--line: rgba(4, 67, 75, 0.14);
	--line-strong: rgba(4, 67, 75, 0.28);
	--text: #13302f;
	--muted: #4b6463;
	--gold: #0b5f64;
	--gold-ink: #fdf3e2;
	--violet: #a3461d;
	--violet-deep: #04434b;
	--danger: #b3261e;
	--success: #2b7349;
	--book-oath-text: #2e6b37;
	--book-fog-text: #285a91;
	--book-embers-text: #9a3a1b;
	--book-fourth-text: #6a3ca6;
	--serif: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--radius: 18px;
	--radius-sm: 10px;
	--shadow: 0 10px 30px rgba(4, 67, 75, 0.1);
	--gold-rgb: 11, 95, 100;
	--violet-rgb: 163, 70, 29;
	--danger-rgb: 179, 38, 30;
	--success-rgb: 43, 115, 73;
	--panel-rgb: 255, 251, 244;
	--panel-2-rgb: 251, 244, 232;
	--ink-rgb: 4, 67, 75;
	--title: #fdf3e2;
	--placeholder: #5f7372;
	--danger-text: #8f1d17;
	--success-text: #215a39;
	--btn-primary-ink: #fdf3e2;
	--btn-primary-hover: #0b5f64;
	--btn-primary-hover-ink: #fff;
	--gold-hover: #0f7178;
	--header-bg: #04434b;
	--icon-glow: 0 0 0 1px rgba(253, 239, 219, 0.3);
	--brand-glow: none;
	--hero-glow: none;
	--hero-bg:
		url("/public/img/whimbrel-hero.svg") center bottom / max(100%, 48rem) auto no-repeat,
		linear-gradient(160deg, #075159 0%, #04434b 55%, #033940 100%);
	--hero-field: #03373e;
	--card-shadow: 0 4px 14px rgba(4, 67, 75, 0.08);
	--box-shadow: 0 12px 40px rgba(4, 67, 75, 0.25);
	--scrim: rgba(8, 40, 43, 0.6);
}

/* Its dialogs' scrim, for a ::backdrop that inherits nothing (the game's, near the top). */
:root[data-theme="whimbrel"] ::backdrop {
	--scrim: rgba(8, 40, 43, 0.6);
}

/* The teal bands, lettered in cream, with sand for their links and their one button. */
:root[data-theme="whimbrel"] .app-header,
:root[data-theme="whimbrel"] .help-hero,
:root[data-theme="whimbrel"] .app-footer {
	--text: #fdf3e2;
	--muted: #c6dad6;
	--gold: #f2d7a6;
	--gold-rgb: 242, 215, 166;
	--gold-ink: #04434b;
	--violet: #f2d7a6;
	--violet-deep: #f2d7a6;
	--btn-primary-ink: #04434b;
	--btn-primary-hover: #fdf3e2;
	--btn-primary-hover-ink: #04434b;
	--line: rgba(253, 239, 219, 0.16);
	--line-strong: rgba(253, 239, 219, 0.3);
	--panel: #075159;
	--placeholder: #a9c3bf;
	--nav-bg: rgba(3, 52, 58, 0.55);
	--nav-bg-hover: rgba(3, 52, 58, 0.9);
	--hero-chip: rgba(3, 52, 58, 0.7);
}

:root[data-theme="whimbrel"] .app-footer {
	border-top: 0;
	background: var(--header-bg);
}

:root[data-theme="whimbrel"] .app-header {
	border-bottom: 0;
}

:root[data-theme="whimbrel"] h1,
:root[data-theme="whimbrel"] h2 {
	letter-spacing: -0.01em;
}

:root[data-theme="whimbrel"] .help-hero {
	padding-bottom: clamp(5.5rem, 12vw, 8rem);
	border: 0;
}

/* The product's name over "How can we help?", in the small capitals whimbrel.mysticaldoor.com
   gives its own kicker, where the game's is gold italic. */
:root[data-theme="whimbrel"] .help-hero-kicker {
	font-family: var(--sans);
	font-size: 0.85rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ---------- Siegebreaker ---------- */

/* Siegebreaker's Help Center, which server/products.js gives the theme "siegebreaker": dusk over the
   valley in its title painting, where the game's is violet night and gold. It stays dark, as its
   launcher icon is, so the rules above read as they do on the game's pages, but its night is warmer,
   its gold is the amber of the sunset, its violet is the ember of the sky and the burnt red of the
   rope and timber, and the front page's picture is the painting's boulder in flight over the castle
   (public/img/siegebreaker-hero.webp), where the game's is its door. Headings keep the book face: it
   is a game of castles. tests/browser/accessibility.spec.js holds its pages to WCAG 2.1 AA. */
:root[data-theme="siegebreaker"] {
	color-scheme: dark;
	--bg: #14111a;
	--panel: #1d1922;
	--panel-2: #272029;
	--panel-3: #312832;
	--field: #17131c;
	--line: rgba(255, 236, 214, 0.09);
	--line-strong: rgba(255, 236, 214, 0.18);
	--text: #f1e8de;
	--muted: #c4b6a8;
	--gold: #f2b066;
	--gold-ink: #22140a;
	--violet: #f08a5d;
	--violet-deep: #a8431f;
	--gold-rgb: 242, 176, 102;
	--violet-rgb: 240, 138, 93;
	--panel-rgb: 29, 25, 34;
	--panel-2-rgb: 39, 32, 41;
	--ink-rgb: 255, 236, 214;
	--title: #fbefe0;
	--placeholder: #978a7e;
	--btn-primary-ink: #fff7ef;
	--btn-primary-hover: #bf5228;
	--btn-primary-hover-ink: #fff;
	--gold-hover: #f6c48a;
	--header-bg: linear-gradient(180deg, rgba(42, 30, 30, 0.92), rgba(18, 14, 20, 0.96));
	--nav-bg: rgba(30, 24, 30, 0.7);
	--nav-bg-hover: rgba(30, 24, 30, 0.9);
	--icon-glow: 0 0 18px rgba(240, 138, 93, 0.3);
	--brand-glow: 0 0 22px rgba(240, 138, 93, 0.35);
	--hero-glow: 0 0 28px rgba(240, 138, 93, 0.45);
	--hero-bg:
		radial-gradient(ellipse at 50% 35%, rgba(20, 17, 26, 0.3) 0%, rgba(20, 17, 26, 0.8) 62%, rgba(20, 17, 26, 0.95) 100%),
		url("/public/img/siegebreaker-hero.webp") center 30% / cover no-repeat;
	--hero-field: rgba(22, 17, 24, 0.92);
	--hero-chip: rgba(30, 24, 30, 0.75);
	--scrim: rgba(12, 9, 12, 0.78);
}

/* Its dialogs' scrim, for a ::backdrop that inherits nothing (the game's, near the top). */
:root[data-theme="siegebreaker"] ::backdrop {
	--scrim: rgba(12, 9, 12, 0.78);
}