/* freshgo: one stylesheet, two looks, each light and dark. Colours and sizes are variables;
   nothing below the :root blocks names a colour. */

:root {
	color-scheme: light dark;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--reading-width: 44rem;
	--space: 0.5rem;
	--radius: 0.375rem;
}

:root[data-look="classic"] {
	--font: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--text-size: 0.875rem;
	--row-pad: 0.2rem;
	--radius: 0.1875rem;
}

:root[data-look="modern"] {
	--font: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--text-size: 0.875rem;
	--row-pad: 0.55rem;
	--radius: 0.125rem;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

:root[data-theme="light"] {
	color-scheme: light;
}

/* The looks. Each has a light palette and a dark one; the dark one applies by
   the system's preference unless the user chose light, and whenever the user
   chose dark. */

:root[data-look="classic"] {
	--bg: #ffffff;
	--bg-raised: #ebeff9;
	--text: #1a1a1a;
	--text-muted: #5a5f6b;
	--border: #c5d0e6;
	--accent: #1a3fc4;
	--accent-text: #ffffff;
	--danger: #b3261e;
	--focus: #1a3fc4;
	--unread: #000000;
	--read: #555b66;
	--bar: #c2cff1;
	--selected: #dfe8fb;
	--card-border: #6694e3;
	--row-border: #e3e7f0;
	--read-bg: #f1f4fb;
	--button-bg: #f3f3f3;
	--button-text: #1a1a1a;
	--button-border: #aab2c2;
	--star: #8a5a00;
}

@media (prefers-color-scheme: dark) {
	:root[data-look="classic"]:not([data-theme="light"]) {
		--bg: #14161c;
		--bg-raised: #1d2233;
		--text: #e6e8ee;
		--text-muted: #a4a9b8;
		--border: #353d54;
		--accent: #8fb0ff;
		--accent-text: #0d1020;
		--danger: #f2b8b5;
		--focus: #8fb0ff;
		--unread: #f2f4f8;
		--read: #9aa0ae;
		--bar: #2a3352;
		--selected: #263154;
		--card-border: #5677c9;
		--row-border: #262c3d;
		--read-bg: #191c26;
		--button-bg: #2a3145;
		--button-text: #e6e8ee;
		--button-border: #4a5370;
		--star: #f2c94c;
	}
}

:root[data-look="classic"][data-theme="dark"] {
	--bg: #14161c;
	--bg-raised: #1d2233;
	--text: #e6e8ee;
	--text-muted: #a4a9b8;
	--border: #353d54;
	--accent: #8fb0ff;
	--accent-text: #0d1020;
	--danger: #f2b8b5;
	--focus: #8fb0ff;
	--unread: #f2f4f8;
	--read: #9aa0ae;
	--bar: #2a3352;
	--selected: #263154;
	--card-border: #5677c9;
	--row-border: #262c3d;
	--read-bg: #191c26;
	--button-bg: #2a3145;
	--button-text: #e6e8ee;
	--button-border: #4a5370;
	--star: #f2c94c;
}

:root[data-look="modern"] {
	--bg: #ffffff;
	--bg-raised: #f5f5f5;
	--text: #222222;
	--text-muted: #666666;
	--border: #dcdcdc;
	--accent: #1155cc;
	--accent-text: #ffffff;
	--danger: #b3261e;
	--focus: #1155cc;
	--unread: #111111;
	--read: #6b6b6b;
	--bar: #f5f5f5;
	--selected: #eeeeee;
	--card-border: #d0d0d0;
	--row-border: #ebebeb;
	--read-bg: #ffffff;
	--button-bg: #c53727;
	--button-text: #ffffff;
	--button-border: #c53727;
	--star: #8a5a00;
}

@media (prefers-color-scheme: dark) {
	:root[data-look="modern"]:not([data-theme="light"]) {
		--bg: #1b1b1b;
		--bg-raised: #262626;
		--text: #e8e8e8;
		--text-muted: #a8a8a8;
		--border: #3d3d3d;
		--accent: #8ab4f8;
		--accent-text: #10100f;
		--danger: #f2b8b5;
		--focus: #8ab4f8;
		--unread: #f2f2f2;
		--read: #939393;
		--bar: #262626;
		--selected: #333333;
		--card-border: #4a4a4a;
		--row-border: #2c2c2c;
		--read-bg: #1b1b1b;
		--button-bg: #e58073;
		--button-text: #1b1b1b;
		--button-border: #e58073;
		--star: #f2c94c;
	}
}

:root[data-look="modern"][data-theme="dark"] {
	--bg: #1b1b1b;
	--bg-raised: #262626;
	--text: #e8e8e8;
	--text-muted: #a8a8a8;
	--border: #3d3d3d;
	--accent: #8ab4f8;
	--accent-text: #10100f;
	--danger: #f2b8b5;
	--focus: #8ab4f8;
	--unread: #f2f2f2;
	--read: #939393;
	--bar: #262626;
	--selected: #333333;
	--card-border: #4a4a4a;
	--row-border: #2c2c2c;
	--read-bg: #1b1b1b;
	--button-bg: #e58073;
	--button-text: #1b1b1b;
	--button-border: #e58073;
	--star: #f2c94c;
}

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

html {
	font-family: var(--font);
	font-size: 100%;
	line-height: 1.5;
	background: var(--bg);
	color: var(--text);
	/* An element scrolled to by the keyboard does not hide under the header. */
	scroll-padding-top: 4rem;
}

body {
	margin: 0;
	font-size: var(--text-size);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Focus is always visible, and the same everywhere. */
:focus-visible {
	outline: 0.1875rem solid var(--focus);
	outline-offset: 0.125rem;
	border-radius: var(--radius);
}

/* The content area takes focus from the skip link and after navigation;
   it is not a control and gets no ring. */
main:focus {
	outline: none;
}

a {
	color: var(--accent);
	text-underline-offset: 0.15em;
}

h1,
h2,
h3 {
	line-height: 1.25;
	margin: calc(var(--space) * 3) 0 var(--space);
}

h1 {
	font-size: 1.5rem;
}

p {
	margin: var(--space) 0 calc(var(--space) * 2);
}

code {
	font-family: var(--font-mono);
	font-size: 0.9375em;
	background: var(--bg-raised);
	padding: 0.1em 0.3em;
	border-radius: 0.25rem;
	overflow-wrap: anywhere;
}

/* The first thing Tab reaches: a link past the menus. Off screen until focused. */
.skip {
	position: absolute;
	left: var(--space);
	top: -10rem;
	z-index: 10;
	padding: var(--space) calc(var(--space) * 2);
	background: var(--accent);
	color: var(--accent-text);
	border-radius: var(--radius);
}

.skip:focus {
	top: var(--space);
}

.site-header {
	display: flex;
	align-items: center;
	gap: calc(var(--space) * 2);
	padding: calc(var(--space) / 2) calc(var(--space) * 2);
	border-bottom: 1px solid var(--border);
	background: var(--bg-raised);
}

.site-title {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--text);
	text-decoration: none;
}

.site-nav ul {
	display: flex;
	gap: calc(var(--space) * 2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a[aria-current="page"] {
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
}

.page {
	flex: 1;
	width: 100%;
	max-width: var(--reading-width);
	margin: 0 auto;
	padding: var(--space) calc(var(--space) * 2) calc(var(--space) * 6);
}

.messages {
	max-width: var(--reading-width);
	margin: 0 auto;
	padding: 0 calc(var(--space) * 2);
}

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

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.account {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: calc(var(--space) * 2);
}

.account form {
	margin: 0;
}

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

/* Forms: a label above its field, fields as wide as the column allows. */
.form {
	max-width: 24rem;
}

.form label {
	display: block;
	font-weight: 600;
	margin-bottom: calc(var(--space) / 2);
}

.form .check {
	display: flex;
	align-items: center;
	gap: var(--space);
}

.form .check label {
	font-weight: 400;
	margin: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
	width: 100%;
	font: inherit;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space) calc(var(--space) * 1.5);
}

input[type="checkbox"],
input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--accent);
}

button {
	font: inherit;
	color: var(--button-text);
	background: var(--button-bg);
	border: 1px solid var(--button-border);
	border-radius: var(--radius);
	padding: calc(var(--space) * 0.6) calc(var(--space) * 1.5);
	cursor: pointer;
}

/* An action that sits among links looks like one. */
button.link {
	color: var(--accent);
	background: none;
	border: none;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.alert {
	border: 1px solid var(--danger);
	border-left-width: 0.25rem;
	color: var(--danger);
	background: var(--bg-raised);
	border-radius: var(--radius);
	padding: var(--space) calc(var(--space) * 1.5);
}

/* The reading screen: the tree of subscriptions beside the stream. */

.page.wide {
	max-width: none;
}

.messages p {
	margin: var(--space) 0;
	padding: var(--space) calc(var(--space) * 1.5);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-raised);
}

.reader {
	display: grid;
	grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
	gap: calc(var(--space) * 2);
	align-items: start;
}

@media (max-width: 48rem) {
	.reader {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The tree: one line a stream, bold while it has something unread. */
.tree > details > summary {
	font-weight: 700;
	cursor: pointer;
	padding: calc(var(--space) / 2) 0;
}

.tree .root {
	font-size: 1.05em;
}

.tree h2 {
	margin: var(--space) 0 calc(var(--space) / 2);
	padding-top: var(--space);
	border-top: 1px solid var(--row-border);
	font-size: 0.8rem;
	color: var(--text-muted);
}

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

.tree ul ul {
	padding-left: calc(var(--space) * 2.5);
}

.tree li {
	padding: 0.1rem 0;
}

/* The fold of a category: its marker stands before the name. */
.tree li:has(> .branch) {
	position: relative;
	padding-left: 1.1rem;
}

.tree .branch > summary {
	position: absolute;
	left: 0;
	top: 0.15rem;
	width: 1.1rem;
	cursor: pointer;
}

.tree .branch > ul {
	padding-left: calc(var(--space) * 1.5);
}

.tree a {
	display: inline-block;
	padding: 0.05rem calc(var(--space) / 2);
	border-radius: var(--radius);
	text-decoration: none;
}

.tree li:has(> .count) > a {
	font-weight: 700;
}

.tree a[aria-current="page"] {
	color: var(--text);
	background: var(--selected);
	font-weight: 700;
}

.tree a.failing {
	color: var(--danger);
}

.count {
	color: var(--text-muted);
	font-size: 0.9em;
}

.count::before {
	content: "(";
}

.count::after {
	content: ")";
}

.mark {
	color: var(--danger);
	font-weight: 700;
}

/* The name of the stream stands on a bar, the controls under it. */
.stream-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 calc(var(--space) * 2);
	padding: calc(var(--space) * 0.75) calc(var(--space) * 1.5);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--bar);
}

.stream h1 {
	margin: 0;
	font-size: 1.15rem;
}

/* How many of the stream are unread, on the bar next to its name. */
.stream-head .count {
	color: var(--text);
	font-size: 1rem;
}

/* How the entries are listed is said on the bar, away from which of them. */
.stream-head .views {
	margin-left: auto;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.search {
	display: flex;
	flex: 1 1 14rem;
	align-items: center;
	gap: var(--space);
	margin: 0;
}

.search input {
	flex: 1;
	min-width: 10rem;
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space) calc(var(--space) * 2);
	padding: calc(var(--space) * 0.75) calc(var(--space) * 1.5);
	border-bottom: 1px solid var(--border);
	background: var(--bg-raised);
}

.views {
	display: flex;
	gap: calc(var(--space) * 1.5);
	margin: 0;
}

.views button[aria-pressed="true"] {
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
}

.toolbar input,
.toolbar select,
.toolbar button {
	padding-block: calc(var(--space) / 2);
}

/* What is done to the stream now and then: behind one button. */
.more-actions summary {
	padding: 0 var(--space);
	font-size: 1.4rem;
	line-height: 1;
	list-style: none;
}

.more-actions summary::-webkit-details-marker {
	display: none;
}

.more-actions .menu-body {
	position: absolute;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: calc(var(--space) * 2);
	min-width: 16rem;
	margin-top: var(--space);
	padding: calc(var(--space) * 2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
}

.more-actions form {
	margin: 0;
}

.more-actions fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--space);
	margin: 0;
	padding: 0;
	border: 0;
}

.more-actions legend {
	padding: 0;
	margin-bottom: var(--space);
	font-weight: 600;
}

.choices {
	display: flex;
	gap: calc(var(--space) * 2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.choices a[aria-current="true"] {
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
}

.sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space);
}

.menu {
	position: relative;
}

.menu summary {
	cursor: pointer;
	color: var(--accent);
}

.menu form {
	display: flex;
	flex-direction: column;
	gap: var(--space);
	margin-top: var(--space);
}

/* An entry is a row: the star, then the line that opens it. Opened, it is
   a card with its actions at the foot. */
.entry {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	border-bottom: 1px solid var(--row-border);
	scroll-margin-top: calc(var(--space) * 2);
}

.entry > details {
	grid-column: 2;
	min-width: 0;
}

.entry-star {
	grid-column: 1;
}

.entry-star form {
	margin: 0;
}

button.star {
	padding: var(--row-pad) calc(var(--space) * 0.75);
	border: none;
	background: none;
	color: var(--text-muted);
	font-size: 1.1em;
	line-height: 1.5;
}

button.star[aria-pressed="true"] {
	color: var(--star);
}

.entry > details > summary {
	display: flex;
	align-items: baseline;
	gap: calc(var(--space) * 1.5);
	padding: var(--row-pad) var(--space) var(--row-pad) 1.1rem;
	position: relative;
	cursor: pointer;
	color: var(--text-muted);
	white-space: nowrap;
	list-style: none;
}

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

/* The summary is a row, which takes the marker of the browser away. */
.entry > details > summary::before {
	content: "▸";
	position: absolute;
	left: 0;
	color: var(--text-muted);
}

.entry > details[open] > summary::before {
	content: "▾";
}

.entry.read {
	background: var(--read-bg);
}

.entry-feed {
	flex: 0 0 10rem;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--read);
}

.entry-title {
	flex: 0 1 auto;
	min-width: 4rem;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1em;
	font-weight: 700;
	line-height: inherit;
	color: var(--unread);
}

.entry.read .entry-title {
	font-weight: 400;
	color: var(--read);
}

.entry:not(.read) .entry-feed {
	color: var(--unread);
}

.entry-excerpt {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.entry-excerpt::before {
	content: "– ";
}

.entry > details > summary time {
	flex: none;
	margin-left: auto;
	font-size: 0.9em;
}

/* Open: the row becomes the head of a card. */
.entry > details[open] {
	margin: calc(var(--space) / 2) 0;
	border: 2px solid var(--card-border);
	border-radius: var(--radius);
	background: var(--bg);
}

.entry > details[open] > summary {
	flex-wrap: wrap;
	white-space: normal;
	gap: 0 calc(var(--space) * 2);
	padding: var(--space) calc(var(--space) * 1.5) 0 1.6rem;
	background: none;
}

.entry > details[open] > summary::before {
	left: calc(var(--space) * 1.25);
}

.entry > details[open] .entry-title {
	order: -1;
	flex: 1 1 100%;
	font-size: 1.35em;
	font-weight: 700;
	color: var(--accent);
}

.entry > details[open] .entry-excerpt {
	display: none;
}

/* The text that follows names the feed and the date. */
.entry > details[open] .entry-feed,
.entry > details[open] summary time {
	display: none;
}

.entry-body {
	padding: 0 calc(var(--space) * 1.5);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 calc(var(--space) * 2);
	color: var(--text-muted);
	font-size: 0.9em;
}

.entry-content {
	max-width: var(--reading-width);
	font-size: 1.0625em;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

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

.entry-content pre {
	overflow-x: auto;
}

.attachments {
	padding-left: calc(var(--space) * 2.5);
}

.entry-tags,
.entry-labels {
	color: var(--text-muted);
	font-size: 0.9em;
}

.entry-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(var(--space) / 2) calc(var(--space) * 2.5);
	margin: var(--space) calc(var(--space) * -1.5) 0;
	padding: calc(var(--space) * 0.75) calc(var(--space) * 1.5);
	border-top: 1px solid var(--row-border);
	background: var(--bg-raised);
	font-size: 0.9em;
}

.entry-actions form {
	margin: 0;
}

.entry-actions [data-fold] {
	margin-left: auto;
}

@media (max-width: 48rem) {
	.entry > details > summary {
		flex-wrap: wrap;
		white-space: normal;
		gap: 0 var(--space);
	}

	.entry-title {
		order: -1;
		flex: 1 1 100%;
	}

	.entry-feed {
		flex: 0 1 auto;
	}

	.entry-excerpt {
		display: none;
	}
}

.entry.single {
	display: block;
	max-width: var(--reading-width);
	margin: 0 auto;
	border: 0;
}

.entry.single .entry-actions {
	margin-inline: 0;
	border: 1px solid var(--row-border);
	border-radius: var(--radius);
}

.labels fieldset {
	margin-top: calc(var(--space) * 2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.more {
	margin-top: calc(var(--space) * 3);
}

.sorting select {
	width: auto;
}

.stream,
.search input {
	min-width: 0;
}

.sorting select {
	max-width: 100%;
}

/* The entry keys act on. */
.entry.current {
	box-shadow: inset 3px 0 0 var(--card-border);
}

.entry.current > details > summary {
	background: var(--selected);
}

.entry.current > details[open] > summary {
	background: none;
}

.entries[aria-busy="true"]::after {
	content: "…";
	display: block;
	padding: var(--space) 0;
	color: var(--text-muted);
}

kbd {
	padding: 0 calc(var(--space) * 0.75);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-raised);
	font-family: var(--font-mono);
	font-size: 0.9em;
	white-space: nowrap;
}

.dialog {
	width: min(40rem, calc(100vw - var(--space) * 4));
	max-height: calc(100vh - var(--space) * 8);
	padding: calc(var(--space) * 2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text);
}

.dialog[open] {
	display: flex;
	flex-direction: column;
	gap: var(--space);
}

.dialog::backdrop {
	background: rgb(0 0 0 / 50%);
}

.dialog header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(var(--space) * 2);
}

.dialog h2 {
	margin: 0;
	font-size: 1.1rem;
}

.dialog-body,
.dialog [role="listbox"] {
	min-height: 0;
	overflow-y: auto;
}

.dialog-buttons {
	display: flex;
	align-items: baseline;
	gap: calc(var(--space) * 2);
}

.dialog table,
.keys table {
	width: 100%;
	border-collapse: collapse;
}

.dialog th,
.dialog td,
.keys th,
.keys td {
	padding: calc(var(--space) / 2) var(--space) calc(var(--space) / 2) 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: baseline;
	font-weight: 400;
}

.dialog thead th,
.keys thead th {
	color: var(--text-muted);
	font-size: 0.85rem;
}

.keys input[type="text"] {
	width: 10rem;
	font-family: var(--font-mono);
}

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

.dialog [role="listbox"] {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dialog [role="option"] {
	display: flex;
	align-items: baseline;
	gap: calc(var(--space) * 2);
	padding: calc(var(--space) / 2) var(--space);
	border-radius: var(--radius);
	cursor: pointer;
}

.dialog [role="option"][aria-selected="true"] {
	background: var(--bg-raised);
	box-shadow: inset 3px 0 0 var(--accent);
}

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

/* Pages of settings: forms in groups, lists of what there is to set up. */

.form.settings {
	max-width: 36rem;
}

.form fieldset {
	margin: calc(var(--space) * 3) 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.form legend {
	font-weight: 600;
	padding: 0 var(--space);
}

.form details {
	margin: var(--space) 0;
}

.form summary {
	cursor: pointer;
	color: var(--accent);
}

.form.inline {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--space);
	max-width: none;
	margin: calc(var(--space) * 2) 0;
}

.form.inline input[type="text"] {
	width: 16rem;
}

.hint {
	display: block;
	color: var(--text-muted);
	font-size: 0.875rem;
	margin-top: calc(var(--space) / 2);
}

input[type="file"] {
	font: inherit;
	color: var(--text);
	max-width: 100%;
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--space) * 2);
}

.feed-list {
	list-style: none;
	padding: 0;
}

.feed-list li {
	padding: calc(var(--space) / 2) 0;
}

.feed-address {
	color: var(--text-muted);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.feed-icon {
	vertical-align: baseline;
}

.feed-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space);
	margin-bottom: calc(var(--space) * 2);
}

.menu.danger {
	margin: var(--space) 0;
}

.menu.danger summary {
	color: var(--danger);
}

.menu.danger button {
	align-self: start;
	color: var(--bg);
	background: var(--danger);
	border-color: var(--danger);
}

.preview {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0 calc(var(--space) * 2) var(--space);
	margin-bottom: calc(var(--space) * 2);
	max-width: var(--reading-width);
}

.category h2 {
	margin-bottom: 0;
}

/* Sections of several pages name them in a row above the page. */
/* The pages of a section are tabs on a strip: the current one stands on
   the page. */
.tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--space) / 2);
	list-style: none;
	margin: var(--space) 0 calc(var(--space) * 2);
	padding: var(--space) var(--space) 0;
	border-bottom: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--bg-raised);
}

.tabs a {
	display: block;
	padding: calc(var(--space) / 2) calc(var(--space) * 1.5);
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
	text-decoration: none;
}

.tabs a[aria-current="page"] {
	margin-bottom: -1px;
	border-color: var(--border);
	background: var(--bg);
	color: var(--text);
	font-weight: 700;
}

/* The name of a page stands on a bar, as the name of a stream does. */
.page:not(.wide) > h1 {
	margin: var(--space) 0 calc(var(--space) * 2);
	padding: calc(var(--space) * 0.75) calc(var(--space) * 1.5);
	border-radius: var(--radius);
	background: var(--bar);
	font-size: 1.15rem;
}

.page:not(.wide) h2 {
	margin-top: calc(var(--space) * 4);
	padding-bottom: calc(var(--space) / 2);
	border-bottom: 1px solid var(--row-border);
	font-size: 1.05rem;
}

table.data {
	border-collapse: collapse;
	width: 100%;
	margin: calc(var(--space) * 2) 0;
}

table.data th,
table.data td {
	text-align: left;
	vertical-align: top;
	padding: calc(var(--space) * 0.6) var(--space);
	border-bottom: 1px solid var(--row-border);
}

table.data thead th {
	background: var(--bg-raised);
	border-bottom-color: var(--border);
}

table.log td:last-child {
	overflow-wrap: anywhere;
	font-family: var(--font-mono);
	font-size: 0.875rem;
}

/* How wide the text of an entry may get is the reader's choice. */
:root[data-width="medium"] {
	--reading-width: 56rem;
}

:root[data-width="large"] {
	--reading-width: 72rem;
}

:root[data-width="no_limit"] {
	--reading-width: none;
}

/* The ways to pass an entry on. */
.menu.share ul {
	list-style: none;
	padding: 0;
	margin: var(--space) 0 0;
}

.menu.share li {
	padding: calc(var(--space) / 4) 0;
}

/* Numbers as bars; the table under each picture has the same numbers. */
.chart {
	margin: calc(var(--space) * 2) 0;
	overflow-x: auto;
}

.chart figcaption {
	font-weight: 600;
	margin-bottom: var(--space);
}

.chart svg {
	display: block;
	border-bottom: 1px solid var(--border);
}

.chart .bar {
	fill: var(--accent);
}

/* The modern look: the classic one with more air and fewer lines. */
:root[data-look="modern"] .stream-head,
:root[data-look="modern"] .page:not(.wide) > h1 {
	padding-inline: 0;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background: none;
	font-weight: 400;
}

:root[data-look="modern"] .stream h1,
:root[data-look="modern"] .page:not(.wide) > h1 {
	font-size: 1.4rem;
	font-weight: 400;
}

:root[data-look="modern"] .toolbar {
	padding-inline: 0;
	background: none;
}

:root[data-look="modern"] .entry > details[open] {
	margin: var(--space) 0;
	border-width: 1px;
}

:root[data-look="modern"] .entry > details[open] .entry-title {
	color: var(--text);
	font-weight: 400;
	font-size: 1.5em;
}

:root[data-look="modern"] .entry-actions {
	background: none;
}

:root[data-look="modern"] .tabs ul {
	padding-inline: 0;
	background: none;
}

:root[data-look="modern"] .tabs a[aria-current="page"] {
	border-color: transparent;
	border-bottom: 2px solid var(--button-bg);
	margin-bottom: -1px;
}

:root[data-look="modern"] .tree a[aria-current="page"] {
	background: none;
	color: var(--danger);
}

:root[data-look="modern"] .site-header {
	padding-block: var(--space);
}

/* One red button a row is enough: the others are plain. */
:root[data-look="modern"] .toolbar button:not(.link),
:root[data-look="modern"] .more-actions button {
	color: var(--text);
	background: var(--bg-raised);
	border-color: var(--border);
}