/* The consoles and the forum.

   The rules below the variables were taken from www.orbliterate.com, whose
   consoles these are, and every one is scoped to .console so nothing here
   reaches the page around it. Loaded only by the pages that use them. */

.console {
	--fs-label: 12px;
	--fs-ui: 13px;
	--fs-body: 15px;
	--fs-h3: 15px;
	--fs-h2-sm: 20px;
	--fs-h2: 20px;
	--fs-h1: 26px;
	--fs-h1-hero: 26px;
	--cloud: #f3f1ed;
	--paper: #fbfaf8;
	--pearl: #eeeaf1;
	--lavender: #d3ccd8;
	--lavender-mid: #b6b1c3;
	--violet: #565167;
	--violet-deep: #312b55;
	--muted: #6f6a7c;
	--blue: #5fa5e1;
	--blue-deep: #267fc8;
	--orange: #a85d2f;
	--orange-deep: #5f240a;
	--gold: #e3b958;
	--green: #758d52;
	--danger: #bb4a34;
	--line: rgba(86, 81, 103, .2);
	--line-soft: rgba(86, 81, 103, .1);
	--shadow: 0 18px 50px rgba(66, 59, 87, .13);
	--shadow-soft: 0 9px 24px rgba(66, 59, 87, .1);
	--display: "Gorditas", Georgia, serif;
	--body: "Inter", system-ui, sans-serif;
	--shell: min(1280px, calc(100% - 56px));
	--header-height: 60px;
	--header-offset: 74px;
	--logo-shadow-opacity: .8;

	/* This site's own colours and faces in place of the ones above. */
	--orange: #e07902;
	--orange-deep: #c66c04;
	--violet: #c66c04;
	--violet-deep: #222222;
	--muted: #666666;
	--paper: #ffffff;
	--cloud: #f4f4f4;
	--pearl: #fceddc;
	--lavender: #d8d8d8;
	--lavender-mid: #b8b8b8;
	--line: rgba(0, 0, 0, .2);
	--line-soft: rgba(0, 0, 0, .1);
	--shadow: 0 2px 8px rgba(0, 0, 0, .12);
	--shadow-soft: 0 1px 4px rgba(0, 0, 0, .1);
	--display: 'Roboto', sans-serif;
	--body: 'Roboto', sans-serif;
	--shell: 100%;
	--fs-h3: 15px;
	--fs-h2-sm: 20px;
	--fs-h2: 20px;
	--fs-h1: 26px;
	--fs-body: 15px;
	/* The accent the consoles were drawn with was blue. Here it is the
	   orange of the rest of the site. */
	--blue: #e07902;
	--blue-deep: #c66c04;
	--danger: #b3261e;
}

.console [hidden] {
	display: none !important;
}

#content-after {
	margin: 0 30px 10px 10px;
}

/* Form controls, which the consoles assume are styled before any class is. */

.console button,
.console input,
.console select,
.console textarea {
	font: inherit;
}

.console input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.console textarea,
.console select {
	box-sizing: border-box;
	width: 100%;
	min-height: 34px;
	padding: 6px 10px;
	border: 1px solid var(--lavender-mid);
	border-radius: 5px;
	outline: 0;
	color: var(--violet-deep);
	background: white;
}

.console textarea {
	line-height: 1.4;
	resize: vertical;
}

.console input:focus,
.console textarea:focus,
.console select:focus {
	border-color: var(--orange);
	box-shadow: 0 0 0 3px rgba(224, 121, 2, .16);
}

.console label {
	display: block;
	margin-top: 10px;
	font-weight: 700;
}

.console section {
	margin: 16px 0;
}

.console .console-links {
	margin: 12px 0 20px 0;
	padding-left: 20px;
}

.console .console-links li {
	margin: 4px 0;
}

.console .console-links a {
	display: inline-block;
	min-width: 120px;
	font-weight: 700;
	font-style: normal;
}

.console .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;
}

.console .site-nav {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.6vw, 28px);
}

.console .site-nav a {
	position: relative;
	padding: 13px 0;
	white-space: nowrap;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .085em;
	text-decoration: none;
	text-transform: uppercase;
}

.console .site-nav a:hover::after,
.console .site-nav a.active::after {
	transform: scaleX(1);
}

.console .site-nav a.active {
	color: var(--violet-deep);
}

.console .button {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: var(--fs-ui);
	font-weight: 800;
	letter-spacing: .075em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.console .button:hover {
	transform: translateY(-2px);
}

.console .button-primary {
	color: white;
	border-color: #3089cf;
	background: linear-gradient(#78baf0 0%, var(--blue) 45%, var(--blue-deep) 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.46), 0 7px 0 #1c6fae, 0 13px 22px rgba(38,127,200,.22);
}

.console .button-primary:hover {
	box-shadow: inset 0 2px 0 rgba(255,255,255,.52), 0 5px 0 #1c6fae, 0 13px 27px rgba(38,127,200,.32);
}

.console .button-secondary {
	color: var(--violet-deep);
	border-color: #a99bd5;
	background: linear-gradient(#fff, #f2eef5);
	box-shadow: inset 0 2px 0 #fff, 0 5px 0 #b9afd2, 0 11px 18px rgba(66,59,87,.1);
}

.console .button-secondary:hover {
	border-color: var(--blue);
}

.console .text-link {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	color: var(--blue-deep);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .075em;
	text-decoration: none;
	text-transform: uppercase;
}

.console .form-message {
	min-height: 24px; margin: 12px 0 0; color: var(--blue-deep); font-size: var(--fs-body);
}

.console .form-message.error {
	color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
	.console .button {
		transition: none;
	}
}

.console .hidden {
	display: none !important;
}

.console .confirm {
	max-width: 720px;
	margin-top: 14px;
	padding: 16px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: 5px;
	background: rgba(251,250,248,.94);
	box-shadow: var(--shadow-soft);
}

.console .confirm p {
	margin: 0; color: var(--violet-deep); font-size: var(--fs-body); font-weight: 600;
}

.console .confirm .button {
	padding: 10px 20px; font-size: var(--fs-ui);
}

.console textarea.nowrap {
	white-space: pre; overflow-x: auto;
}

.console .linedwrap {
	display: flex;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: white;
}

.console .linedwrap .lines {
	flex: 0 0 auto;
	width: 52px;
	padding: 12px 0;
	overflow: hidden;
	border-right: 1px solid var(--line-soft);
	background: var(--pearl);
	user-select: none;
}

.console .linedwrap .lineno {
	padding-right: 11px;
	color: var(--lavender-mid);
	font: 400 15px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
	text-align: right;
}

.console .source-block {
	max-width: 100%;
	--src-back: #27233e;
	--src-head: #312c4b;
	--src-edge: rgba(255,255,255,.11);
	--src-text: #eeeaf7;
	--src-gutter: #6d6590;
	--src-comment: #8b84ac;
	--src-string: #9ed3a6;
	--src-number: #e8b979;
	--src-keyword: #c4a7e7;
	--src-type: #73bdf2;
	--src-function: #f0c674;
	--src-literal: #e59a7c;
	--src-property: #7fd4c1;
	--src-variable: #e8b979;
	--src-tag: #73bdf2;
	--src-attr: #f0c674;
	--src-meta: #8b84ac;
	--src-operator: #cfc8e4;
	--src-punct: #a49dbd;
	margin: 34px 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--src-back);
	box-shadow: var(--shadow-soft);
}

.console .source-head {
	padding: 0 14px 0 18px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--src-head);
}

.console .source-lang {
	color: #bdb5cd;
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.console .source-lang.failed {
	color: #f0a48c;
}

.console .source-lang.saved {
	color: #9ed3a6;
}

.console .source-tools {
	display: flex; align-items: center; gap: 8px;
}

.console .source-tools button {
	padding: 7px 14px;
	color: #d8d2e8;
	border: 1px solid var(--src-edge);
	border-radius: 5px;
	background: rgba(255,255,255,.05);
	cursor: pointer;
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background .18s ease, color .18s ease;
}

.console .source-tools button:hover {
	color: white; background: rgba(255,255,255,.13);
}

.console .source-copy.copied {
	color: #27233e; border-color: transparent; background: #9ed3a6;
}

.console .source-tools .source-numbers,
.console .source-tools .source-edit {
	color: #a49dbd;
}

.console .source-tools .source-numbers.on {
	color: var(--src-type); border-color: rgba(115,189,242,.4);
}

.console .source-tools .source-save {
	color: #27233e; border-color: transparent; background: #9ed3a6;
}

.console .source-tools .source-save:hover {
	color: #27233e; background: #b4e2ba;
}

.console .source-editor {
	width: 100%;
	min-height: 40vh;
	padding: 18px 20px;
	color: var(--src-text);
	border: 0;
	background: var(--src-back);
	font: 400 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
	resize: vertical;
	tab-size: 4;
}

.console .source-editor:focus {
	outline: none;
}

.console .source-body .linedwrap {
	flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: var(--src-back);
}

.console .source-body .linedwrap .lines {
	width: 52px;
	padding: 18px 0;
	border-right: 1px solid var(--src-edge);
	background: rgba(0,0,0,.16);
}

.console .source-body .linedwrap .lineno {
	padding-right: 14px;
	color: var(--src-gutter);
	font: 400 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.console .source-body {
	display: flex; align-items: stretch;
}

.console .source-lines {
	flex: 0 0 auto;
	padding: 18px 0;
	border-right: 1px solid var(--src-edge);
	background: rgba(0,0,0,.16);
	user-select: none;
}

.console .source-lines .lineno {
	padding: 0 14px;
	color: var(--src-gutter);
	font: 400 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
	text-align: right;
}

.console pre.source {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 18px 20px;
	overflow-x: auto;
	color: var(--src-text);
	background: var(--src-back);
	font: 400 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
	tab-size: 4;
}

.console pre.source code {
	font: inherit;
}

.console pre.source:not(.highlighted) {
	margin: 34px 0;
	border: 1px solid var(--line);
	border-radius: 5px;
}

.console .tok-comment {
	color: var(--src-comment); font-style: italic;
}

.console .tok-string {
	color: var(--src-string);
}

.console .tok-number {
	color: var(--src-number);
}

.console .tok-keyword {
	color: var(--src-keyword); font-weight: 600;
}

.console .tok-type {
	color: var(--src-type);
}

.console .tok-function {
	color: var(--src-function);
}

.console .tok-literal {
	color: var(--src-literal);
}

.console .tok-property {
	color: var(--src-property);
}

.console .tok-variable {
	color: var(--src-variable);
}

.console .tok-tag {
	color: var(--src-tag);
}

.console .tok-attr {
	color: var(--src-attr);
}

.console .tok-meta {
	color: var(--src-meta); font-style: italic;
}

.console .tok-operator {
	color: var(--src-operator);
}

.console .tok-punct {
	color: var(--src-punct);
}

.console pre.source,
.console .source-body .source-editor {
	--code-thumb: var(--src-gutter, #6d6590);
	transition: --code-thumb .25s ease;
}

.console pre.source:hover,
.console .source-body .source-editor:hover {
	--code-thumb: var(--src-type, #73bdf2);
}

.console pre.source::-webkit-scrollbar,
.console .source-body .source-editor::-webkit-scrollbar {
	width: 8px; height: 8px;
}

.console pre.source::-webkit-scrollbar-track,
.console .source-body .source-editor::-webkit-scrollbar-track {
	background: transparent;
}

.console pre.source::-webkit-scrollbar-thumb,
.console .source-body .source-editor::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--code-thumb);
	transition: background .25s ease;
}

.console pre.source::-webkit-scrollbar-corner,
.console .source-body .source-editor::-webkit-scrollbar-corner {
	background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
	.console pre.source,
	.console .source-body .source-editor {
		scrollbar-width: thin;
		scrollbar-color: var(--code-thumb) transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.console pre.source,
	.console .source-body .source-editor,
	.console pre.source::-webkit-scrollbar-thumb,
	.console .source-body .source-editor::-webkit-scrollbar-thumb {
		transition: none;
	}
}

.console .admin-panel {
	padding: 24px 26px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.9);
	box-shadow: var(--shadow-soft);
}

.console .admin-panel-head {
	margin-bottom: 16px;
	padding-bottom: 14px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.console .admin-panel-head h2 {
	margin: 0; font-size: var(--fs-h3);
}

.console .admin-count {
	color: var(--muted); font-size: var(--fs-ui); font-weight: 700;
}

.console .admin-empty {
	color: var(--muted); font-size: var(--fs-body);
}

.console .admin-table-scroll {
	overflow-x: auto;
}

.console .admin-table {
	width: 100%; border-collapse: collapse; font-size: var(--fs-body);
}

.console .admin-table th {
	padding: 0 10px 9px;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.console .admin-table td {
	padding: 11px 10px; color: var(--muted);
}

.console .admin-table td strong {
	color: var(--violet-deep);
}

.console .account-row {
	cursor: pointer; transition: background .15s ease;
}

.console .account-row:hover {
	background: rgba(224,121,2,.09);
}

.console .account-row.selected {
	background: rgba(224,121,2,.16);
}

.console .account-row.inactive td {
	opacity: .55;
}

.console .account-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	color: white;
	background: var(--blue-deep);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.console .account-tag.off {
	background: var(--lavender-mid);
}

.console .admin-detail h3 {
	margin: 22px 0 8px; font-size: var(--fs-body);
}

.console .account-facts {
	margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: var(--fs-body);
}

.console .account-facts dt {
	color: var(--violet); font-weight: 700;
}

.console .account-facts dd {
	margin: 0; color: var(--muted);
}

.console .button-danger {
	color: white;
	border: 1px solid transparent;
	background: var(--danger);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 4px 0 #8d3625;
}

.console .button-danger:hover {
	background: #cc5540;
}

.console .button-danger.confirming {
	background: #8d3625;
}

.console .admin-fields {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px;
}

.console .admin-fields input {
	width: 100%;
	padding: 11px 13px;
	color: var(--violet-deep);
	border: 1px solid var(--line);
	border-radius: 5px;
	background: white;
	font: 400 15px/1.4 var(--body);
}

.console .admin-fields input:focus {
	border-color: var(--blue); outline: none;
}

.console .admin-fields select {
	min-height: 0;
	padding: 11px 38px 11px 13px;
	background-color: white;
	background-position: right 13px center;
	font: 400 15px/1.4 var(--body);
}

.console .admin-fields select:focus {
	border-color: var(--blue); outline: none;
}

.console .admin-fields label {
	display: block;
	margin-bottom: 7px;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.console .unread-badge {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	color: white;
	background: var(--danger);
	box-shadow: 0 3px 8px rgba(187,74,52,.35);
	font: 800 12px/1 var(--body);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.console .unread-badge:hover {
	background: #cc5540;
}

.console .site-nav .unread-badge {
	height: 24px;
	min-width: 24px;
	padding: 0 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: var(--fs-label);
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
}

.console .site-nav .unread-badge::after {
	display: none;
}

.console .account-panels {
	padding: 20px 0 0;
	display: grid;
	grid-template-columns: 1.3fr .9fr;
	gap: 20px;
	align-items: start;
}

.console .account-sent {
	padding: 16px 0 0;
}

.console .message {
	padding: 15px 17px;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--lavender-mid);
	border-radius: 0 5px 5px 0;
	background: rgba(255,255,255,.6);
}

.console .message:last-child {
	margin-bottom: 0;
}

.console .message.unread {
	border-left-color: var(--orange); background: rgba(168,93,47,.05);
}

.console .message-head {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 7px;
}

.console .message-head strong {
	color: var(--violet-deep); font-size: var(--fs-body);
}

.console .message-when {
	margin-left: auto; color: var(--muted); font-size: var(--fs-ui); font-variant-numeric: tabular-nums;
}

.console .message-body {
	margin: 0; color: var(--violet); font-size: var(--fs-body); white-space: pre-wrap;
}

.console .message-note {
	margin: 0 0 7px; color: var(--muted); font-size: var(--fs-ui);
}

.console .message-actions {
	margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.console .message-actions .button {
	padding: 8px 14px; font-size: var(--fs-ui);
}

.console .compose-remaining {
	margin: 8px 0 14px; color: var(--muted); font-size: var(--fs-ui);
}

.console .compose-remaining.error {
	color: var(--danger); font-weight: 700;
}

.console .admin-search {
	margin-bottom: 14px;
}

.console .admin-search input {
	width: 100%;
	padding: 10px 14px;
	color: var(--violet-deep);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: white;
	font: 400 13px/1.4 var(--body);
}

.console .admin-search input:focus {
	border-color: var(--blue); outline: none;
}

.console .admin-pager {
	padding-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 1em;
}

.console .admin-pager .button {
	padding: 9px 16px; font-size: var(--fs-ui);
}

.console .admin-pager .button:disabled {
	opacity: .4; cursor: not-allowed; transform: none;
}

.console .admin-page-of {
	color: var(--muted); font-size: var(--fs-ui); font-weight: 700;
}

.console .post-edit {
	margin: 0 0 12px;
}

.console .post-edit a {
	display: inline-flex; align-items: center; gap: 7px; color: var(--orange); font-size: var(--fs-label); font-weight: 800; letter-spacing: .085em; text-decoration: none; text-transform: uppercase;
}

.console .post-edit a:hover {
	color: var(--orange-deep);
}

.console .admin-posts {
	padding-bottom: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start;
}

.console .admin-fields .wide {
	grid-column: 1 / -1;
}

.console .admin-search {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}

.console .admin-search input[type="search"] {
	flex: 1 1 220px; min-width: 0;
}

.console .admin-search select {
	flex: 0 1 210px; min-height: 0; padding: 10px 36px 10px 13px; background-color: white; background-position: right 12px center; font-size: var(--fs-ui);
}

.console .field-note {
	display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-ui);
}

.console .post-tools {
	display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px;
}

.console .post-tools .button {
	padding: 7px 12px; font-size: var(--fs-label);
}

.console .post-switches {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 14px 0; font-size: var(--fs-ui);
}

.console .post-switches label {
	display: inline-flex; align-items: center; gap: 7px; font-weight: 700;
}

.console .post-author {
	color: var(--muted); margin-left: auto;
}

.console .admin-actions {
	display: flex; flex-wrap: wrap; gap: 10px;
}

.console .admin-table tr.current {
	background: rgba(211,204,216,.42);
}

.console .admin-table tr[data-id] {
	cursor: pointer;
}

.console .state-pill {
	padding: 3px 10px; border-radius: 999px; font-size: var(--fs-label); font-weight: 800;
}

.console .state-pill.on {
	color: #1d5b2a; background: rgba(64,160,86,.18);
}

.console .state-pill.off {
	color: var(--muted); background: var(--pearl);
}

.console .comment-note {
	color: var(--muted); font-size: var(--fs-body);
}

.console .comment {
	padding: 18px 20px;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.9);
}

.console .comment.hidden-comment {
	border-style: dashed; background: rgba(211,204,216,.3); opacity: .8;
}

.console .comment-head {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 8px;
}

.console .comment-head strong {
	color: var(--violet-deep);
}

.console .comment-when {
	color: var(--muted); font-size: var(--fs-ui);
}

.console .comment-edited,
.console .comment-hidden-tag {
	padding: 2px 9px;
	border-radius: 999px;
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.console .comment-edited {
	color: var(--violet); background: var(--pearl);
}

.console .comment-hidden-tag {
	color: white; background: var(--danger);
}

.console .comment-tools {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0;
}

.console .comment-tools button {
	padding: 6px 13px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--violet);
	background: white;
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.console .comment-tools button:hover {
	border-color: var(--blue); color: var(--blue-deep);
}

.console .comment-editor {
	margin-top: 12px;
}

.console .compose-remaining.error {
	color: var(--danger); font-weight: 700;
}

.console .accent-orange {
	background: var(--orange);
}

.console .accent-orange-deep {
	background: var(--orange-deep);
}

.console .accent-blue {
	background: var(--blue);
}

.console .accent-blue-deep {
	background: var(--blue-deep);
}

.console .accent-violet {
	background: var(--violet);
}

.console .accent-violet-deep {
	background: var(--violet-deep);
}

.console .accent-lavender {
	background: var(--lavender);
}

.console .accent-danger {
	background: var(--danger);
}

.console .accent-text-orange {
	color: var(--orange);
}

.console .accent-text-orange-deep {
	color: var(--orange-deep);
}

.console .accent-text-blue {
	color: var(--blue-deep);
}

.console .accent-text-blue-deep {
	color: var(--blue-deep);
}

.console .accent-text-violet {
	color: var(--violet);
}

.console .accent-text-violet-deep {
	color: var(--violet-deep);
}

.console .accent-text-lavender {
	color: var(--violet);
}

.console .accent-text-danger {
	color: var(--danger);
}

.console .board-list {
	padding: 10px 0 70px; display: grid; gap: 14px;
}

.console .board-card {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 24px 26px 24px 34px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.92);
	box-shadow: var(--shadow);
	color: inherit;
	text-decoration: none;
	transition: transform .16s ease, border-color .16s ease;
}

.console .board-card:hover {
	transform: translateY(-2px); border-color: var(--lavender-mid);
}

.console .board-card.board-off {
	opacity: .62; border-style: dashed;
}

.console .board-accent {
	position: absolute; top: 0; bottom: 0; left: 0; width: 10px;
}

.console .board-text {
	display: grid; gap: 4px; flex: 1 1 auto; min-width: 0;
}

.console .board-text strong {
	font: 700 var(--fs-h3)/1.2 var(--display); color: var(--violet-deep);
}

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

.console .board-count {
	display: grid;
	gap: 6px;
	justify-items: end;
	flex: 0 0 auto;
	color: var(--muted);
	font-size: var(--fs-ui);
	font-weight: 700;
	white-space: nowrap;
}

.console .board-dot {
	display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: middle;
}

.console .topic-list {
	padding-bottom: 70px;
}

.console .topic-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 20px;
	margin-bottom: 8px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.9);
	color: inherit;
	text-decoration: none;
}

.console .topic-row:hover {
	border-color: var(--blue);
}

.console .topic-row.topic-hidden {
	border-style: dashed; opacity: .75;
}

.console .topic-main {
	display: grid; gap: 3px; flex: 1 1 auto; min-width: 0;
}

.console .topic-main strong {
	color: var(--violet-deep); overflow-wrap: anywhere;
}

.console .topic-by {
	color: var(--muted); font-size: var(--fs-ui);
}

.console .topic-meta {
	display: grid; gap: 3px; justify-items: end; flex: 0 0 auto; color: var(--muted); font-size: var(--fs-ui); white-space: nowrap;
}

.console .topic-tag {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	color: white;
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.console .topic-tag.pinned {
	background: var(--orange);
}

.console .topic-tag.locked {
	background: var(--violet);
}

.console .topic-tag.hidden-tag {
	background: var(--danger);
}

.console .topic-head {
	padding: 8px 0 22px; max-width: 900px;
}

.console .topic-head h1 {
	margin: 6px 0 10px;
}

.console .topic-tools {
	margin-top: 16px;
}

.console .forum-thread {
	padding-bottom: 70px; max-width: 900px;
}

.console .forum-post {
	padding: 20px 22px;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(251,250,248,.92);
}

.console .forum-post.first-post {
	border-color: var(--lavender-mid); background: white;
}

.console .forum-post.hidden-comment {
	border-style: dashed; background: rgba(211,204,216,.3); opacity: .8;
}

.console .forum-body {
	overflow-wrap: anywhere;
}

.console .forum-body p {
	margin: 0 0 10px;
}

.console .forum-body p:last-child {
	margin-bottom: 0;
}

.console .forum-body pre.source {
	margin: 14px 0;
}

.console .post-quote {
	margin: 10px 0;
	padding: 8px 0 8px 16px;
	border-left: 3px solid var(--lavender-mid);
	color: var(--muted);
	font: inherit;
}

.console .post-image-inline {
	max-width: 100%; margin: 12px 0; border-radius: 5px;
}

.console .mention {
	color: var(--blue-deep); font-weight: 700; text-decoration: none;
}

.console .mention:hover {
	color: var(--orange);
}

.console .forum-compose {
	margin-top: 34px;
}

.console .forum-compose h2 {
	margin-bottom: 14px;
}

.console .forum-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.console .forum-form input {
	margin-bottom: 16px;
}

.console .forum-form textarea {
	margin-bottom: 6px;
}

.console .forum-form .button {
	margin-top: 6px;
}

.console .forum-actions {
	display: flex; flex-wrap: wrap; gap: 10px;
}

.console .button.waiting,
.console .comment-tools button.waiting {
	opacity: .55; cursor: progress;
}

.console .comment-editor .post-tools {
	margin: 0 0 8px;
}

.console .comment-editor textarea {
	margin-bottom: 6px;
}

.console .edit-message {
	min-height: 0; margin: 0 0 8px;
}

.console .admin-limits {
	padding-bottom: 60px;
}

.console .limit-group {
	margin-bottom: 28px;
}

.console .limit-group h2 {
	margin-bottom: 14px; font-size: var(--fs-h3);
}

.console .limit-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 130px;
	gap: 6px 18px;
	align-items: center;
	padding: 12px 0;
}

.console .limit-row label {
	color: var(--violet-deep); font-weight: 700;
}

.console .limit-row input {
	grid-row: 1 / 3; grid-column: 2; text-align: right;
}

.console .limit-note {
	grid-column: 1; color: var(--muted); font-size: var(--fs-ui);
}

.console .sql-console {
	padding-bottom: 60px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start;
}

.console .sql-schema {
	position: sticky; top: 125px; max-height: 78vh; overflow: auto;
}

.console .sql-table > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	color: var(--violet-deep);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.console .sql-table > summary::-webkit-details-marker {
	display: none;
}

.console .sql-table > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid var(--lavender-mid);
	transition: transform .14s ease;
}

.console .sql-table[open] > summary::before {
	transform: rotate(90deg);
}

.console .sql-table > summary:hover {
	color: var(--blue-deep);
}

.console .sql-table-name {
	flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}

.console .sql-table-rows {
	flex: 0 0 auto; color: var(--muted); font-size: var(--fs-label); font-weight: 800;
}

.console .sql-columns {
	margin: 0 0 8px; padding: 0 0 0 16px; list-style: none;
}

.console .sql-columns li {
	display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
}

.console .sql-insert {
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue-deep);
	font: 400 var(--fs-ui)/1.4 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	cursor: pointer;
}

.console .sql-insert:hover {
	color: var(--orange); text-decoration: underline;
}

.console .sql-pick {
	margin-left: 16px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.console .sql-type {
	color: var(--muted); font-size: var(--fs-label);
}

.console .sql-flag {
	padding: 1px 7px; border-radius: 999px; background: var(--pearl); color: var(--muted); font-size: var(--fs-label); font-weight: 800;
}

.console .sql-flag.key {
	color: white; background: var(--orange);
}

.console .sql-editor .post-tools {
	margin-bottom: 10px;
}

.console .sql-hint {
	margin: 8px 0 0; color: var(--muted); font-size: var(--fs-ui);
}

.console .sql-result {
	margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 5px; background: rgba(251,250,248,.9);
}

.console .sql-result.bad {
	border-color: var(--danger); background: rgba(187,74,52,.06);
}

.console .sql-statement {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px;
}

.console .sql-statement code {
	overflow-wrap: anywhere;
}

.console .sql-timing {
	color: var(--muted); font-size: var(--fs-label); font-weight: 800; white-space: nowrap;
}

.console .sql-note {
	margin: 0; color: var(--muted); font-size: var(--fs-ui);
}

.console .sql-error {
	margin: 0; color: var(--danger); font-weight: 700; overflow-wrap: anywhere;
}

.console .sql-grid-scroll {
	overflow-x: auto; margin-top: 12px;
}

.console .sql-grid {
	width: 100%; border-collapse: collapse; font-size: var(--fs-ui);
}

.console .sql-grid th {
	padding: 8px 12px;
	color: var(--violet);
	font-size: var(--fs-label);
	font-weight: 800;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.console .sql-grid td {
	padding: 7px 12px; color: var(--violet-deep); vertical-align: top; max-width: 460px; overflow-wrap: anywhere;
}

.console .sql-grid tbody tr:nth-child(odd) {
	background: rgba(211,204,216,.22);
}

.console .sql-null {
	color: var(--lavender-mid); font-style: italic;
}

.console .sql-pager {
	margin-top: 12px;
}

/* The mail room, taken from kazman.codebot.org and kept small: Read, Compose
   and History tabs, a narrow list of messages beside the one being read, and
   buttons the height of a line of text.

   It begins straight beneath the heading of the page, beside the curve of
   the header, and not beneath it. Neither the mail room nor a view has a
   width or a border of its own for that reason: each row inside them is laid
   out by itself, so each is as wide as the curve leaves room for where it
   happens to be, and the rows grow wider down the page as the curve falls
   away. */

/* The address of the mailbox, at the far end of the row of tabs. */

.console .mail-address {
	margin-left: auto;
	align-self: center;
	color: var(--muted);
	font-size: 13px;
}

.console .mailroom {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
}

.console .mailroom [hidden] {
	display: none !important;
}

.console .mailroom .mail-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--lavender-mid);
}

.console .mailroom .mail-tabs button {
	margin-bottom: -1px;
	padding: 5px 16px;
	color: var(--muted);
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background: transparent;
	font-weight: 700;
	cursor: pointer;
}

.console .mailroom .mail-tabs button:hover {
	color: var(--violet-deep);
}

.console .mailroom .mail-tabs button.active {
	color: var(--violet-deep);
	border-color: var(--lavender-mid);
	border-top: 2px solid var(--orange);
	background: white;
}

.console .mailroom .mail-view {
	padding-top: 10px;
}

.console .mailroom .mail-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 8px;
}

.console .mailroom .mail-head h2 {
	margin: 0;
	font-size: 15px;
	line-height: 26px;
	background: none;
}

.console .mailroom .mail-count {
	margin-right: auto;
	color: var(--muted);
	font-size: 13px;
}

.console .mailroom .mail-note {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.console .mailroom .mail-note:empty {
	display: none;
}

.console .mailroom .mail-note.bad {
	color: var(--danger);
	font-weight: 700;
}

.console .mailroom #inbox-message, .console .mailroom #mail-message, .console .mailroom #mail-ready {
	margin: 0 0 8px 0;
}

/* Buttons. */

.console .mailroom .mail-button {
	display: inline-block;
	margin: 0;
	padding: 4px 11px;
	color: var(--violet);
	border: 1px solid var(--lavender-mid);
	border-radius: 5px;
	background: white;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.console .mailroom .mail-button:hover {
	border-color: var(--orange);
}

.console .mailroom .mail-button.primary {
	color: white;
	border-color: var(--orange-deep);
	background: var(--orange);
}

.console .mailroom .mail-button.primary:hover {
	background: var(--orange-deep);
}

.console .mailroom .mail-button:disabled {
	opacity: .45;
	cursor: default;
}

.console .mailroom .mail-tools {
	display: inline-flex;
	gap: 6px;
}

.console .mailroom .mail-tools:empty {
	display: none;
}

.console .mailroom .mail-pager {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 13px;
}

.console .mailroom .mail-step {
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--violet);
	border: 1px solid var(--lavender-mid);
	border-radius: 5px;
	background: white;
	font-size: 15px;
	line-height: 20px;
	cursor: pointer;
}

.console .mailroom .mail-step:disabled {
	opacity: .4;
	cursor: default;
}

/* The folders, and the search beside them. */

.console .mailroom .mail-folder-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 8px;
}

.console .mailroom .mail-folders {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.console .mailroom .mail-folders button {
	padding: 3px 10px;
	color: var(--violet-deep);
	border: 1px solid var(--lavender);
	border-radius: 999px;
	background: white;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	cursor: pointer;
}

.console .mailroom .mail-folders button:hover {
	border-color: var(--orange);
}

.console .mailroom .mail-folders button.active {
	color: white;
	border-color: var(--violet-deep);
	background: var(--violet-deep);
}

.console .mailroom .mail-unread {
	display: inline-block;
	min-width: 16px;
	margin-left: 2px;
	padding: 0 5px;
	color: white;
	border-radius: 999px;
	background: var(--orange);
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

.console .mailroom .mail-search {
	flex: 1 1 220px;
	max-width: 320px;
	margin-left: auto;
}

/* Named by the id of the mail room, which is what it takes to be smaller
   than the consoles make every input. */

#mail-root .mail-search input {
	min-height: 0;
	padding: 4px 9px;
	font-size: 13px;
}

/* The search of the history, with the two days it runs between. */

.console .mailroom .mail-filter-row label {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
}

#mail-root .mail-filter-row input {
	width: auto;
	min-height: 0;
	padding: 3px 8px;
	font-size: 13px;
}

#mail-root .mail-filter-row input[type="search"] {
	flex: 1 1 220px;
	max-width: 320px;
}

.console .mailroom .mail-filter-row #history-purge {
	margin-left: auto;
}

.console .mailroom .mail-button.danger {
	color: var(--danger);
}

.console .mailroom .mail-button.danger:hover {
	border-color: var(--danger);
}

.console .mailroom .mail-row-item.refused {
	border-left-color: var(--danger);
}

.console .mailroom .mail-row-subject b {
	color: var(--danger);
}

/* The list, and the message beside it. */

.console .mailroom .mail-split {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.console .mailroom .mail-list {
	max-height: 68vh;
	overflow-y: auto;
	border: 1px solid var(--lavender);
	border-radius: 5px;
}

.console .mailroom .mail-list .mail-note {
	padding: 8px 10px;
}

/* The column of the list: the checkbox which ticks every row, and the button
   which deletes what is ticked, above the list itself. */

.console .mailroom .mail-list-side {
	min-width: 0;
}

.console .mailroom .mail-pick-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 28px;
	margin-bottom: 4px;
	padding-left: 12px;
}

.console .mailroom .mail-pick-bar label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.console .mailroom .mail-pick-bar .mail-button {
	padding: 2px 9px;
}

.console .mailroom .mail-pick,
.console .mailroom .mail-pick-bar input {
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--orange);
	cursor: pointer;
}

/* A row: its checkbox, and the message itself, which is a button. */

.console .mailroom .mail-row-line {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--lavender);
	background: white;
}

.console .mailroom .mail-row-line:last-child {
	border-bottom: 0;
}

.console .mailroom .mail-row-line .mail-pick {
	margin: 0 0 0 8px;
}

.console .mailroom .mail-row-line .mail-row-item {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin-left: 5px;
	border-bottom: 0;
	border-left: 0;
	background: transparent;
}

/* The stripe which marks a row as unread, open or refused runs down the edge
   of the list, outside the checkbox, so it belongs to the row and not to the
   button inside it. */

.console .mailroom .mail-row-line {
	border-left: 3px solid transparent;
}

.console .mailroom .mail-row-line:hover {
	background: var(--cloud);
}

.console .mailroom .mail-row-line:has(.mail-row-item.unread) {
	border-left-color: var(--orange);
}

.console .mailroom .mail-row-line:has(.mail-row-item.refused) {
	border-left-color: var(--danger);
}

.console .mailroom .mail-row-line:has(.mail-row-item.chosen) {
	border-left-color: var(--orange-deep);
	background: var(--pearl);
}

.console .mailroom .mail-row-item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	width: 100%;
	padding: 6px 8px;
	color: var(--violet-deep);
	border: 0;
	border-bottom: 1px solid var(--lavender);
	border-left: 3px solid transparent;
	background: white;
	text-align: left;
	cursor: pointer;
}

.console .mailroom .mail-row-item:last-child {
	border-bottom: 0;
}

.console .mailroom .mail-row-item:hover {
	background: var(--cloud);
}

.console .mailroom .mail-row-item.unread {
	border-left-color: var(--orange);
}

.console .mailroom .mail-row-item.chosen {
	border-left-color: var(--orange-deep);
	background: var(--pearl);
}

.console .mailroom .mail-row-top {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.console .mailroom .mail-row-top strong {
	overflow: hidden;
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.console .mailroom .mail-row-when {
	flex: none;
	color: var(--muted);
	font-size: 12px;
}

.console .mailroom .mail-row-subject {
	overflow: hidden;
	color: var(--muted);
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.console .mailroom .mail-row-item.unread strong,
.console .mailroom .mail-row-item.unread .mail-row-subject {
	color: var(--violet-deep);
	font-weight: 700;
}

.console .mailroom .mail-detail {
	min-width: 0;
}

.console .mailroom .mail-subject {
	margin: 0 0 6px 0;
	font-size: 15px;
	line-height: 22px;
	background: none;
}

.console .mailroom .mail-lines {
	margin: 0 0 6px 0;
	font-size: 13px;
}

.console .mailroom .mail-line {
	display: flex;
	flex-wrap: wrap;
	gap: 1px 20px;
}

.console .mailroom .mail-line > span {
	overflow-wrap: anywhere;
}

.console .mailroom .mail-line b {
	margin-right: 6px;
	color: var(--violet);
}

.console .mailroom .mail-attachments a {
	margin-right: 2px;
}

.console .mailroom .mail-attachments small {
	color: var(--muted);
}

.console .mailroom .mail-body {
	max-height: 60vh;
	margin: 0;
	padding: 9px 10px;
	overflow: auto;
	color: var(--violet-deep);
	border: 1px solid var(--lavender);
	border-radius: 5px;
	background: var(--cloud);
	font: 400 13px/1.5 var(--body);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Writing a message. */

.console .mailroom .mail-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	margin-bottom: 6px;
}

.console .mailroom .mail-row.tall {
	align-items: start;
}

.console .mailroom .mail-row label {
	margin: 0;
	color: var(--violet);
	font-size: 13px;
	font-weight: 700;
}

.console .mailroom .mail-row.tall label {
	margin-top: 6px;
}

#mail-root .mail-row input,
#mail-root .mail-row textarea {
	min-height: 0;
	padding: 5px 8px;
	font-size: 13px;
}

#mail-root .mail-row textarea {
	min-height: 220px;
	line-height: 1.5;
}

.console .mailroom #mail-replying {
	margin: 0 0 6px 72px;
}

.console .mailroom .mail-send-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-left: 72px;
}

.console .mailroom .mail-send-row #mail-clear {
	margin-left: auto;
}

#mail-root .mail-upload {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	opacity: 0;
}

.console .mailroom .mail-file-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0 72px;
	padding: 0;
	list-style: none;
}

.console .mailroom .mail-file-list:empty {
	display: none;
}

.console .mailroom .mail-file {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 4px 2px 9px;
	border-radius: 999px;
	background: var(--pearl);
	font-size: 13px;
}

.console .mailroom .mail-file small {
	color: var(--muted);
}

.console .mailroom .mail-file button {
	padding: 0 4px;
	color: var(--muted);
	border: 0;
	background: none;
	font-size: 15px;
	line-height: 18px;
	cursor: pointer;
}

.console .mailroom .mail-file button:hover {
	color: var(--danger);
}

.console .mailroom #mail-message {
	margin: 8px 0 0 72px;
}

.console .css-editor {
	padding-bottom: 20px;
}

.console .css-search {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px;
}

.console .css-search input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	padding: 10px 13px;
	color: var(--violet-deep);
	border: 1px solid var(--line);
	border-radius: 5px;
	background: white;
	font: 400 var(--fs-ui)/1.4 var(--body);
}

.console .css-search input[type="search"]:focus {
	border-color: var(--blue); outline: none;
}

.console .css-search .button {
	padding: 9px 14px; font-size: var(--fs-label);
}

.console .css-found {
	color: var(--muted);
	font-size: var(--fs-ui);
	font-weight: 700;
	white-space: nowrap;
	min-width: 84px;
}

.console .css-editor .linedwrap {
	max-height: 62vh;
}

.console .css-editor textarea {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 420px;
	max-height: 62vh;
	padding: 12px 14px;
	border: 0;
	background: white;
	color: var(--violet-deep);
	font: 400 15px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
	resize: vertical;
	white-space: pre;
	overflow: auto;
}

.console .css-editor textarea:focus {
	outline: none;
}

.console .css-editor textarea::selection {
	background: rgba(232,124,58,.34);
}

.console .css-hint {
	margin: 8px 0 0; color: var(--muted); font-size: var(--fs-ui);
}

.console .css-editor .comment-tools {
	margin-top: 14px;
}

.console .css-escape {
	padding-bottom: 60px;
}

.console .tpl-console {
	display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start;
}

.console .tpl-files {
	max-height: 82vh; overflow-y: auto;
}

.console .tpl-files .css-search {
	margin-bottom: 6px;
}

.console .tpl-file {
	display: block;
	width: 100%;
	padding: 9px 12px;
	text-align: left;
	color: var(--violet-deep);
	border: 1px solid transparent;
	border-radius: 5px;
	background: none;
	font: 700 var(--fs-ui)/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.console .tpl-file:hover {
	border-color: var(--line); background: white;
}

.console .tpl-file.open {
	border-color: var(--blue); background: white;
}

.console .tpl-file.hit {
	box-shadow: inset 3px 0 0 var(--orange);
}

.console .tpl-meta {
	display: block; margin-top: 2px; color: var(--muted); font: 600 var(--fs-label)/1.3 var(--body);
}

.console .tpl-hits {
	display: block; color: var(--danger); font: 700 var(--fs-label)/1.3 var(--body);
}

.console .tpl-kind {
	font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.console .tpl-kind.fragment {
	color: var(--blue-deep);
}

.console .tpl-kind.shell {
	color: var(--danger);
}

.console .tpl-kind.static {
	color: var(--muted);
}

.console .tpl-kind-note {
	margin: -4px 0 12px; color: var(--muted); font-size: var(--fs-ui);
}

.console .tpl-kind-note.shell {
	color: var(--danger); font-weight: 700;
}

.console .tpl-line {
	display: block;
	width: 100%;
	padding: 3px 8px 3px 22px;
	text-align: left;
	color: var(--muted);
	border: 0;
	border-radius: 8px;
	background: none;
	font: 400 var(--fs-label)/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.console .tpl-line:hover {
	color: var(--violet-deep); background: white;
}

.console .tpl-lineno {
	display: inline-block; min-width: 2.6em; color: var(--lavender-mid);
}



/* ---------------------------------------------------------------------------
   The consoles, made to sit in this site.

   The rules above came from another site, where a console fills the window:
   buttons two fingers tall, panels with deep padding, labels in spaced
   capitals. Here a console is one part of a page a thousand pixels wide, so
   the rules below draw the same things small and plain. They come last and
   name the same things, so they are the ones which hold.
   ------------------------------------------------------------------------ */

.console .button {
	min-height: 0;
	gap: 6px;
	padding: 5px 14px;
	border: 1px solid var(--lavender-mid);
	border-radius: 5px;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	transition: border-color .15s ease, background .15s ease;
}

.console .button:hover {
	transform: none;
}

.console .button:disabled {
	opacity: .45;
	cursor: default;
}

.console .button-primary,
.console .button-primary:hover {
	color: white;
	border-color: var(--orange-deep);
	background: var(--orange);
	box-shadow: none;
}

.console .button-primary:hover {
	background: var(--orange-deep);
}

.console .button-secondary,
.console .button-secondary:hover {
	color: var(--orange-deep);
	border-color: var(--lavender-mid);
	background: white;
	box-shadow: none;
}

.console .button-secondary:hover {
	border-color: var(--orange);
}

.console .button-danger,
.console .button-danger:hover,
.console .button-danger.confirming {
	color: white;
	border-color: #8c1d18;
	background: var(--danger);
	box-shadow: none;
}

.console .button-danger:hover,
.console .button-danger.confirming {
	background: #8c1d18;
}

/* The buttons which were given a size of their own are the size of the rest. */

.console .admin-pager .button,
.console .confirm .button,
.console .message-actions .button,
.console .post-tools .button,
.console .css-search .button,
.console .forum-form .button {
	padding: 5px 12px;
	font-size: 13px;
}

.console .comment-tools button,
.console .source-tools button {
	padding: 4px 11px;
	border-radius: 5px;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

/* A button which follows a field in a form stands clear of it. */

.console form > .button,
.console form > .comment-tools,
.console form > .admin-actions {
	margin-top: 10px;
}

.console .text-link,
.console .post-edit a,
.console .site-nav a {
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
}

/* Panels. */

.console .admin-panel {
	padding: 12px 16px 14px 16px;
	border: 1px solid var(--lavender-mid);
	background: white;
	box-shadow: var(--shadow-soft);
}

.console .admin-panel-head {
	margin-bottom: 8px;
	padding-bottom: 0;
}

.console .admin-panel-head h2,
.console .limit-group h2 {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	background: none;
}

.console .admin-panel h3,
.console .admin-detail h3 {
	margin: 12px 0 4px 0;
	font-size: 13px;
	line-height: 20px;
	background: none;
}

.console .account-panels,
.console .admin-posts,
.console .mail-sent {
	gap: 14px;
	padding-top: 10px;
}

/* The two panels of the settings page are small forms, and are not stretched
   across the page. The messages page keeps its wider left-hand panel. */

.console .account-panels.settings {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	max-width: 780px;
}

/* The two panels are the same height, and the button of each sits at the
   foot of its panel, so the two buttons are level with one another. What a
   form has to say is said above its button, so saying it moves neither. */

.console .account-panels.settings .admin-panel,
.console .account-panels.settings form {
	display: flex;
	flex-direction: column;
}

.console .account-panels.settings form {
	flex: 1 1 auto;
}

.console .account-panels.settings form > .button {
	order: 2;
	align-self: flex-start;
	margin-top: auto;
}

.console .account-panels.settings form > .form-message {
	margin: 6px 0 10px 0;
}

.console section {
	margin: 10px 0;
}

/* Fields and their labels. */

.console label,
.console .admin-fields label,
.console .forum-form label {
	margin: 8px 0 3px 0;
	color: var(--violet-deep);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.console input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.console textarea,
.console select {
	min-height: 30px;
	padding: 4px 8px;
	font-size: 13px;
}

.console .admin-fields {
	gap: 8px 12px;
	margin-bottom: 10px;
}

.console .admin-fields input,
.console .admin-fields select,
.console .admin-search input,
.console .css-search input[type="search"] {
	padding: 4px 8px;
	border-radius: 5px;
	font: 400 13px/1.4 var(--body);
}

.console .form-message {
	min-height: 0;
	margin: 8px 0 0 0;
	font-size: 13px;
}

.console .form-message:empty {
	display: none;
}

.console .account-facts {
	gap: 3px 16px;
	font-size: 13px;
}

.console .field-note,
.console .limit-note,
.console .sql-hint,
.console .css-hint {
	font-size: 13px;
}

/* Tables. */

.console .admin-table th {
	padding: 4px 8px;
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
	font-weight: 700;
}

.console .admin-table td {
	padding: 6px 8px;
}

.console .account-tag,
.console .state-pill,
.console .topic-tag,
.console .comment-edited,
.console .comment-hidden-tag,
.console .sql-flag {
	padding: 1px 7px;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

/* Messages, comments and the forum. */

.console .message {
	padding: 9px 12px;
	margin-bottom: 8px;
}

.console .comment,
.console .forum-post {
	padding: 11px 14px;
	margin-bottom: 8px;
}

.console .topic-row {
	gap: 14px;
	padding: 9px 14px;
	margin-bottom: 6px;
}

.console .board-card {
	gap: 16px;
	padding: 12px 16px 12px 24px;
	box-shadow: var(--shadow-soft);
}

.console .board-card:hover {
	transform: none;
}

.console .board-accent {
	width: 6px;
}

.console .board-list {
	gap: 8px;
	padding-bottom: 30px;
}

.console .topic-list,
.console .forum-thread,
.console .admin-limits,
.console .sql-console,
.console .css-escape {
	padding-bottom: 30px;
}

.console .limit-row {
	padding: 6px 0;
}

.console .limit-group {
	margin-bottom: 16px;
}

.console .sql-result {
	margin-top: 12px;
	padding: 10px 12px;
}

.console .source-block,
.console pre.source:not(.highlighted) {
	margin: 12px 0;
}

.console .confirm {
	padding: 10px 14px;
	margin-top: 10px;
}

/* Pushed to the foot, a button has no space of its own above it, so the last
   field of each form keeps the two apart. */

.console .account-panels.settings form > input:last-of-type {
	margin-bottom: 10px;
}

/* The list which chooses the stylesheet to edit, in the heading of its panel. */

.console .admin-panel-head h2 select {
	width: auto;
	min-width: 180px;
	font-size: 15px;
	font-weight: 700;
}