/*
 * Soliloquy stylesheet.
 *
 * The design uses a `.sq` root element with a theme class: `.auto` follows
 * prefers-color-scheme, while `.light` and `.dark` force a palette. The layout
 * puts these classes on <html>.
 */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--font-sans: "IBM Plex Sans", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

.sq {
	--bg: #f5f4ef;
	--panel: #ecebe4;
	--card: #fbfaf6;
	--ink: #1c1b18;
	--muted: #625e55;
	--line: #d6d3c8;
	--line2: #e4e1d8;
	--accent: #a34b00;
	--on-accent: #fffaf2;
	--soft: #f6e4cc;
	--live: #25702d;
	--danger: #b3261e;
	--mark: #f5d79e;

	box-sizing: border-box;
	min-height: 100vh;
	color-scheme: light;
	background: var(--bg);
	color: var(--ink);
	font: 14px/1.45 var(--font-sans);
}

.sq.dark {
	--bg: #0f110e;
	--panel: #171a15;
	--card: #13160f;
	--ink: #e6e3d6;
	--muted: #a09c8f;
	--line: #30342b;
	--line2: #22261f;
	--accent: #ffb23e;
	--on-accent: #1b1305;
	--soft: #33260f;
	--live: #6fd178;
	--danger: #ff8a80;
	--mark: #5a3f0e;

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	.sq.auto {
		--bg: #0f110e;
		--panel: #171a15;
		--card: #13160f;
		--ink: #e6e3d6;
		--muted: #a09c8f;
		--line: #30342b;
		--line2: #22261f;
		--accent: #ffb23e;
		--on-accent: #1b1305;
		--soft: #33260f;
		--live: #6fd178;
		--danger: #ff8a80;
		--mark: #5a3f0e;

		color-scheme: dark;
	}
}

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

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	min-height: 100vh;
}

::selection {
	background: var(--accent);
	color: var(--on-accent);
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--accent);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

h1,
h2,
h3 {
	font-family: var(--font-mono);
	font-weight: 600;
}

h1 {
	margin: 0 0 12px;
	font-size: 18px;
}

h2 {
	margin: 22px 0 8px;
	font-size: 15px;
}

h3 {
	margin: 18px 0 6px;
	font-size: 14px;
}

p {
	margin: 0 0 10px;
}

.mono {
	font-family: var(--font-mono);
}

/* Forms ------------------------------------------------------------- */

form {
	margin: 0;
}

label {
	font: 500 12px var(--font-mono);
	color: var(--ink);
}

form > label {
	display: block;
	margin-bottom: 12px;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"],
textarea,
select {
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	color: var(--ink);
	font: 14px/1.45 var(--font-sans);
	padding: 0 10px;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"],
select {
	height: 36px;
}

textarea {
	display: block;
	width: 100%;
	min-height: 84px;
	padding: 9px 11px;
	resize: vertical;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"],
textarea,
select {
	width: 100%;
	max-width: 32rem;
}

form > label > input,
form > label > textarea {
	display: block;
	margin-top: 5px;
}

input::placeholder,
textarea::placeholder {
	color: var(--muted);
}

input:focus,
textarea:focus,
select:focus {
	outline: 0;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

button,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	color: var(--ink);
	font: 500 13px var(--font-mono);
	cursor: pointer;
	white-space: nowrap;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	border-color: var(--accent);
	color: var(--accent);
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

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

.hint {
	font: 12px var(--font-mono);
	color: var(--muted);
}

/* Layout and header ------------------------------------------------- */

.wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}

main.wrap {
	padding-top: 18px;
}

.top {
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}

.top .wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 52px;
	flex-wrap: wrap;
}

.logo {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ink);
	font: 600 16px var(--font-mono);
}

.logo .p {
	color: var(--accent);
}

.cur {
	display: inline-block;
	width: 8px;
	height: 15px;
	background: var(--accent);
	animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

.nav {
	display: flex;
	gap: 16px;
	color: var(--muted);
	font: 13px var(--font-mono);
}

.nav a.on {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.sp {
	flex: 1;
}

.search {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 210px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	color: var(--muted);
}

.search input {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	outline: 0;
	box-shadow: none;
	color: var(--ink);
	font: 13px var(--font-mono);
}

.search input::placeholder {
	color: var(--muted);
}

.search:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

.search-link {
	display: none;
}

.ib.search-link {
	display: none;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	color: var(--ink);
	font: 500 13px var(--font-mono);
	cursor: pointer;
	white-space: nowrap;
}

.btn.pri,
a.btn.pri {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.btn.pri:hover,
a.btn.pri:hover {
	color: var(--on-accent);
}

.btn.ghost {
	border-color: transparent;
	background: none;
	color: var(--muted);
}

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

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-icon {
	display: none;
}

.ib {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--ink);
}

.ib.on {
	background: var(--soft);
	color: var(--accent);
}

.badge {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--accent);
	color: var(--on-accent);
	font: 600 10px/16px var(--font-mono);
	text-align: center;
}

.me {
	color: var(--muted);
	font: 13px var(--font-mono);
}

.sub {
	display: none;
}

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

.pt {
	margin: 0;
	font: 600 18px var(--font-mono);
}

.pt .p {
	color: var(--accent);
}

.label {
	color: var(--muted);
	font: 500 11px var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Lists ------------------------------------------------------------- */

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

.row {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	gap: 0 10px;
	align-items: start;
	padding: 8px 0;
	border-bottom: 1px solid var(--line2);
}

/* The last row of a list never has a bottom border. Whatever follows the list
   (pagination, "load older", the footer) draws its own top border, so there
   is never a double line. */
.row:last-child,
.n:last-child,
.r:last-child {
	border-bottom: 0;
}

.cozy .row {
	padding: 13px 0;
}

.vc {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: none;
	color: var(--muted);
	cursor: pointer;
	flex: none;
}

.vote.on {
	color: var(--accent);
}

.vote:hover {
	background: var(--soft);
	color: var(--accent);
}

.vote.none {
	visibility: hidden;
}

.sc {
	color: var(--muted);
	font: 500 12px var(--font-mono);
}

.sc.on {
	color: var(--accent);
}

.tt {
	color: var(--ink);
	font: 500 15px/1.35 var(--font-sans);
}

.dom {
	margin-left: 6px;
	color: var(--muted);
	font: 12px var(--font-mono);
	white-space: nowrap;
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin-top: 2px;
	color: var(--muted);
	font: 12px/1.5 var(--font-mono);
}

.meta b {
	color: var(--ink);
	font-weight: 500;
}

.act {
	padding-top: 3px;
	color: var(--muted);
	font: 12px var(--font-mono);
	text-align: right;
	white-space: nowrap;
}

/* Rendered Markdown ------------------------------------------------- */

.md {
	font-size: 14.5px;
	line-height: 1.55;
}

.md p {
	margin: 0 0 8px;
}

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

.md code {
	padding: 1px 4px;
	border: 1px solid var(--line2);
	border-radius: 3px;
	background: var(--panel);
	font: 12.5px var(--font-mono);
}

.md pre {
	margin: 4px 0 8px;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--panel);
	font: 12.5px/1.5 var(--font-mono);
	overflow-x: auto;
	white-space: pre;
}

.md pre code {
	padding: 0;
	border: 0;
	background: none;
}

.md a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.md blockquote {
	margin: 0 0 8px;
	padding-left: 10px;
	border-left: 2px solid var(--line);
	color: var(--muted);
}

.ment,
.mention {
	padding: 0 3px;
	border-radius: 3px;
	background: var(--soft);
	color: var(--accent);
	font: 500 0.9em var(--font-mono);
}

/* Cards and editor -------------------------------------------------- */

.card {
	width: 100%;
	max-width: 420px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
}

.panel {
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.field label {
	color: var(--ink);
	font: 500 12px var(--font-mono);
}

.field label span {
	color: var(--muted);
	font-weight: 400;
}

.inp {
	width: 100%;
	height: 38px;
	padding: 0 11px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	color: var(--ink);
	font: 14.5px var(--font-sans);
}

.inp::placeholder {
	color: var(--muted);
}

.inp:focus,
.editor:focus-within {
	outline: 0;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

.editor {
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	overflow: hidden;
}

.editor:focus-within {
	border-color: var(--accent);
}

.editor textarea {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 84px;
	padding: 9px 11px;
	border: 0;
	border-radius: 0;
	background: none;
	outline: 0;
	color: var(--ink);
	font: 13px/1.5 var(--font-mono);
	resize: vertical;
}

.editor textarea:focus {
	box-shadow: none;
}

.editor textarea::placeholder {
	color: var(--muted);
}

.edbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 11px;
	border-top: 1px solid var(--line2);
	background: var(--panel);
	color: var(--muted);
	font: 11.5px var(--font-mono);
}

/* The submit button comes before cancel in the HTML so that Tab reaches it
   first, but the design shows it last. */
.edbar .btn.pri {
	order: 1;
}

.notice {
	padding: 12px 14px;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: var(--soft);
	color: var(--ink);
	overflow-wrap: anywhere;
}

.notice code {
	padding: 5px 8px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--card);
	font: 12.5px var(--font-mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.err {
	display: flex;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--danger);
	border-radius: 4px;
	color: var(--danger);
	font: 12.5px/1.5 var(--font-mono);
}

/* Shared small components ------------------------------------------- */

.tag {
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--accent);
	color: var(--on-accent);
	font: 600 10px/14px var(--font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.flag {
	padding: 0 4px;
	border: 1px solid currentColor;
	border-radius: 3px;
	color: var(--muted);
	font: 500 10.5px/15px var(--font-mono);
}

.flag.a {
	color: var(--accent);
}

.flag.you {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.gone {
	color: var(--muted);
	font-style: italic;
}

.off {
	color: var(--muted);
	text-decoration: line-through;
	text-decoration-color: var(--muted);
}

.ok {
	color: var(--live);
}

.st-ok {
	color: var(--live);
}

.st-off {
	color: var(--danger);
}

.live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--live);
	font: 12px var(--font-mono);
}

.live i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	50% {
		opacity: 0.35;
	}
}

.dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

/* Footer ------------------------------------------------------------ */

.foot {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
	padding: 14px 0 28px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font: 12px var(--font-mono);
}

/* Logged-out layout ------------------------------------------------- */

.bare {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 56px 16px;
}

.bare-inner {
	width: 100%;
	max-width: 420px;
}

.bare .logo {
	margin-bottom: 16px;
	font: 600 22px var(--font-mono);
	gap: 8px;
}

.bare .cur {
	width: 11px;
	height: 21px;
}

/* Legacy page styles ------------------------------------------------ */

/* Front page -------------------------------------------------------- */

.pagehead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.front-page .thread-cell {
	min-width: 0;
}

.pagination {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0 0;
	border-top: 1px solid var(--line2);
}

/* Thread page ------------------------------------------------------- */

.back {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--muted);
	font: 12px var(--font-mono);
}

.thread {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.vote-form {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.thread-vote {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 4px;
}

.thread-vote .score {
	color: var(--muted);
	font: 500 12px var(--font-mono);
}

.thread-vote .score.on {
	color: var(--accent);
}

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

.thread-title {
	margin: 0;
	font: 600 21px/1.3 var(--font-sans);
	letter-spacing: -0.01em;
}

.thread-title .dom {
	font-weight: 400;
}

.thread-title .dom::before {
	content: "(";
}

.thread-title .dom::after {
	content: ")";
}

.thread .meta {
	margin-top: 4px;
}

.thread-body {
	margin-top: 12px;
	max-width: 72ch;
}

.meta .inline-form button {
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.meta .inline-form button:hover {
	color: var(--accent);
}

.comment-form {
	margin: 18px 0 0 32px;
}

.comments-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0 2px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

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

.c {
	padding-top: 10px;
	scroll-margin-top: 16px;
}

.ch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 22px;
	border-radius: 3px;
	color: var(--muted);
	font: 12px var(--font-mono);
}

.ch .u {
	color: var(--ink);
	font-weight: 600;
}

.c:target > .ch {
	background: var(--soft);
	box-shadow: 0 0 0 4px var(--soft);
}

.par {
	color: var(--muted);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 3px;
}

.par:hover {
	text-decoration-color: var(--accent);
}

.op {
	padding: 0 4px;
	border: 1px solid currentColor;
	border-radius: 3px;
	color: var(--accent);
	font: 600 10px/14px var(--font-mono);
}

.tog {
	margin-left: -2px;
	padding: 2px 4px;
	border: 0;
	border-radius: 3px;
	background: none;
	color: var(--ink);
	font: 600 12px var(--font-mono);
	cursor: pointer;
}

.tog:hover {
	background: var(--soft);
	color: var(--accent);
}

.cb {
	margin: 2px 0 0 32px;
}

.ca {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0 0 32px;
	color: var(--muted);
	font: 12px var(--font-mono);
}

.ca a,
.ca button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ca a:hover,
.ca button:hover {
	color: var(--accent);
}

.kids {
	margin: 0 0 0 11px;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--line);
	list-style: none;
}

.kids:empty {
	display: none;
}

.c.collapsed > .cb,
.c.collapsed > .ca,
.c.collapsed > .kids,
.c.collapsed > .reply-form {
	display: none;
}

.new {
	margin: 6px 0 0 -8px;
	padding: 8px;
	border-radius: 4px;
	background: var(--soft);
}

.reply-form {
	margin: 8px 0 4px 32px;
}

.comment-form-page .editor textarea {
	min-height: 180px;
}

/* Thread form ------------------------------------------------------- */

.thread-form-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
}

.thread-form {
	display: flex;
	flex: 999 1 520px;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.thread-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.thread-form .inp {
	max-width: none;
}

.thread-form .hint {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.thread-form .editor textarea {
	min-height: 240px;
}

.thread-form-actions .btn {
	height: 36px;
	padding: 0 16px;
}

.mention-note {
	color: var(--muted);
	font: 12px var(--font-mono);
}

.thread-help {
	flex: 1 1 220px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

.thread-help .label {
	margin-bottom: 8px;
}

.thread-help .cheat + .label {
	margin-top: 14px;
}

.thread-help p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.cheat {
	margin: 0;
	color: var(--muted);
	font: 12px/1.9 var(--font-mono);
	white-space: pre;
}

.cheat b {
	color: var(--ink);
	font-weight: 500;
}

.tabs {
	display: flex;
	border-bottom: 1px solid var(--line2);
	background: var(--panel);
	font: 12px var(--font-mono);
}

.tabs button {
	padding: 8px 12px;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	cursor: pointer;
}

.tabs button.on {
	background: var(--card);
	color: var(--ink);
	box-shadow: inset 0 2px 0 var(--accent);
}

.preview {
	min-height: 240px;
	padding: 10px 12px;
}

.preview > :first-child {
	margin-top: 0;
}

/* Auth pages -------------------------------------------------------- */

.auth-page {
	width: 100%;
	margin: 0 auto;
}

.auth-login {
	max-width: 380px;
}

.auth-join,
.auth-reset {
	max-width: 420px;
}

.bare-inner:has(.auth-login) {
	max-width: 380px;
}

.bare-inner:has(.auth-login) > .logo {
	margin-bottom: 6px;
}

.auth-card {
	max-width: 100%;
	padding: 22px;
}

.auth-login .auth-card {
	padding: 22px 22px 18px;
}

.auth-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.auth-card .field label {
	font: 500 12px var(--font-mono);
}

.auth-card .inp {
	height: 40px;
	padding: 0 11px;
	background: var(--bg);
	font: 14px var(--font-mono);
}

.auth-card .btn {
	justify-content: center;
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
	font: 500 14px var(--font-mono);
}

.auth-card .btn:disabled {
	background: none;
	border-color: var(--line);
	color: var(--muted);
	opacity: 1;
	cursor: not-allowed;
}

.auth-note {
	margin: 14px 0 0;
	color: var(--muted);
	font: 12px/1.6 var(--font-mono);
}

.auth-fields .auth-note {
	margin: 0;
}

.auth-heading {
	color: var(--ink);
	font: 600 14px var(--font-mono);
}

.getty {
	margin: 0 0 18px;
	color: var(--muted);
	font: 12.5px/1.7 var(--font-mono);
	white-space: pre;
}

.auth-page .tree {
	margin: 6px 0 0;
	color: var(--muted);
	font: 12.5px/1.6 var(--font-mono);
	white-space: pre;
}

.auth-page .tree b {
	color: var(--accent);
	font-weight: 600;
}

.inv {
	padding: 10px 12px;
	border: 1px dashed var(--accent);
	border-radius: 6px;
	background: var(--soft);
	font: 12.5px/1.6 var(--font-mono);
}

.checks {
	margin: 2px 0 0;
	padding: 0;
	color: var(--muted);
	font: 12px/1.7 var(--font-mono);
	list-style: none;
}

.checks .ok {
	color: var(--live);
}

.checks .bad {
	color: var(--danger);
}

/* Account ----------------------------------------------------------- */

/* The whoami box sits inside the profile card, which supplies the border and
   background. */
.term {
	margin: 0;
	padding: 14px 18px;
	font: 13px/1.7 var(--font-mono);
}

.term .ps {
	color: var(--accent);
}

.kv {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 2px 16px;
	margin-top: 6px;
}

.kv dt {
	color: var(--muted);
}

.kv dd {
	margin: 0;
}

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

.accent {
	color: var(--accent);
}

.underline {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.account-section {
	margin-top: 18px;
}

/* Account, admin settings and API panels share one spacing rule. The panel
   is a flex column, so every direct child is a block-level flex item and its
   margins behave the same way. Spacing comes from adjacent-sibling margins,
   not from a flex gap, because a hint takes 8px instead of 12px. */
.panel.account-section {
	display: flex;
	flex-direction: column;
}

.panel.account-section > * {
	margin-top: 0;
	margin-bottom: 0;
}

.panel.account-section > * + * {
	margin-top: 12px;
}

.panel.account-section > * + .hint {
	margin-top: 8px;
}

/* The heading keeps its 10px gap whatever follows it, even a hint. */
.panel.account-section > .label + * {
	margin-top: 10px;
}

/* Buttons and labels stay shrink-wrapped instead of stretching across the
   panel as flex items. */
.panel.account-section > .btn,
.panel.account-section > label {
	align-self: flex-start;
}

/* The first panel on the admin settings and API pages starts at the pagehead,
   whose own margin sets the 10px gap. */
.pagehead + .panel.account-section {
	margin-top: 0;
}

.feed-links dd {
	overflow-wrap: anywhere;
}

/* API documentation ------------------------------------------------- */

/* The field names are longest here, so the shared kv column is a little wider
   than on the account page. */
.api-page .kv {
	grid-template-columns: 140px minmax(0, 1fr);
}

.api-example {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--panel);
	font: 12.5px/1.5 var(--font-mono);
	overflow-x: auto;
}

.account-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Fields use the full width of their panel, so a long value such as a URL is
   not cut off. The flex-start alignment above would shrink a field to its
   content, and text inputs have a general 32rem cap. */
.account-form > .field {
	align-self: stretch;
}

.account-form .inp,
.account-form textarea {
	max-width: none;
}

/* Panels inside the form (admin settings) take the full width; the
   flex-start alignment above would shrink each one to its content. Their
   own margin is off, because the form gap spaces the panels. */
.account-form > .panel {
	align-self: stretch;
	margin-top: 0;
}

/* Admin settings stacks panels 18px apart and puts the action row 18px
   below the last panel. */
.account-form.admin-settings-form {
	gap: 18px;
}

.account-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* A row of checkboxes or radio buttons. */
.checkbox-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Reset the stacked-form spacing from "form > label" and its input. */
.checkbox-row label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font: 12px var(--font-mono);
}

.checkbox-row input {
	margin: 0;
}

/* Account page layout. These class names come from the design; some of them
   already mean something else in the app (.card on the auth pages, .sub in
   the mobile nav, .checks for the password rules, .row in the thread list),
   so every rule is scoped to the account page. */

.account-page .layout {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.account-page .toc {
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font: 13px var(--font-mono);
}

.account-page .toc a {
	display: flex;
	align-items: center;
	min-height: 34px;
	padding: 0 10px;
	border-radius: 4px;
	color: var(--muted);
}

.account-page .toc a[aria-current] {
	background: var(--panel);
	color: var(--ink);
	box-shadow: inset 2px 0 0 var(--accent);
}

.account-page .toc a.red {
	color: var(--danger);
}

.account-page .stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* A design card: one border and background around a header and a body. */
.account-page .card {
	width: auto;
	max-width: none;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

.account-page .card-h {
	padding: 14px 18px 12px;
	border-bottom: 1px solid var(--line2);
}

.account-page .card-h h2 {
	margin: 0;
	font: 600 14px var(--font-mono);
}

.account-page .card-h p {
	margin: 3px 0 0;
	color: var(--muted);
	font-size: 13px;
}

.account-page .card-b {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 18px;
}

.account-page .card-b > form,
.account-page .sub > form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The form's controls stretch to the card width; a lone button does not. */
.account-page .card-b > form > .btn,
.account-page .sub > form > .btn {
	align-self: flex-start;
}

.account-page .sub {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	/* The mobile nav's .sub rule gives the element a fixed height and a
	   mono font; neither belongs to a design card section. */
	height: auto;
	align-items: stretch;
	border-bottom: 0;
	color: var(--ink);
	font: inherit;
}

.account-page .sub > form {
	gap: 12px;
}

.account-page .sub + .sub {
	border-top: 1px solid var(--line2);
}

.account-page .sub-h {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.account-page .sub-h h3 {
	margin: 0;
	font: 600 13px var(--font-mono);
}

.account-page .where {
	color: var(--muted);
	font: 12px var(--font-mono);
}

.account-page .help {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

.account-page .row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 0;
	border-bottom: 0;
}

/* Form controls follow the design's sizing: a mono 36px input, 340px wide
   unless it holds a URL or another long value. */
.account-page .inp {
	height: 36px;
	max-width: 340px;
	background: var(--bg);
	font: 13px var(--font-mono);
}

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

.account-page .inp[readonly] {
	background: var(--panel);
	color: var(--ink);
}

/* A radio group that looks like a segmented control. The radios are invisible
   but still focusable and still submit the same values. */
.account-page .seg {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
}

.account-page .seg label {
	position: relative;
	display: flex;
}

.account-page .seg input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.account-page .seg span {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	background: var(--bg);
	color: var(--muted);
	font: 500 13px var(--font-mono);
}

.account-page .seg label + label span {
	border-left: 1px solid var(--line);
}

.account-page .seg input:checked + span {
	background: var(--accent);
	color: var(--on-accent);
}

.account-page .seg input:focus-visible + span {
	outline: 2px solid var(--accent);
	outline-offset: -4px;
}

.account-page .pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 8px;
	border-radius: 11px;
	background: var(--panel);
	color: var(--muted);
	font: 500 11.5px var(--font-mono);
}

.account-page .pill.on {
	color: var(--live);
}

.account-page .pill.on::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--live);
}

.account-page .checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ink);
}

.account-page .checks legend {
	margin-bottom: 6px;
	padding: 0;
	font: 500 12px var(--font-mono);
}

.account-page .checks label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	font: 13px var(--font-mono);
}

.account-page .checks input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--accent);
}

.account-page .feeds {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	gap: 8px 10px;
	align-items: center;
}

.account-page .feeds > span {
	color: var(--muted);
	font: 12px var(--font-mono);
}

.account-page .feeds-actions {
	padding-top: 14px;
	border-top: 1px solid var(--line2);
}

/* The reset form is a row like the design's, not the stacked form the other
   cards use, so the explanation sits next to the button. */
.account-page .card-b > .feeds-actions {
	flex-direction: row;
	gap: 10px;
}

.account-page .delete-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

@media (max-width: 760px) {
	.account-page .layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.account-page .toc {
		position: static;
		flex-direction: row;
		gap: 4px;
		padding-bottom: 4px;
		overflow-x: auto;
	}

	.account-page .toc a {
		white-space: nowrap;
	}

	.account-page .toc a[aria-current] {
		box-shadow: inset 0 -2px 0 var(--accent);
	}

	.account-page .feeds {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.account-page .feeds > span {
		grid-column: 1 / -1;
		margin-top: 4px;
	}
}

.dz {
	border: 1px solid var(--danger);
	border-radius: 6px;
	background: var(--card);
}

.dz h2 {
	color: var(--danger);
}

.dz ul {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 13.5px;
	line-height: 1.6;
}

/* Invites ----------------------------------------------------------- */

.invites-page .panel {
	margin-top: 22px;
}

.invites-page .panel > .label {
	margin: 0;
}

.invites-tree {
	margin-top: 26px;
}

.invites-intro {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 13.5px;
}

.invites-page .tree {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	list-style: none;
	font: 13px/1 var(--font-mono);
}

.tr {
	display: flex;
	align-items: center;
	height: 27px;
	white-space: pre;
}

.tr .pre {
	color: var(--muted);
}

.tr .nm {
	color: var(--ink);
	font-weight: 500;
}

.tr .flag {
	margin-left: 8px;
}

.tr .lead {
	flex: 1;
	align-self: center;
	height: 1px;
	min-width: 16px;
	margin: 0 10px;
	border-bottom: 1px dotted var(--line);
}

.tr .dt {
	color: var(--muted);
}

.tree-summary {
	margin: 10px 0 0;
	color: var(--muted);
	font: 12px var(--font-mono);
}

.panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.panel-head .label {
	margin: 0;
	white-space: nowrap;
}

.linkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 4px 4px 4px 10px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	background: var(--soft);
	font: 12.5px var(--font-mono);
	min-width: 0;
}

.linkbox code {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.linkbox .btn {
	height: 28px;
}

.invites-page .panel .hint {
	margin: 8px 0 0;
}

.il {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font: 12px/1.5 var(--font-mono);
}

.il li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 0;
	border-top: 1px solid var(--line2);
}

.il .k {
	color: var(--ink);
}

.il .s {
	color: var(--muted);
	text-align: right;
}

/* Admin users ------------------------------------------------------- */

.admin-tools {
	margin: 20px 0 8px;
}

.admin-filter {
	width: 260px;
}

.tbox {
	overflow-x: auto;
	border-top: 1px solid var(--line);
}

.tbox table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font: 13px var(--font-mono);
}

.tbox th {
	padding: 9px 10px 7px 0;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font: 500 11px var(--font-mono);
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.tbox td {
	padding: 6px 10px 6px 0;
	border-bottom: 1px solid var(--line2);
	vertical-align: middle;
	white-space: nowrap;
}

.tbox td.u {
	font-weight: 600;
}

.tbox td.m {
	color: var(--muted);
}

.tbox .actions-head {
	padding-right: 0;
	text-align: right;
}

.tbox tr.off td {
	color: var(--muted);
}

.tbox tr.off .u {
	text-decoration: line-through;
}

.tbox tr.highlight {
	background: var(--soft);
}

.acts {
	display: flex;
	justify-content: flex-end;
	gap: 4px;
}

.x {
	padding: 3px 7px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: none;
	color: var(--muted);
	font: 12px var(--font-mono);
	cursor: pointer;
}

.x:hover {
	border-color: var(--line);
	color: var(--ink);
}

.x.d {
	color: var(--danger);
}

.x:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.admin-page .notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.admin-page .notice code {
	flex: 1;
	min-width: 240px;
}

.notice-title {
	font: 500 13px var(--font-mono);
}

.notice-note {
	width: 100%;
	color: var(--muted);
	font: 12px var(--font-mono);
}

.admin-note {
	margin: 12px 0 0;
	color: var(--muted);
	font: 12px/1.6 var(--font-mono);
}

/* Notifications ----------------------------------------------------- */

.section-label {
	margin: 0 0 6px;
}

.earlier-label {
	margin-top: 22px;
}

.nl {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.n {
	display: grid;
	grid-template-columns: 14px 72px minmax(0, 1fr) auto;
	gap: 0 10px;
	align-items: baseline;
	padding: 9px 6px;
	border-bottom: 1px solid var(--line2);
}

.n.un {
	background: var(--card);
}

.n .dot-empty {
	visibility: hidden;
}

.n .kind {
	color: var(--muted);
	font: 500 11px var(--font-mono);
	text-transform: lowercase;
}

.kind-inline {
	display: none;
}

.n .n-body {
	min-width: 0;
}

.n .what {
	font-size: 14px;
}

.n.un .what {
	font-weight: 500;
}

.n .u {
	font: 600 13px var(--font-mono);
}

.n .snip {
	margin-top: 2px;
	color: var(--muted);
	font: 12.5px/1.5 var(--font-mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.n time {
	color: var(--muted);
	font: 12px var(--font-mono);
	white-space: nowrap;
}

.load-more {
	display: flex;
	justify-content: center;
	padding-top: 14px;
	border-top: 1px solid var(--line2);
}

.dock {
	display: none;
}

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

.bigsearch {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 6px 0 14px;
	border: 1px solid var(--accent);
	border-radius: 5px;
	background: var(--card);
	box-shadow: 0 0 0 1px var(--accent);
}

.bigsearch .ps {
	color: var(--accent);
	font: 600 15px var(--font-mono);
}

.bigsearch input {
	flex: 1;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	outline: 0;
	box-shadow: none;
	color: var(--ink);
	font: 15px var(--font-mono);
}

.bigsearch input:focus {
	border: 0;
	box-shadow: none;
}

.bigsearch .btn {
	height: 34px;
}

.search-summary {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 8px;
}

.rl {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.r {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	gap: 0 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line2);
}

.ty {
	color: var(--muted);
	font: 500 11px/20px var(--font-mono);
}

.ty.t {
	color: var(--accent);
}

.search-result-body {
	min-width: 0;
}

.r .tt {
	color: var(--ink);
	font: 500 15px/1.35 var(--font-sans);
}

.r .ctx {
	color: var(--muted);
	font: 12px var(--font-mono);
}

.r .ctx a {
	color: var(--ink);
}

.r .snip {
	margin-top: 3px;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
}

.search-page mark {
	padding: 0 2px;
	border-radius: 2px;
	background: var(--mark);
	color: inherit;
	font-family: var(--font-mono);
	font-size: 0.92em;
}

.notification-list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.notification {
	padding: 9px 6px;
	border-bottom: 1px solid var(--line2);
}

.notification-unread {
	background: var(--card);
	font-weight: 500;
}

.notification-meta {
	display: block;
	color: var(--muted);
	font: 12px var(--font-mono);
	font-weight: 400;
}

.notification-link {
	font-size: 14px;
}

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

.invite-list li {
	padding: 7px 0;
	border-top: 1px solid var(--line2);
}

.invite-list .hint {
	display: block;
}

.invite-tree,
.invite-children {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	list-style: none;
}

.invite-children {
	margin-left: 8px;
	padding: 0 0 0 14px;
	border-top: 0;
	border-bottom: 0;
	border-left: 1px solid var(--line);
}

.invite-node {
	margin: 4px 0;
}

.invite-name {
	color: var(--ink);
	font-weight: 500;
}

.invite-admin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.invite-admin button {
	height: 26px;
	padding: 0 8px;
	font-size: 12px;
}

.no-comments {
	color: var(--muted);
}

/* Mobile ------------------------------------------------------------ */

@media (max-width: 640px) {
	main.wrap {
		padding-left: 16px;
		padding-right: 16px;
	}

	.front-page .pagehead {
		display: none;
	}

	.front-page .list {
		margin: 0 -16px;
	}

	.front-page .row {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: 0 6px;
		padding: 9px 14px 9px 4px;
	}

	.front-page .sc {
		margin-top: -4px;
	}

	.front-page .tt {
		font-size: 15.5px;
	}

	.notifications-page .section-label {
		margin: 0 -16px;
		padding: 12px 16px 6px;
	}

	.notifications-page .nl {
		margin-left: -16px;
		margin-right: -16px;
	}

	/* These draw the line under a full-bleed list, so they are full-bleed too. */
	.front-page .pagination,
	.notifications-page .load-more {
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.invites-page .tree {
		font-size: 12px;
	}

	.tr .flag {
		margin-left: 6px;
	}

	.n {
		display: block;
		position: relative;
		padding: 11px 16px 11px 28px;
	}

	.n .dot {
		position: absolute;
		top: 18px;
		left: 12px;
	}

	.n .kind {
		display: none;
	}

	.n .what {
		display: block;
	}

	.n .who {
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
		gap: 8px;
		padding-right: 42px;
	}

	.n .u,
	.n .gone {
		font-size: 13px;
		font-weight: 600;
	}

	.n .kind-inline {
		display: inline;
		color: var(--muted);
		font: 500 11px var(--font-mono);
		text-transform: lowercase;
	}

	.n .action {
		display: block;
		margin-top: 2px;
	}

	.n time {
		position: absolute;
		top: 11px;
		right: 16px;
	}

	.n .snip {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.thread {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0 10px;
		margin: 14px -16px 0;
		padding: 14px 16px 12px;
		border-bottom: 1px solid var(--line);
	}

	.thread-main {
		display: contents;
	}

	.thread-title {
		grid-column: 1 / -1;
		grid-row: 1;
		font-size: 19px;
	}

	.thread-title .dom {
		display: block;
		margin: 4px 0 0;
		font: 12px var(--font-mono);
	}

	.thread-title .dom::before {
		content: "";
	}

	.thread-title .dom::after {
		content: " ↗";
	}

	.thread-body {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 10px;
	}

	.thread-vote {
		grid-column: 1;
		grid-row: 3;
		flex-direction: row;
		align-self: center;
		gap: 6px;
		height: 32px;
		margin-top: 10px;
		padding: 0 10px;
		border: 1px solid var(--line);
		border-radius: 4px;
	}

	.thread-vote .vote {
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.thread .meta {
		grid-column: 2;
		grid-row: 3;
		align-self: center;
		margin-top: 10px;
	}

	.comment-form {
		margin: 14px 0 0;
	}

	.comments-head {
		margin-top: 16px;
	}

	.c {
		padding-top: 8px;
		scroll-margin-top: 12px;
	}

	.ch {
		gap: 6px;
		min-height: 32px;
	}

	.cb,
	.ca,
	.reply-form {
		margin-left: 26px;
	}

	.ca {
		gap: 4px;
	}

	.ca a,
	.ca button {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
		padding-right: 8px;
	}

	.kids {
		margin-left: 8px;
		padding-left: 10px;
	}

	.vote {
		width: 32px;
		height: 28px;
	}

	.dock {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		background: var(--panel);
	}

	.dock .fake {
		display: flex;
		flex: 1;
		align-items: center;
		height: 42px;
		padding: 0 12px;
		border: 1px solid var(--line);
		border-radius: 6px;
		background: var(--card);
		color: var(--muted);
		font: 13px var(--font-mono);
	}

	.thread-page {
		padding-bottom: 72px;
	}

	.thread-form-layout {
		gap: 18px;
	}

	.thread-form,
	.thread-help {
		flex-basis: 100%;
	}

	.search-summary {
		margin-top: 14px;
	}

	.r {
		grid-template-columns: minmax(0, 1fr);
	}

	.ty {
		display: block;
		margin-bottom: 2px;
	}

	.thread-page + .foot {
		padding-bottom: 96px;
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		padding: 0 6px 0 16px;
	}

	.top .wrap {
		width: 100%;
		max-width: none;
		min-height: 52px;
		padding: 0;
		gap: 2px;
		flex-wrap: nowrap;
	}

	.nav,
	.search,
	.me {
		display: none;
	}

	.search-link,
	.ib.search-link {
		display: inline-flex;
	}

	.ib {
		width: 44px;
		height: 44px;
		border-radius: 6px;
	}

	.badge {
		top: 5px;
		right: 4px;
	}

	.top .wrap > .btn.pri {
		justify-content: center;
		width: 40px;
		height: 40px;
		margin-left: 4px;
		padding: 0;
		border-radius: 6px;
		order: 5;
	}

	.top .wrap > .btn.pri .btn-text {
		display: none;
	}

	.top .wrap > .btn.pri .btn-icon {
		display: inline;
	}

	.top .wrap > .notifications-link {
		order: 4;
	}

	.sub {
		display: flex;
		align-items: center;
		gap: 18px;
		height: 40px;
		padding: 0 16px;
		border-bottom: 1px solid var(--line);
		color: var(--muted);
		font: 13px var(--font-mono);
	}

	.sub a {
		display: flex;
		align-items: center;
		height: 40px;
	}

	.sub a.on {
		color: var(--ink);
		box-shadow: inset 0 -2px 0 var(--accent);
	}

	.bare {
		padding: 56px 16px;
	}
}