/*
 * Rumor Mill News theme.
 *
 * The colors are the original rumormillnews.com's: royal blue panels with white, cyan, gold, and
 * yellow on them; red for bullets, warnings, and emphasis; blue-violet text on white; plain blue
 * links, underlined and bold in the listings. Verdana, as it was.
 *
 * The layout around them is new. This file loads after Bootstrap 5.3, so it works mostly by
 * setting Bootstrap's own variables, and every page takes the palette without changing markup.
 */

:root {
	/* The original palette. */
	--rmn-blue: #0622a6;          /* the panels and the header band */
	--rmn-blue-deep: #04187a;     /* borders and hover on the blue */
	--rmn-blue-tint: #eef1fc;     /* a wash of the blue, for quiet backgrounds */
	--rmn-ink: #3333cc;           /* the body text */
	--rmn-link: #0000ee;          /* links */
	--rmn-visited: #7777cc;       /* links followed */
	--rmn-red: #cc0000;           /* bullets, callouts, emphasis */
	--rmn-red-deep: #990000;      /* red text on white, and hover */
	--rmn-cyan: #00ffff;          /* headings on the blue */
	--rmn-gold: #ffd700;          /* figures on the blue */
	--rmn-yellow: #ffff00;        /* navigation on the blue */
	--rmn-gray: #6f6f8f;          /* small print */

	/* What the palette does, so night mode can change it in one place. */
	--rmn-blue-text: var(--rmn-blue);   /* blue words, on the page */
	--rmn-red-text: var(--rmn-red-deep); /* red words, on the page */
	--rmn-ink-strong: #1e1e7a;    /* text that leads */
	--rmn-ink-soft: #3b3b6b;      /* summaries */
	--rmn-surface: #ffffff;       /* boxes, menus, buttons on the page */
	--rmn-field-bg: rgba(255, 255, 255, .88); /* the search box on the band */
	--rmn-line: #dfe3f5;          /* rules between items */
	--rmn-line-strong: #c9d0f2;   /* the edges of chips and small buttons */
	--rmn-dash: #9aa6e0;          /* dashed edges, and hints */
	--rmn-note-bg: #fffdf0;       /* a note's paper */
	--rmn-mark-bg: #fff3a8;       /* a highlighted word */
	--rmn-alert-bg: #fff6f6;      /* a red-edged box */
	--rmn-warn-text: #6b4e00;     /* warning words */
	--rmn-cloud-0: #8a8fb5;       /* the tag cloud, faintest to strongest */
	--rmn-cloud-1: #6a73b8;
	--rmn-cloud-2: #3f4bb8;
	--rmn-cloud-4: #7a1a8c;

	--rmn-font: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
	--rmn-radius: .5rem;

	/* Bootstrap, told the same. */
	--bs-body-font-family: var(--rmn-font);
	--bs-body-font-size: .95rem;
	--bs-body-line-height: 1.6;
	--bs-body-color: var(--rmn-ink);
	--bs-body-color-rgb: 51, 51, 204;
	--bs-body-bg: #ffffff;
	--bs-emphasis-color: var(--rmn-blue);
	--bs-secondary-color: var(--rmn-gray);
	--bs-link-color: var(--rmn-link);
	--bs-link-color-rgb: 0, 0, 238;
	--bs-link-hover-color: var(--rmn-red);
	--bs-link-hover-color-rgb: 204, 0, 0;
	--bs-primary: var(--rmn-blue);
	--bs-primary-rgb: 6, 34, 166;
	--bs-danger: var(--rmn-red);
	--bs-danger-rgb: 204, 0, 0;
	--bs-border-color: #d3d8f3;
	--bs-border-radius: var(--rmn-radius);
	--bs-heading-color: var(--rmn-blue);
	--bs-focus-ring-color: rgba(6, 34, 166, .25);
}

/* Night mode: the page goes deep navy and its words light; the band, the panels, and the footer
   keep their royal blue. The switch in the header sets data-bs-theme on <html>, which also turns
   Bootstrap's own parts dark; with no choice made, the reader's system decides. */
:root[data-bs-theme="dark"] {
	color-scheme: dark;
	--rmn-blue: #1a36b8;
	--rmn-blue-deep: #0c1f78;
	--rmn-blue-tint: #1a2048;
	--rmn-ink: #c9cef2;
	--rmn-link: #8db4ff;
	--rmn-visited: #b8a9f0;
	--rmn-red: #e0302f;
	--rmn-red-deep: #b31b1b;
	--rmn-gray: #9aa1cb;

	--rmn-blue-text: #a9bcff;
	--rmn-red-text: #ff8a8a;
	--rmn-ink-strong: #e3e7ff;
	--rmn-ink-soft: #b7bde3;
	--rmn-surface: #10142c;
	--rmn-field-bg: rgba(6, 8, 26, .78);
	--rmn-line: #262d5c;
	--rmn-line-strong: #353e7c;
	--rmn-dash: #59629f;
	--rmn-note-bg: #2a2614;
	--rmn-mark-bg: #6a5a10;
	--rmn-alert-bg: #3a1919;
	--rmn-warn-text: #ffd866;
	--rmn-cloud-0: #7a80a8;
	--rmn-cloud-1: #8e97dc;
	--rmn-cloud-2: #a8b2ff;
	--rmn-cloud-4: #d68ae8;

	--bs-body-color: var(--rmn-ink);
	--bs-body-color-rgb: 201, 206, 242;
	--bs-body-bg: #06081a;
	--bs-body-bg-rgb: 6, 8, 26;
	--bs-emphasis-color: #eef0ff;
	--bs-secondary-color: var(--rmn-gray);
	--bs-secondary-bg: #10142c;
	--bs-tertiary-bg: #0b0e24;
	--bs-link-color: var(--rmn-link);
	--bs-link-color-rgb: 141, 180, 255;
	--bs-link-hover-color: #ff8a8a;
	--bs-link-hover-color-rgb: 255, 138, 138;
	--bs-primary-rgb: 26, 54, 184;
	--bs-danger-rgb: 224, 48, 47;
	--bs-border-color: #2c3468;
	--bs-heading-color: var(--rmn-blue-text);
	--bs-focus-ring-color: rgba(141, 180, 255, .3);
}

/* The cards on the page stand a shade above it. */
:root[data-bs-theme="dark"] main .card {
	--bs-card-bg: var(--rmn-surface);
}

:root[data-bs-theme="dark"] .col-lg-3 > .card, :root[data-bs-theme="dark"] .col-lg-4 > .card, :root[data-bs-theme="dark"] .rmn-panel {
	--bs-card-bg: var(--rmn-blue);
}

:root[data-bs-theme="dark"] .rmn-header {
	background-image: linear-gradient(180deg, #1630a8 0%, var(--rmn-blue-deep) 100%);
}

:root[data-bs-theme="dark"] .alert-secondary, :root[data-bs-theme="dark"] .alert-info {
	--bs-alert-bg: var(--rmn-blue-tint);
}

/* Clear plastic catches less light at night. */
:root[data-bs-theme="dark"] .rmn-cover .safety-cover-face {
	background-image: linear-gradient(165deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 40%);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -6px 12px rgba(224, 48, 47, .14);
}

:root[data-bs-theme="dark"] .rmn-result mark {
	color: #fff6c2;
}

/* Switching: the colors ease across, once. */
.rmn-theme-changing, .rmn-theme-changing * {
	transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}

html, body, form {
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
}

form {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	flex: 1 0 auto;
}

a:visited {
	color: var(--rmn-visited);
}

h1, h2, h3, h4, h5, h6, .h4, .h5 {
	font-weight: 700;
	letter-spacing: -.01em;
}

.text-muted, .text-body-secondary {
	color: var(--rmn-gray) !important;
}

/* ---- The header band --------------------------------------------------------------------- */

.rmn-header {
	background: var(--rmn-blue);
	background-image: linear-gradient(180deg, #0a2cc4 0%, var(--rmn-blue) 60%, var(--rmn-blue-deep) 100%);
	color: #ffffff;
	border-bottom: 4px solid var(--rmn-red);
}

.rmn-brand {
	color: #ffffff;
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.rmn-brand:hover, .rmn-brand:visited {
	color: #ffffff;
}

.rmn-tagline {
	color: var(--rmn-cyan);
	font-style: italic;
	font-weight: 700;
	font-size: .8rem;
	line-height: 1.3;
}

/* The masthead, then the search and the account menu at the right; on a phone the search drops
   under them, the width of the band. */
.rmn-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
}

/* A small basis, so a long tagline wraps beside the menu rather than pushing it to a line of its own. */
.rmn-masthead {
	flex: 1 1 10rem;
	min-width: 0;
}

/* Post something: the pen and "New", between the search and the account menu; the pen alone on a
   phone. */
.rmn-new-post, .rmn-new-post:visited {
	display: flex;
	align-items: center;
	gap: .35rem;
	flex: none;
	padding: .3rem .7rem;
	border: 1px solid var(--rmn-gold);
	border-radius: 999px;
	background: var(--rmn-gold);
	color: var(--rmn-blue-deep);
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.rmn-new-post .rmn-icon {
	font-size: 1rem;
	vertical-align: 0;
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.rmn-new-post:hover, .rmn-new-post:focus-visible, .rmn-new-post.active {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--rmn-red-deep);
}

.rmn-new-post:hover .rmn-icon, .rmn-new-post:focus-visible .rmn-icon {
	transform: rotate(-12deg) scale(1.15);
}

.rmn-new-post:focus-visible {
	outline: 2px solid var(--rmn-gold);
	outline-offset: 2px;
}


@media (max-width: 575.98px) {
	.rmn-new-post span {
		display: none;
	}

	.rmn-new-post, .rmn-new-post:visited {
		padding: .35rem .55rem;
	}
}

/* The night switch: a track with a knob that slides across it, a sun by day and a moon by
   night, the track turning from sky to night sky with a star or two. */
.rmn-theme-switch {
	position: relative;
	flex: none;
	width: 2.9rem;
	height: 1.6rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	background: linear-gradient(180deg, #7fc4ff 0%, #4a8fe0 100%);
	cursor: pointer;
	overflow: hidden;
	transition: background-color .35s ease, border-color .2s ease;
}

.rmn-theme-switch::before, .rmn-theme-switch::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: #ffffff;
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
}

.rmn-theme-switch::before {
	top: .35rem;
	left: .55rem;
	width: 3px;
	height: 3px;
	transform: translateY(.3rem);
}

.rmn-theme-switch::after {
	top: .85rem;
	left: .95rem;
	width: 2px;
	height: 2px;
	transform: translateY(.3rem);
}

.rmn-theme-switch[aria-checked="true"] {
	background: linear-gradient(180deg, #0b1033 0%, #1d2466 100%);
}

.rmn-theme-switch[aria-checked="true"]::before, .rmn-theme-switch[aria-checked="true"]::after {
	opacity: .9;
	transform: none;
}

.rmn-theme-switch:hover {
	border-color: var(--rmn-gold);
}

.rmn-theme-switch:focus-visible {
	outline: 2px solid var(--rmn-gold);
	outline-offset: 2px;
}

.rmn-theme-knob {
	position: absolute;
	top: 50%;
	left: .15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--rmn-gold);
	color: #b36b00;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transform: translateY(-50%);
	transition: left .35s cubic-bezier(.34, 1.4, .64, 1), background-color .35s ease, color .35s ease, transform .35s ease;
}

.rmn-theme-switch[aria-checked="true"] .rmn-theme-knob {
	left: calc(100% - 1.4rem);
	background: #e8ecff;
	color: #3a4290;
	transform: translateY(-50%) rotate(-25deg);
}

.rmn-theme-knob .rmn-icon {
	position: absolute;
	font-size: .85rem;
	transition: opacity .25s ease, transform .35s ease;
}

.rmn-theme-knob .rmn-icon:last-child, .rmn-theme-switch[aria-checked="true"] .rmn-icon:first-child {
	opacity: 0;
	transform: scale(.4) rotate(-90deg);
}

.rmn-theme-switch[aria-checked="true"] .rmn-icon:last-child {
	opacity: 1;
	transform: none;
}

/* Without the script there is nothing to switch. */
html:not(.rmn-js) .rmn-theme-switch {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.rmn-theme-switch, .rmn-theme-switch::before, .rmn-theme-switch::after, .rmn-theme-knob, .rmn-theme-knob .rmn-icon {
		transition: none;
	}
}

/* The account menu: the reader's picture and three bars, opening a card of their links. */
.rmn-user-menu {
	position: relative;
	flex: none;
}

/* The pen and the menu, kept at the right even when a narrow screen wraps them under the masthead. */
.rmn-tools {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: none;
	margin-left: auto;
}

.rmn-user-menu > summary {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .3rem .5rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.rmn-user-menu > summary::-webkit-details-marker {
	display: none;
}

.rmn-user-menu > summary:hover, .rmn-user-menu[open] > summary {
	background: rgba(255, 255, 255, .12);
	border-color: var(--rmn-gold);
}

.rmn-user-menu > summary:focus-visible {
	outline: 2px solid var(--rmn-gold);
	outline-offset: 2px;
}

/* The reader's name beside their picture, on a wider screen; a long one is cut short, and the menu
   has it whole. */
.rmn-user-name {
	max-width: 11rem;
	overflow: hidden;
	color: var(--rmn-gold);
	font-size: .8rem;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* A phone has room for the picture alone. */
@media (max-width: 575.98px) {
	.rmn-user-name {
		display: none;
	}
}

.rmn-user-menu .rmn-avatar {
	box-shadow: 0 0 0 2px var(--rmn-gold);
}

/* Three bars that fold into a cross while the menu is open. */
.rmn-burger {
	position: relative;
	display: block;
	width: 1.1rem;
	height: .85rem;
}

.rmn-burger > span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: var(--rmn-yellow);
	transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

.rmn-burger > span:nth-child(1) { top: 0; }
.rmn-burger > span:nth-child(2) { top: calc(50% - 1px); }
.rmn-burger > span:nth-child(3) { top: calc(100% - 2px); }

.rmn-user-menu[open] .rmn-burger > span:nth-child(1) {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

.rmn-user-menu[open] .rmn-burger > span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.rmn-user-menu[open] .rmn-burger > span:nth-child(3) {
	top: calc(50% - 1px);
	transform: rotate(-45deg);
}

.rmn-menu {
	position: absolute;
	top: calc(100% + .45rem);
	right: 0;
	z-index: 1050;
	min-width: 13rem;
	padding: .35rem 0;
	background: var(--rmn-surface);
	border: 1px solid var(--rmn-blue-deep);
	border-top: 3px solid var(--rmn-red);
	border-radius: var(--rmn-radius);
	box-shadow: 0 .6rem 1.5rem rgba(4, 24, 122, .3);
	font-size: .85rem;
	transform-origin: top right;
}

.rmn-user-menu[open] .rmn-menu {
	animation: rmn-menu-open .2s ease-out;
}

@keyframes rmn-menu-open {
	from {
		opacity: 0;
		transform: translateY(-.4rem) scale(.96);
	}
}

.rmn-menu-who {
	padding: .35rem 1rem .5rem;
	margin-bottom: .25rem;
	border-bottom: 1px solid var(--rmn-blue-tint);
	color: var(--rmn-gray);
	font-size: .78rem;
	overflow-wrap: anywhere;
}

.rmn-menu-who strong {
	color: var(--rmn-blue-text);
}

.rmn-menu a, .rmn-menu a:visited {
	display: block;
	padding: .4rem 1rem;
	color: var(--rmn-blue-text);
	text-decoration: none;
	transition: background-color .15s ease, padding-left .15s ease;
}

.rmn-menu a {
	display: flex;
	align-items: center;
	gap: .6em;
}

.rmn-menu .rmn-icon {
	flex: none;
	color: var(--rmn-gray);
	transition: color .15s ease, transform .15s ease;
}

.rmn-menu a:hover .rmn-icon, .rmn-menu a:focus-visible .rmn-icon {
	color: var(--rmn-red);
	transform: scale(1.15);
}

.rmn-menu a:hover, .rmn-menu a:focus-visible {
	background: var(--rmn-blue-tint);
	color: var(--rmn-red-text);
	padding-left: 1.25rem;
	outline: none;
}

.rmn-menu a.rmn-menu-out {
	margin-top: .25rem;
	border-top: 1px solid var(--rmn-blue-tint);
}

/* The search: it widens and lights up while it is being typed in, and settles back after. */
.rmn-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
	margin: 0;
	color: var(--rmn-gray);
	cursor: text;
}

.rmn-search .rmn-icon {
	position: absolute;
	left: .65rem;
	font-size: .95rem;
	pointer-events: none;
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .3s ease;
}

.rmn-search input {
	width: 12rem;
	padding: .35rem .75rem .35rem 2rem;
	border: 1px solid var(--rmn-blue-deep);
	border-radius: 999px;
	background: var(--rmn-field-bg);
	color: var(--rmn-ink);
	font-size: .8rem;
	transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, box-shadow .35s ease, border-color .3s ease;
}

.rmn-search input::placeholder {
	color: var(--rmn-gray);
	transition: opacity .3s ease, transform .3s ease;
}

.rmn-search input:focus {
	width: 19rem;
	outline: none;
	background: var(--rmn-surface);
	border-color: var(--rmn-gold);
	box-shadow: 0 0 0 3px rgba(255, 215, 0, .55), 0 0 1.1rem rgba(0, 255, 255, .45);
}

.rmn-search input:focus::placeholder {
	opacity: .55;
}

.rmn-search:focus-within .rmn-icon {
	color: var(--rmn-red);
	transform: scale(1.2) rotate(-12deg);
}

/* A search already written stays wide enough to read. */
.rmn-search input:not(:placeholder-shown) {
	width: 16rem;
}

.rmn-search input:not(:placeholder-shown):focus {
	width: 19rem;
}

@media (max-width: 767.98px) {
	.rmn-search {
		order: 3;
		flex: 1 1 100%;
	}

	.rmn-search input, .rmn-search input:focus, .rmn-search input:not(:placeholder-shown) {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rmn-burger > span, .rmn-menu a, .rmn-search .rmn-icon, .rmn-search input, .rmn-user-menu > summary, .rmn-new-post, .rmn-new-post .rmn-icon {
		transition: none;
	}

	.rmn-user-menu[open] .rmn-menu {
		animation: none;
	}
}

/* The links along the band: yellow, with red bullets between them, as they were. */
.rmn-nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem 0;
	margin: .35rem 0 0;
	padding: 0;
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.rmn-nav li + li::before {
	content: "\2022";
	color: var(--rmn-red);
	font-size: 1.1rem;
	margin: 0 .6rem;
	text-shadow: 0 0 1px #ffffff;
}

.rmn-nav a, .rmn-nav a:visited {
	color: var(--rmn-yellow);
	text-decoration: none;
}

/* Each link with its icon; flex drops the space between them, and the gap stands in for it, so an
   underline runs under the words alone. */
.rmn-nav a {
	display: inline-flex;
	align-items: center;
	gap: .35em;
}

.rmn-nav .rmn-icon {
	vertical-align: 0;
	opacity: .9;
}

.rmn-nav a:hover, .rmn-nav a.active {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* ---- Page headings ----------------------------------------------------------------------- */

main h4 {
	color: var(--rmn-blue-text);
}

/* ---- Posts ------------------------------------------------------------------------------- */

main .card {
	--bs-card-border-color: var(--bs-border-color);
	--bs-card-border-radius: var(--rmn-radius);
	box-shadow: 0 1px 2px rgba(6, 34, 166, .06);
}

article.card {
	border-left: 4px solid var(--rmn-blue);
	transition: box-shadow .15s ease, border-color .15s ease;
}

article.card:hover {
	border-left-color: var(--rmn-red);
	box-shadow: 0 4px 14px rgba(6, 34, 166, .12);
}

/* A post's title is a link, bold and underlined, the way the listings always were. */
.card-title a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .15em;
	text-decoration-thickness: 1px;
}

.card-title a:hover {
	color: var(--rmn-red);
}

/* The lines under a title: who, when, where it stands. */
article .text-muted.small {
	color: var(--rmn-ink) !important;
	opacity: .85;
}

article .card-text {
	color: var(--rmn-ink-strong);
}

/* ---- The blue panels at the side --------------------------------------------------------- */

.col-lg-3 > .card, .col-lg-4 > .card, .rmn-panel {
	--bs-card-bg: var(--rmn-blue);
	--bs-card-color: #ffffff;
	--bs-card-border-color: var(--rmn-blue-deep);
	color: #ffffff;
	text-align: center;
}

.col-lg-3 > .card .card-title, .rmn-panel .card-title {
	color: var(--rmn-cyan);
	font-style: italic;
	font-weight: 700;
}

.col-lg-3 > .card .text-muted, .rmn-panel .text-muted {
	color: #dfe4ff !important;
}

.col-lg-3 > .card a, .col-lg-3 > .card a:visited, .rmn-panel a, .rmn-panel a:visited {
	color: #ffffff;
}

.col-lg-3 > .card a:hover, .rmn-panel a:hover {
	color: var(--rmn-yellow);
}

.col-lg-3 > .card li {
	text-align: left;
	padding: .15rem 0;
	border-bottom: 1px dotted rgba(255, 255, 255, .25);
}

.col-lg-3 > .card li:last-child {
	border-bottom: 0;
}

/* The counts beside the tags: gold, like the figures on the old panels. */
.col-lg-3 > .card li .text-muted {
	color: var(--rmn-gold) !important;
	font-weight: 700;
}

.col-lg-3 > .card .btn-outline-secondary {
	--bs-btn-color: var(--rmn-blue);
	--bs-btn-bg: #ffffff;
	--bs-btn-border-color: #ffffff;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: var(--rmn-red);
	--bs-btn-hover-border-color: var(--rmn-red);
	font-weight: 700;
}

/* The red box: for what a reader must not miss. */
.rmn-callout {
	background: var(--rmn-red);
	color: #ffffff;
	border: 0;
	border-radius: var(--rmn-radius);
	font-weight: 700;
	text-align: center;
}

.col-lg-3 > .card.rmn-callout .card-title,
.col-lg-3 > .card.rmn-callout .text-muted {
	color: #ffffff !important;
	font-style: normal;
}

.col-lg-3 > .card.rmn-callout .btn-outline-secondary {
	--bs-btn-color: var(--rmn-red-deep);
	--bs-btn-hover-color: var(--rmn-red-deep);
	--bs-btn-hover-bg: var(--rmn-yellow);
	--bs-btn-hover-border-color: var(--rmn-yellow);
}

.rmn-callout a, .rmn-callout a:visited {
	color: #ffffff;
	text-decoration: underline;
}

/* ---- Link previews ----------------------------------------------------------------------- */

.link-preview {
	background: var(--rmn-blue-tint);
	border: 0 !important;
	border-left: 3px solid var(--rmn-red) !important;
	border-radius: 0 var(--rmn-radius) var(--rmn-radius) 0 !important;
}

.link-preview a {
	font-weight: 700;
}

/* ---- Buttons, badges, alerts ------------------------------------------------------------- */

.btn {
	font-weight: 700;
}

.btn-primary {
	--bs-btn-bg: var(--rmn-blue);
	--bs-btn-border-color: var(--rmn-blue);
	--bs-btn-hover-bg: var(--rmn-blue-deep);
	--bs-btn-hover-border-color: var(--rmn-blue-deep);
	--bs-btn-active-bg: var(--rmn-blue-deep);
	--bs-btn-active-border-color: var(--rmn-blue-deep);
	--bs-btn-disabled-bg: var(--rmn-blue);
	--bs-btn-disabled-border-color: var(--rmn-blue);
}

.btn-outline-secondary {
	--bs-btn-color: var(--rmn-blue-text);
	--bs-btn-border-color: var(--rmn-blue);
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: var(--rmn-blue);
	--bs-btn-hover-border-color: var(--rmn-blue);
}

.btn-outline-danger {
	--bs-btn-color: var(--rmn-red);
	--bs-btn-border-color: var(--rmn-red);
	--bs-btn-hover-bg: var(--rmn-red);
	--bs-btn-hover-border-color: var(--rmn-red);
}

.btn-link {
	--bs-btn-color: var(--rmn-link);
	--bs-btn-hover-color: var(--rmn-red);
}

/* "On the front page" is the honour the site gives, so it wears the red. */
.badge.bg-success {
	background-color: var(--rmn-red) !important;
}

.badge.bg-light {
	background-color: var(--rmn-blue-tint) !important;
	color: var(--rmn-blue-text) !important;
}

.badge.bg-warning {
	background-color: var(--rmn-gold) !important;
	color: var(--rmn-blue-deep) !important;
}

.border-warning {
	border-color: var(--rmn-gold) !important;
}

.alert-secondary {
	--bs-alert-bg: var(--rmn-blue-tint);
	--bs-alert-color: var(--rmn-blue-text);
	--bs-alert-border-color: var(--bs-border-color);
}

.alert-info {
	--bs-alert-bg: var(--rmn-blue-tint);
	--bs-alert-color: var(--rmn-blue-text);
	--bs-alert-border-color: var(--rmn-blue);
	border-left-width: 4px;
}

.alert-warning {
	--bs-alert-bg: #fff8d6;
	--bs-alert-color: var(--rmn-warn-text);
	--bs-alert-border-color: var(--rmn-gold);
	border-left-width: 4px;
}

.alert-danger {
	--bs-alert-bg: #fdecec;
	--bs-alert-color: var(--rmn-red-text);
	--bs-alert-border-color: var(--rmn-red);
	border-left-width: 4px;
}

.form-control:focus {
	border-color: var(--rmn-blue);
}

.form-label {
	font-weight: 700;
	color: var(--rmn-blue-text);
}

/* ---- The footer band --------------------------------------------------------------------- */

.rmn-footer {
	background: var(--rmn-blue-deep);
	line-height: 1.4;
	color: #dfe4ff;
	border-top: 4px solid var(--rmn-red);
	font-size: .8rem;
}

.rmn-footer a, .rmn-footer a:visited {
	color: var(--rmn-cyan);
}

.rmn-footer a:hover {
	color: var(--rmn-yellow);
}

.rmn-footer .rmn-motto {
	color: var(--rmn-cyan);
	font-style: italic;
	font-weight: 700;
}

/* A link styled as a button keeps the button's colors, visited or not, wherever it sits. */
a.btn, a.btn:visited,
.col-lg-3 > .card a.btn, .col-lg-3 > .card a.btn:visited,
.rmn-callout a.btn, .rmn-callout a.btn:visited {
	color: var(--bs-btn-color);
	text-decoration: none;
}

a.btn:hover,
.col-lg-3 > .card a.btn:hover,
.rmn-callout a.btn:hover {
	color: var(--bs-btn-hover-color);
}

/* ---- Posts: a little smaller throughout -------------------------------------------------- */

article.card .card-title {
	font-size: 1.1rem;
	line-height: 1.3;
}

article.card h4.card-title {
	font-size: 1.35rem;
}

article.card .card-body > p.small,
article.card .card-body > .text-muted.small {
	font-size: .78rem;
}

article.card .card-text {
	font-size: .9rem;
}

/* ---- Popularity and views ---------------------------------------------------------------- */

.rmn-views {
	white-space: nowrap;
}

/* From frozen to on fire: deep purplish blue up through blue, green, yellow, and orange to red
   and a hot pinkish red. */
.rmn-heat {
	display: inline-block;
	width: .7em;
	height: .7em;
	border-radius: 50%;
	margin-right: .3em;
	vertical-align: -.02em;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 2px rgba(0, 0, 0, .08);
}

.rmn-heat-0 { background: #2e1a7a; }
.rmn-heat-1 { background: #1a2fa8; }
.rmn-heat-2 { background: #1e7fe0; }
.rmn-heat-3 { background: #23a046; }
.rmn-heat-4 { background: #f0c400; }
.rmn-heat-5 { background: #f57c00; }
.rmn-heat-6 { background: #e01010; }
.rmn-heat-7 { background: #ff1f6e; box-shadow: 0 0 0 1px #fff, 0 0 6px 1px rgba(255, 31, 110, .7); }

.rmn-star {
	color: var(--rmn-gold);
	text-shadow: 0 0 1px var(--rmn-blue-deep);
}

/* ---- Tags on a post ---------------------------------------------------------------------- */

.rmn-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.rmn-tag, .rmn-tag:visited {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .15rem .55rem;
	border: 1px solid var(--rmn-line-strong);
	border-radius: 999px;
	background: var(--rmn-blue-tint);
	color: var(--rmn-blue-text);
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
}

.rmn-tag:hover {
	border-color: var(--rmn-blue);
	color: var(--rmn-blue-text);
}

/* The reader's own tag. */
.rmn-tag.mine, .rmn-tag.mine:visited {
	background: var(--rmn-blue);
	border-color: var(--rmn-blue);
	color: #ffffff;
}

.rmn-tag.mine:hover {
	background: var(--rmn-red);
	border-color: var(--rmn-red);
	color: #ffffff;
}

.rmn-tag-count {
	min-width: 1.3em;
	padding: 0 .3em;
	border-radius: 999px;
	background: var(--rmn-surface);
	color: var(--rmn-blue-text);
	font-size: .72rem;
	text-align: center;
}

/* A tag still to be named: a chip like the others, dashed, with a box to type the name in and a
   "+" at its end where the others have their arrow. Not clipped, so the suggestions can drop
   below it. */
.rmn-tag-new {
	display: inline-flex;
	align-items: stretch;
	border: 1px dashed var(--rmn-dash);
	border-radius: 999px;
	background: var(--rmn-surface);
	color: var(--rmn-blue-text);
	font-size: .8rem;
	font-weight: 700;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.rmn-tag-new:focus-within {
	border-style: solid;
	border-color: var(--rmn-blue);
	box-shadow: 0 0 0 .15rem rgba(6, 34, 166, .15);
}

.rmn-tag-new-mark {
	display: inline-flex;
	align-items: center;
	padding-left: .6rem;
	color: var(--rmn-dash);
}

.rmn-tag-new-input {
	width: 8.5rem;
	field-sizing: content;
	min-width: 6rem;
	max-width: 16rem;
	padding: .15rem .35rem .15rem .2rem;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--rmn-blue-text);
	font: inherit;
}

.rmn-tag-new-input::placeholder {
	color: var(--rmn-dash);
	font-weight: 400;
}

.rmn-tag-new-add {
	padding: 0 .6rem;
	border: 0;
	border-left: 1px dashed var(--rmn-dash);
	border-radius: 0 999px 999px 0;
	background: transparent;
	color: var(--rmn-blue-text);
	font-weight: 700;
	line-height: 1;
	transition: background .12s ease, color .12s ease;
}

.rmn-tag-new-add:hover, .rmn-tag-new-add:focus-visible {
	background: var(--rmn-blue);
	color: #ffffff;
}

/* ---- Tag suggestions as somebody types --------------------------------------------------- */

.rmn-suggest {
	position: absolute;
	z-index: 1000;
	left: 0;
	right: 0;
	top: 100%;
	margin: .15rem 0 0;
	padding: .25rem 0;
	list-style: none;
	background: var(--rmn-surface);
	border: 1px solid var(--rmn-blue);
	border-radius: var(--rmn-radius);
	box-shadow: 0 6px 18px rgba(6, 34, 166, .15);
	max-height: 16rem;
	overflow-y: auto;
}

.rmn-suggest li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .3rem .75rem;
	cursor: pointer;
	font-size: .85rem;
}

.rmn-suggest li:hover, .rmn-suggest li.active {
	background: var(--rmn-blue-tint);
}

.rmn-suggest-name {
	font-weight: 700;
	color: var(--rmn-blue-text);
}

.rmn-suggest-meaning {
	color: var(--rmn-gray);
	font-style: italic;
}

/* ---- The compose icon -------------------------------------------------------------------- */

.rmn-icon {
	vertical-align: -.125em;
}

.rmn-compose .rmn-icon {
	margin-right: .15em;
}

/* ---- Profiles and the admin panel -------------------------------------------------------- */

.rmn-profile .badge.bg-light {
	font-weight: 700;
}

.rmn-stat {
	border-left: 4px solid var(--rmn-blue) !important;
}

.rmn-stat:hover {
	border-left-color: var(--rmn-red) !important;
}

.rmn-stat-value {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--rmn-blue-text);
}

.rmn-table {
	--bs-table-color: var(--rmn-ink);
	font-size: .88rem;
}

.rmn-roles label {
	margin: 0 1rem .35rem .3rem;
}

.nav-tabs .nav-link {
	font-weight: 700;
}

.nav-tabs .nav-link.active {
	color: var(--rmn-blue-text);
}

/* ---- People's pictures ------------------------------------------------------------------- */

.rmn-avatar {
	border-radius: 50%;
	background: var(--rmn-blue-tint);
	vertical-align: middle;
	flex: none;
}

.rmn-author {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	vertical-align: middle;
}

/* ---- Tags: the chip toggles the reader's tag; the arrow at its end goes to the tag --------- */

span.rmn-tag {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.rmn-tag-toggle, .rmn-tag-toggle:visited {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .15rem .45rem .15rem .6rem;
	color: inherit;
	text-decoration: none;
}

.rmn-tag-toggle:hover {
	color: inherit;
	background: rgba(6, 34, 166, .08);
}

/* On hover the arrow slides out and the chip's right end grows with it, into the gap after the
   chip: the extra padding is taken back by an equal negative margin on the chip, changing at the
   same pace, so the room the chip takes in the row never changes and the tags after it stay put. */
.rmn-tag-go, .rmn-tag-go:visited {
	display: inline-flex;
	align-items: center;
	padding: 0 .45rem 0 calc(.45rem - 3px);
	border-left: 1px solid rgba(6, 34, 166, .2);
	color: var(--rmn-blue-text);
	text-decoration: none;
	transition: background .12s ease, color .12s ease, padding-left .12s ease;
}

span.rmn-tag {
	transition: margin-right .12s ease;
}

.rmn-tag-go:hover, .rmn-tag-go:focus-visible {
	background: var(--rmn-blue);
	color: #ffffff;
	padding-left: calc(.45rem + 1.5px);
}

span.rmn-tag:has(.rmn-tag-go:hover), span.rmn-tag:has(.rmn-tag-go:focus-visible) {
	margin-right: -4.5px;
}

.rmn-tag-go:active {
	background: var(--rmn-red);
	color: #ffffff;
}

.rmn-tag.mine .rmn-tag-toggle:hover {
	background: rgba(255, 255, 255, .15);
}

.rmn-tag.mine .rmn-tag-go, .rmn-tag.mine .rmn-tag-go:visited {
	border-left-color: rgba(255, 255, 255, .35);
	color: #ffffff;
}

.rmn-tag.mine .rmn-tag-go:hover {
	background: var(--rmn-red);
}

.rmn-tag-message {
	color: var(--rmn-red-text);
}

/* ---- Settings: radio choices, the delete panel, safety covers ---------------------------- */

/* Only a plain checkbox: Bootstrap floats a .form-check-input in the gutter, and a margin there
   would push its label onto the line below. */
.rmn-options input[type=radio],
.form-check input[type=checkbox]:not(.form-check-input) {
	margin-right: .55rem;
}

.rmn-options label {
	display: inline;
}

.rmn-options br + input, .rmn-options input {
	margin-top: .35rem;
}

details.rmn-danger > summary {
	cursor: pointer;
	list-style: none;
}

details.rmn-danger > summary::-webkit-details-marker {
	display: none;
}

details.rmn-danger > summary::before {
	content: "\25B8";
	float: left;
	margin-right: .6rem;
	color: var(--rmn-red);
	transition: transform .15s ease;
}

details.rmn-danger[open] > summary::before {
	transform: rotate(90deg);
}

.rmn-danger-title {
	font-weight: 700;
	color: var(--rmn-red-text);
}

/* A safety cover: a clear, red-tinted lid, bigger than the button it guards, with "Arm delete"
   across its top edge above the button, which shows through it. Clicking the lid flips it up on
   a hinge along its top edge, the way the cover over a switch opens: it swings toward the reader
   and stands open above the button, and "Armed" shows where its label was. It swings back down
   to close.

   The panel's slider clips its contents, which suits TSafetyCover's own Slide effect; here the
   lid has to show outside the panel as it opens, so the slider does not clip. The guard that
   catches the clicks stays where it is, over the button, either way. The margin above is the
   room the open lid stands in. */
.rmn-cover {
	--rmn-cover-hinge: perspective(26rem) rotateX(112deg);
	display: inline-block;
	margin-top: 1.9rem;
	padding: 1.75rem .8rem .7rem;
	border-radius: 1.1rem;
}

.rmn-cover .safety-cover-slider {
	overflow: visible;
}

.rmn-cover .safety-cover-overlay {
	border-radius: 1.1rem;
	cursor: pointer;
}

.rmn-cover .safety-cover-face {
	border: 2px solid rgba(204, 0, 0, .6);
	border-radius: 1.1rem;
	/* The sheen of clear plastic over the button. */
	background-image: linear-gradient(165deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 40%);
	box-shadow: 0 2px 6px rgba(120, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 -6px 12px rgba(204, 0, 0, .10);
	clip-path: none;
	transform-origin: 50% 0;
	transform-style: preserve-3d;
}

/* Open: the lid stands up on its hinge. */
.rmn-cover.safety-cover-slide .safety-cover-open .safety-cover-face {
	transform: var(--rmn-cover-hinge);
}

.rmn-cover .safety-cover-overlay:hover .safety-cover-face,
.rmn-cover .safety-cover-overlay:focus-visible .safety-cover-face {
	border-color: var(--rmn-red);
	box-shadow: 0 3px 9px rgba(120, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 -6px 14px rgba(204, 0, 0, .22);
}

/* The label on the lid, and "Armed" on the panel under it, shown only while the lid is up. */
.rmn-cover-face, .rmn-cover-armed {
	position: absolute;
	top: .35rem;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--rmn-red-text);
	font-weight: 700;
	font-size: .75rem;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.rmn-cover-face {
	backface-visibility: hidden;
}

.rmn-cover-armed {
	opacity: 0;
	transform: translateY(.3rem);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.rmn-cover .safety-cover-open ~ .safety-cover-content .rmn-cover-armed {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--safety-cover-animation-duration, 250ms) / 2);
}

.rmn-cover-face::before, .rmn-cover-armed::before {
	content: "\1F512";
	margin-right: .35em;
	letter-spacing: 0;
}

.rmn-cover-armed::before {
	content: "\1F513";
}

@media (prefers-reduced-motion: reduce) {
	.rmn-cover-armed, .rmn-cover .safety-cover-open ~ .safety-cover-content .rmn-cover-armed {
		transition: none;
	}
}

.rmn-cover .btn {
	border-radius: 1rem;
	padding-left: .9rem;
	padding-right: .9rem;
}

/* ---- Profiles ---------------------------------------------------------------------------- */

.rmn-profile {
	border-top: 4px solid var(--rmn-blue);
}

.rmn-profile-avatar .rmn-avatar {
	box-shadow: 0 0 0 3px var(--rmn-surface), 0 0 0 5px var(--rmn-blue);
}

.rmn-bio {
	color: var(--rmn-ink-strong);
}

.rmn-count {
	margin-right: 1rem;
	white-space: nowrap;
}

.rmn-count strong {
	color: var(--rmn-blue-text);
}

.rmn-friends {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem;
}

/* A post set for a later time: the badge on it, and on the Upcoming tab's count. */
.rmn-badge-upcoming {
	background: var(--rmn-blue-tint);
	color: var(--rmn-blue-text);
	border: 1px solid rgba(6, 34, 166, .25);
	font-weight: 700;
}

/* The box a post's time is picked in: a date and a time need no more room than this. */
.rmn-when {
	max-width: 16rem;
}

.rmn-friend-badge {
	background: var(--rmn-gold);
	color: var(--rmn-blue-deep);
}

/* "Following" turns into "Unfollow" under the pointer. */
.rmn-following:hover {
	--bs-btn-hover-bg: var(--rmn-red);
	--bs-btn-hover-border-color: var(--rmn-red);
	--bs-btn-hover-color: #ffffff;
	font-size: 0;
}

.rmn-following:hover::after {
	content: attr(data-unfollow);
	font-size: .875rem;
}

.rmn-code {
	font-size: 1.4rem;
	letter-spacing: .35em;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	max-width: 12rem;
}

/* ---- About, Contact, and the messages from it --------------------------------------------- */

.rmn-about-lead {
	font-size: 1.05rem;
	color: var(--rmn-blue-text);
	font-weight: 700;
}

.rmn-about h5 {
	color: var(--rmn-red-text);
	margin-top: 1.5rem;
}

.rmn-about .rmn-about-callout {
	padding: 1rem 1.25rem;
	text-align: left;
	font-weight: 400;
}

.rmn-about .rmn-about-callout h5 {
	color: #ffffff;
	margin-top: 0;
	font-weight: 700;
}

.rmn-captcha-image {
	border-radius: var(--rmn-radius);
	border: 1px solid rgba(6, 34, 166, .25);
}

.rmn-captcha-input {
	max-width: 10rem;
	letter-spacing: .2em;
	font-weight: 700;
}

.rmn-message-new {
	border-left: 4px solid var(--rmn-red);
}

/* ---- Posts brought over from the old site ------------------------------------------------- */

/* Below the post, never in it: where it came from, and the Wayback Machine's copy. */
.rmn-archive-line {
	font-size: .75rem;
	color: var(--rmn-gray);
	border-top: 1px dashed rgba(6, 34, 166, .2);
	padding-top: .4rem;
	margin: .75rem 0 .6rem;
}

.rmn-archive-missing {
	font-style: italic;
	color: var(--rmn-red-text);
}

.rmn-original-line {
	font-size: .8rem;
	margin: .5rem 0 0;
}

/* ---- Flags ---------------------------------------------------------------------------------- */

.rmn-flag-link {
	text-align: right;
	font-size: .75rem;
	margin: .5rem 0 0;
}

.rmn-flag-link a, .rmn-flag-link a:visited {
	color: var(--rmn-gray);
	text-decoration: none;
}

.rmn-flag-link a:hover {
	color: var(--rmn-red-text);
	text-decoration: underline;
}

/* A reason's explanation, under its label in the list. */
.rmn-option-note {
	display: block;
	margin: 0 0 .35rem 1.55rem;
	font-size: .78rem;
	color: var(--rmn-gray);
}

.rmn-flag-panel {
	background: var(--rmn-blue-tint);
	border-left: 3px solid var(--rmn-blue);
	border-radius: 0 var(--rmn-radius) var(--rmn-radius) 0;
	padding: .75rem 1rem;
}

.rmn-claim-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--rmn-red-text);
	margin: .25rem 0 .5rem;
	user-select: all;
}

.rmn-flag-reason {
	font-weight: 700;
	color: var(--rmn-red-text);
}

.rmn-flag-personal, .rmn-flag-harassment {
	border-left: 4px solid var(--rmn-red);
}

.rmn-flag-details dt {
	font-weight: 700;
	color: var(--rmn-blue-text);
}

.rmn-flag-details dd {
	margin: 0 0 .35rem;
}

.rmn-nav-count {
	background: var(--rmn-yellow);
	color: var(--rmn-blue-deep);
	font-size: .65rem;
	vertical-align: middle;
}

.rmn-formerly strong {
	color: var(--rmn-blue-text);
}

/* Each reason on a line of its own, its explanation under it, with no blank line between. */
.rmn-flag-reasons br {
	display: none;
}

.rmn-flag-reasons label {
	display: inline-block;
	width: calc(100% - 2rem);
	vertical-align: top;
	margin-bottom: .45rem;
}

.rmn-flag-reasons .rmn-option-note {
	margin: .1rem 0 0;
}

/* A link-button PRADO disabled: no address, so it should not look like it has one. */
a.btn[disabled] {
	opacity: .45;
	pointer-events: none;
}

/* ---- Listings: how the reader has them shown ------------------------------------------------ */

.rmn-list-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5rem 1rem;
	margin-bottom: 1rem;
}

.rmn-view-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	margin-left: auto;
}

.rmn-view-options .btn {
	--bs-btn-padding-y: .1rem;
	--bs-btn-padding-x: .5rem;
	--bs-btn-font-size: .72rem;
}

/* A label stays with its buttons when the bar wraps. */
.rmn-view-set {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.rmn-view-label {
	font-size: .72rem;
	font-weight: 700;
	color: var(--rmn-gray);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Titles alone, as the old site's main page listed them: one line each, close together. */
.card.rmn-compact {
	margin-bottom: .35rem;
}

.card.rmn-compact .card-body {
	padding: .45rem .75rem;
}

.card.rmn-compact .card-title {
	font-size: 1rem;
}

.card.rmn-compact .card-body > p:last-child {
	margin-bottom: 0 !important;
}

/* ---- Feeds: items, their votes and buttons, feed cards, columns ------------------------------ */

.rmn-river {
	border-top: 1px solid var(--rmn-line);
}

.rmn-item {
	display: flex;
	gap: .75rem;
	padding: .7rem .25rem;
	border-bottom: 1px solid var(--rmn-line);
}

.rmn-item:target {
	background: var(--rmn-blue-tint);
}

.rmn-item-main {
	flex: 1 1 auto;
	min-width: 0;
}

.rmn-item-title {
	margin: 0 0 .15rem;
	font-size: 1rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.rmn-item-full .rmn-item-title {
	font-size: 1.35rem;
}

.rmn-item-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1rem .35rem;
}

.rmn-item-summary {
	margin-top: .3rem;
	font-size: .88rem;
	color: var(--rmn-ink-soft);
	overflow-wrap: anywhere;
}

.rmn-item-content {
	overflow-wrap: anywhere;
}

.rmn-item-content img, .rmn-item-content iframe, .rmn-item-content video {
	max-width: 100%;
	height: auto;
}

/* The vote: an arrow over its count, at the left of each item. */
.rmn-vote-box {
	flex: 0 0 2.4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .05rem;
	padding-top: .1rem;
}

.rmn-vote, .rmn-vote:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 1.6rem;
	padding: 0;
	border: 1px solid var(--rmn-line-strong);
	border-radius: .4rem;
	background: var(--rmn-surface);
	color: var(--rmn-gray);
	font-size: .8rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.rmn-vote:hover, .rmn-vote:focus-visible {
	border-color: var(--rmn-red);
	color: var(--rmn-red);
}

.rmn-vote.on {
	border-color: var(--rmn-red);
	background: var(--rmn-red);
	color: #ffffff;
}

.rmn-vote-count {
	font-size: .78rem;
	font-weight: 700;
	color: var(--rmn-blue-text);
}

.rmn-post-mark {
	color: var(--rmn-gray);
	font-size: 1.1rem;
}

/* The buttons under an item: quiet text buttons, one of them a form button. */
.rmn-item-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .9rem;
	margin-top: .35rem;
}

.rmn-act, .rmn-act:visited {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rmn-gray);
	font-size: .78rem;
	text-decoration: none;
	cursor: pointer;
}

.rmn-act:hover, .rmn-act:focus-visible {
	color: var(--rmn-red);
	text-decoration: underline;
}

.rmn-act.on {
	color: var(--rmn-blue-text);
	font-weight: 700;
}

/* Small buttons for arranging: up, down, to the top. */
.rmn-mini {
	padding: 0 .3rem;
	border: 1px solid var(--rmn-line-strong);
	border-radius: .3rem;
	background: var(--rmn-surface);
	color: var(--rmn-blue-text);
	font-size: .72rem;
	line-height: 1.4;
	cursor: pointer;
}

.rmn-mini:hover, .rmn-mini:focus-visible {
	border-color: var(--rmn-red);
	color: var(--rmn-red);
}

/* An item's tags, in a list: small chips, the feed's suggestions faded. */
.rmn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-top: .35rem;
}

.rmn-chip {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .05rem .5rem;
	border: 1px solid var(--rmn-line-strong);
	border-radius: 999px;
	background: var(--rmn-blue-tint);
	color: var(--rmn-blue-text);
	font-size: .72rem;
	font-weight: 700;
}

.rmn-chip.auto, span.rmn-tag.auto {
	border-style: dashed;
	background: var(--rmn-surface);
	color: var(--rmn-gray);
	font-weight: 400;
}

/* A link chip, for narrowing a list: kinds of site, tags on feeds. */
.rmn-chip-links {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}

.rmn-chip-link, .rmn-chip-link:visited {
	padding: .1rem .6rem;
	border: 1px solid var(--rmn-line-strong);
	border-radius: 999px;
	color: var(--rmn-blue-text);
	font-size: .78rem;
	text-decoration: none;
}

.rmn-chip-link:hover {
	border-color: var(--rmn-red);
	color: var(--rmn-red);
}

.rmn-chip-link.active {
	border-color: var(--rmn-blue);
	background: var(--rmn-blue);
	color: #ffffff;
}

.rmn-chip-link.active .text-muted {
	color: #c9d0f2 !important;
}

/* A feed: its picture and name. */
.rmn-feed-icon {
	width: 1em;
	height: 1em;
	margin-right: .3em;
	border-radius: 3px;
	vertical-align: -.12em;
}

.rmn-feed-name, .rmn-feed-name:visited {
	color: var(--rmn-blue-text);
	font-weight: 700;
	text-decoration: none;
}

.rmn-feed-name:hover {
	color: var(--rmn-red);
	text-decoration: underline;
}

.badge.rmn-platform {
	background: var(--rmn-blue-tint);
	color: var(--rmn-blue-text);
	font-weight: 400;
	vertical-align: middle;
}

.rmn-feed-card {
	padding: .75rem .25rem;
	border-bottom: 1px solid var(--rmn-line);
}

.rmn-highlights {
	padding: .5rem 1rem;
	border: 2px solid var(--rmn-gold);
	border-radius: var(--rmn-radius);
	background: var(--rmn-note-bg);
}

.rmn-highlights .rmn-feed-card:last-child {
	border-bottom: 0;
}

.rmn-blurb {
	color: var(--rmn-red-text);
	font-style: italic;
}

.rmn-feed-list li, .rmn-top-items li {
	padding: .2rem 0;
	overflow-wrap: anywhere;
}

.rmn-col-meta {
	display: block;
	font-size: .72rem;
	color: var(--rmn-gray);
}

/* Columns, as The Liberty Mill shows its sources: a column per feed, its headlines in it. */
.rmn-columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
}

.rmn-column {
	border: 1px solid var(--rmn-line-strong);
	border-radius: var(--rmn-radius);
	background: var(--rmn-surface);
	overflow: hidden;
}

.rmn-column-head {
	margin: 0;
	padding: .45rem .75rem;
	border-bottom: 2px solid var(--rmn-red);
	background: var(--rmn-blue);
	overflow-wrap: anywhere;
}

.rmn-column-head, .rmn-column-head a, .rmn-column-head a:visited {
	color: var(--rmn-cyan);
}

.rmn-column ul {
	margin: 0;
	padding: .25rem .75rem .5rem;
	list-style: none;
}

.rmn-column li {
	padding: .35rem 0;
	border-bottom: 1px dotted var(--rmn-line);
	font-size: .85rem;
	overflow-wrap: anywhere;
}

.rmn-column li:last-child {
	border-bottom: 0;
}

.rmn-folders {
	gap: .25rem;
}

.rmn-folders .nav-link {
	padding: .2rem .7rem;
	font-size: .85rem;
}

/* The feeds a reader follows, and claims. */
.rmn-subscriptions td:nth-child(2) {
	min-width: 8rem;
}

.rmn-claim-code {
	padding: .2rem .5rem;
	border: 1px dashed var(--rmn-red);
	border-radius: .3rem;
	background: var(--rmn-alert-bg);
	font-size: .95rem;
	user-select: all;
}

.rmn-choices label {
	margin: 0 1rem .25rem .35rem;
}

/* Saved things, and the categories they are in. */
.rmn-saved {
	padding: .6rem .25rem;
	border-bottom: 1px solid var(--rmn-line);
}

.rmn-saved:target {
	background: var(--rmn-blue-tint);
}

.rmn-saved-note {
	margin-top: .3rem;
	padding: .25rem .5rem;
	border-left: 3px solid var(--rmn-gold);
	background: var(--rmn-note-bg);
	font-size: .85rem;
}

.rmn-categories li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem;
	padding: .25rem .4rem;
	border-radius: .3rem;
	font-size: .9rem;
}

.rmn-categories li.active {
	background: var(--rmn-blue-tint);
	font-weight: 700;
}

.rmn-categories .rmn-move {
	display: inline-flex;
	gap: .15rem;
	margin-left: auto;
}

.rmn-private-mark {
	font-size: .7rem;
}

/* Feeds in the blue panels at the side: white on blue, as the panels' other links are. */
.col-lg-4 > .card a, .col-lg-4 > .card a:visited,
.col-lg-3 > .card .rmn-feed-name, .col-lg-3 > .card .rmn-feed-name:visited,
.col-lg-4 > .card .rmn-feed-name, .col-lg-4 > .card .rmn-feed-name:visited {
	color: #ffffff;
}

.col-lg-4 > .card a:hover, .col-lg-3 > .card .rmn-feed-name:hover, .col-lg-4 > .card .rmn-feed-name:hover {
	color: var(--rmn-yellow);
}

.col-lg-4 > .card li {
	text-align: left;
	padding: .2rem 0;
	border-bottom: 1px dotted rgba(255, 255, 255, .25);
}

.col-lg-4 > .card li:last-child {
	border-bottom: 0;
}

.col-lg-3 > .card .rmn-col-meta, .col-lg-4 > .card .rmn-col-meta,
.col-lg-4 > .card .text-muted {
	color: #dfe4ff !important;
}

.col-lg-3 > .card .rmn-chip-link, .col-lg-4 > .card .rmn-chip-link {
	border-color: rgba(255, 255, 255, .5);
	color: #ffffff;
}

.col-lg-3 > .card .rmn-chip-link .text-muted, .col-lg-4 > .card .rmn-chip-link .text-muted {
	color: var(--rmn-gold) !important;
	font-weight: 700;
}

.col-lg-3 > .card .rmn-chip-link:hover, .col-lg-4 > .card .rmn-chip-link:hover {
	border-color: var(--rmn-yellow);
	color: var(--rmn-yellow);
}

.col-lg-4 > .card .rmn-chip-links, .col-lg-3 > .card .rmn-chip-links {
	justify-content: center;
}

/* The site's own feeds, for feed readers. */
.rmn-feed-button .rmn-icon {
	color: #f26522;
}

.rmn-list-head .rmn-feed-button {
	--bs-btn-padding-y: .1rem;
	--bs-btn-padding-x: .5rem;
	--bs-btn-font-size: .72rem;
}

/* ---- The tag cloud: each tag as large as its weight; rmn.js lays them on a spiral -------- */

.rmn-cloud {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .3rem .8rem;
	min-height: 6rem;
	padding: .75rem 0;
	border-top: 1px solid var(--rmn-line);
	border-bottom: 1px solid var(--rmn-line);
}

.rmn-cloud.arranged {
	display: block;
	position: relative;
	box-sizing: content-box;
}

.rmn-cloud.arranged .rmn-cloud-tag {
	position: absolute;
	transition: left .35s ease, top .35s ease;
}

.rmn-cloud-tag, .rmn-cloud-tag:visited {
	padding: 0 .2rem;
	border-radius: .3rem;
	font-size: calc(.78rem + var(--w, 0) * 1.9rem);
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	text-decoration: none;
}

.rmn-cloud-w0, .rmn-cloud-w0:visited { color: var(--rmn-cloud-0); font-weight: 400; }
.rmn-cloud-w1, .rmn-cloud-w1:visited { color: var(--rmn-cloud-1); font-weight: 400; }
.rmn-cloud-w2, .rmn-cloud-w2:visited { color: var(--rmn-cloud-2); }
.rmn-cloud-w3, .rmn-cloud-w3:visited { color: var(--rmn-blue); }
.rmn-cloud-w4, .rmn-cloud-w4:visited { color: var(--rmn-cloud-4); }
.rmn-cloud-w5, .rmn-cloud-w5:visited { color: var(--rmn-red); }

.rmn-cloud-tag:hover, .rmn-cloud-tag:focus-visible {
	background: var(--rmn-blue-tint);
	color: var(--rmn-red);
}

.rmn-cloud-tag.on, .rmn-cloud-tag.on:visited {
	background: var(--rmn-blue);
	color: #ffffff;
}

.rmn-cloud.arranged .rmn-cloud-spare {
	display: none;
}

@media (max-width: 575.98px) {
	.rmn-cloud-tag, .rmn-cloud-tag:visited {
		font-size: calc(.72rem + var(--w, 0) * 1.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rmn-cloud.arranged .rmn-cloud-tag {
		transition: none;
	}
}

/* ---- Search ---------------------------------------------------------------------------------- */

.rmn-result mark {
	padding: 0 .1em;
	background: var(--rmn-mark-bg);
	color: inherit;
}

.badge.rmn-result-kind {
	background: var(--rmn-blue-tint);
	color: var(--rmn-blue-text);
	font-weight: 400;
}

.badge.rmn-result-kind.front {
	background: var(--rmn-red);
	color: #ffffff;
}

.rmn-read-as {
	color: var(--rmn-blue-text);
}

.rmn-search-help li {
	padding: .2rem 0;
	text-align: left;
}

.rmn-search-help code {
	color: var(--rmn-gold);
}

/* A row of buttons beside a heading wraps a whole button to the next line, never its words. */
.rmn-button-row > .btn {
	white-space: nowrap;
}

/* ---- What is new to the reader --------------------------------------------------------------- */

/* A count of new items: a red pill beside "My feed", a folder, a column, the heading. */
.rmn-unread-count {
	display: inline-block;
	min-width: 1.45em;
	margin-left: .4em;
	padding: .1em .45em;
	border-radius: 999px;
	background: var(--rmn-red);
	color: #ffffff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	vertical-align: .15em;
}

.rmn-nav .rmn-unread-count {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
}

.rmn-unread-count.rmn-bump {
	animation: rmn-bump .35s ease-out;
}

@keyframes rmn-bump {
	40% {
		transform: scale(1.35);
	}
}

/* An item new to the reader: a red edge, and a "New" flag before its title that marks it read. */
.rmn-item {
	border-left: 3px solid transparent;
	transition: border-color .4s ease, background-color .4s ease;
}

.rmn-item.unread {
	border-left-color: var(--rmn-red);
	background: linear-gradient(90deg, rgba(204, 0, 0, .045), rgba(204, 0, 0, 0) 40%);
}

.rmn-item.unread .rmn-item-title a {
	font-weight: 700;
}

.rmn-new-flag {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	margin-right: .45em;
	padding: .12em .5em;
	border: 0;
	border-radius: 999px;
	background: var(--rmn-red);
	color: #ffffff;
	font-size: .62rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: .2em;
	cursor: pointer;
	transition: background-color .2s ease, transform .3s ease, opacity .3s ease;
}

/* Over the flag, it says what a click does. */
.rmn-new-flag:hover, .rmn-new-flag:focus-visible {
	background: #1a7f37;
	font-size: 0;
	letter-spacing: 0;
}

.rmn-new-flag:hover::after, .rmn-new-flag:focus-visible::after {
	content: "\2713  Read";
	font-size: .62rem;
	letter-spacing: .08em;
	white-space: pre;
}

.rmn-new-flag.gone {
	opacity: 0;
	transform: scale(.2);
}

.rmn-column li.unread > a {
	font-weight: 700;
}

.rmn-column .rmn-new-flag {
	margin-right: .35em;
	vertical-align: .1em;
}

/* The reading bar: everything or only new, choosing, and marking read. */
.rmn-read-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
}

.rmn-read-tools {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.rmn-read-bar .btn-primary .rmn-unread-count {
	background: #ffffff;
	color: var(--rmn-red);
}

.rmn-read-tools .badge {
	background: rgba(255, 255, 255, .25);
}

/* Choosing items is the script's: without it, the boxes and their buttons stay hidden. */
html:not(.rmn-js) .rmn-js-only, .rmn-selecting-only, .rmn-select {
	display: none !important;
}

.rmn-selecting .rmn-selecting-only {
	display: inline-flex !important;
	align-items: center;
	gap: .35em;
}

.rmn-selecting .rmn-select {
	display: inline-block !important;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	margin: .3rem 0 0;
	cursor: pointer;
	animation: rmn-select-in .2s ease-out;
}

.rmn-column .rmn-select {
	margin: 0 .4em 0 0 !important;
	vertical-align: -.2em;
}

.rmn-selecting .rmn-item.unread {
	cursor: pointer;
}

.rmn-selecting [data-select-toggle] {
	background: var(--rmn-blue);
	border-color: var(--rmn-blue);
	color: #ffffff;
}

.rmn-item:has(.rmn-select:checked) {
	background: var(--rmn-blue-tint);
}

@keyframes rmn-select-in {
	from {
		opacity: 0;
		transform: scale(.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rmn-item, .rmn-new-flag, .rmn-unread-count.rmn-bump, .rmn-selecting .rmn-select {
		transition: none;
		animation: none;
	}
}