* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-Regular.woff2?v=058ea659c6f4") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-Bold.woff2?v=058ea659c6f4") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-ui: "JetBrains Mono", ui-monospace, monospace;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;
	--settings-label-w: 14rem;
	/* Info icon (1em + its margin) plus the row gap, reserved on rows without one. */
	--settings-info-slot: calc(1em + var(--pad-tight) + 0.5rem);
	/* Where controls start: label column, info slot and the row gap. */
	--settings-control-inset: calc(var(--settings-label-w) + var(--settings-info-slot) + 0.5rem);

	/* Skins: structural tokens, orthogonal to the colour palette above.
	   Defaults reproduce today's look byte-for-byte; see
	   specs/2026-07-24-skins.md and web/static/skins.css. */
	--marker-title:  "# ";
	--marker-h2:     "## ";
	--marker-h3:     "### ";
	--marker-h4:     "";
	--marker-colour: var(--primary);
	--prompt-symbol: "$";
	--tag-prefix:    "#";
	--collapse-glyph: "\00ab";  /* «, the sidebar collapse control */
	--brand-prefix:  "~/";      /* before the site name in the topbar */
	--brand-cursor:  "\258d";   /* ▍, after the site name on hover */
	/* A short rule under the page title's left edge; `block` shows it. */
	--title-rule:        none;
	--title-rule-w:      2.5rem;
	--title-rule-h:      1px;
	--title-rule-colour: var(--fg-faint);

	--radius:        4px;
	--radius-lg:     6px;
	--border-w:      1px;        /* content hairlines: panels, cards, tables */
	--field-border-w: 1px;       /* form field + editor pane edges. Not
	                                skinnable: a field with no visible edge
	                                also has no visible focus state. */
	--chrome-border-w: 1px;      /* the shell's own region edges: sidebar rule,
	                                statusline rule, mobile topbar. Split from
	                                --border-w so a skin can erase content
	                                hairlines without dissolving the shell. */
	--rule-style:    solid;

	--rail-w:        200px;      /* right-hand outline rail, incl. its gutter */
	--prose-measure: 900px;
	--prose-size:    15px;
	--prose-leading: 1.75;
	--para-gap:      0.75rem;

	--title-size:      28px;
	--title-weight:    700;
	--title-transform: none;
	--title-tracking:  0;
	--heading-family:  var(--font-ui);

	--pad:        16px;
	--pad-tight:  8px;
	/* Where the site name starts in the topbar, from the group's left edge: the
	   sidebar's padding, so the name lines up with the sidebar's content. A skin
	   whose name sits in a floating box adjusts it. */
	--topbar-inset: var(--pad);
	/* Compact controls (buttons, notices). Skins may override. */
	--control-pad-y:  0.3rem;
	--control-pad-x:  0.8rem;
	--control-pad-x-compact: 0.6rem;
	--chrome-border: var(--border);
	/* --border and --border-strong sit below the 3:1 non-text minimum in
	   every palette. Anything the user must locate (fields, editor panes,
	   data grids) uses this instead. It is anchored to --fg-muted, which is
	   itself held at >=4.5:1 against --bg. */
	--border-visible: color-mix(in srgb, var(--fg-muted) 40%, var(--bg));
	/* Scrollbars take the palette's colours; the track is clear so each
	   scrolling region keeps its own background. Inherited, so this one
	   declaration covers every scroller. */
	--scrollbar-thumb: var(--border-visible);
	scrollbar-color: var(--scrollbar-thumb) transparent;
}

:root, :root[data-theme="dark"] {
	color-scheme: dark;
	--bg:        #0b0f14;
	--surface:     #0e141b;
	--surface-raised:   #121924;
	--border:    #1d2733;
	--border-strong:  #2a3644;
	--fg:        #c6d0da;
	--fg-strong: #e6edf3;
	--fg-muted:  #8b98a5;
	--fg-faint:  #71818f;
	--primary:     #56d364;
	--primary-muted: #2e5b3a;
	--accent:      #79b8ff;
	--warning:     #e3b341;
	--warning-bg:  #3a3113;
	--danger:       #f47067;
	--danger-muted:   #6e3a3f;
	--danger-bg:    #2c1618;
	--accent-fg: #0b0f14;
}

:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f7f8f6;
	--surface: #eef1ec;
	--surface-raised: #e6eae4;
	--border: #d8ded6;
	--border-strong: #c4cdc6;
	--fg: #2d3438;
	--fg-strong: #1c2226;
	--fg-muted: #5c6a70;
	--fg-faint: #647177;
	--primary: #1a7f37;
	--primary-muted: #a4c7ab;
	--accent: #316dca;
	--warning: #9a6700;
	--warning-bg: #fff0c2;
	--danger: #cf222e;
	--danger-muted: #e0a9ad;
	--danger-bg: #fbe9e9;
	--accent-fg: #ffffff;
}

body {
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.75;
	background: var(--bg);
	color: var(--fg);
}

pre, code, kbd, textarea {
	font-family: var(--font-mono);
}

main {
	max-width: 60rem;
	margin: 0 auto;
	padding: 1rem;
}

h1, h2, h3 {
	margin: 1rem 0 0.5rem;
}

p, ul, ol, pre, table, blockquote {
	margin-bottom: 0.75rem;
}

main ul, main ol {
	padding-left: 1.5rem;
}

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

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

code {
	background: var(--surface);
	padding: 0.1rem 0.3rem;
	border-radius: 3px;
	font-size: 0.9em;
}

pre {
	background: var(--surface);
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius-lg);
	padding: 0.75rem;
	overflow-x: auto;
}

pre code {
	background: none;
	padding: 0;
}

blockquote {
	border-left: 3px solid var(--border);
	padding-left: 1rem;
	color: var(--fg-muted);
}

table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	border: var(--border-w) solid var(--border-visible);
	padding: 0.4rem 0.6rem;
	text-align: left;
}

th {
	background: var(--surface);
}

img {
	max-width: 100%;
}

mark {
	background: var(--warning-bg);
	color: inherit;
}

/* ---------------------------------------------------------------
   Phosphor shell: app bar + sidebar + main + statusline grid on <body>
   --------------------------------------------------------------- */

html, body {
	height: 100%;
}

body.shell {
	display: grid;
	grid-template-columns: 260px 1fr;
	grid-template-rows: 44px 1fr 32px;
	grid-template-areas:
		"topbar topbar"
		"sidebar main"
		"statusline statusline";
	min-height: 100vh;
}

/* Settings have no wiki sidebar; their own menu takes its place and the app
   bar links back to the wiki. */
body.shell.no-sidebar {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "topbar" "main" "statusline";
}

.no-sidebar > .sidebar {
	display: none;
}

/* Pages without the shell (login) keep normal block flow */
body:not(.shell) {
	min-height: 100vh;
}

/* Anonymous public-namespace view: sidebar nav and a minimal topbar
   (title only, no auth-only actions/statusline), so drop the statusline row. */
body.shell.shell-public {
	grid-template-rows: 56px 1fr;
	grid-template-areas:
		"topbar topbar"
		"sidebar main";
}

.app-topbar-public {
	padding: 0 20px;
}

.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 2000;
	padding: 10px 16px;
	background: var(--bg);
	color: var(--fg);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

#public-sidebar-toggle {
	display: none;
}

[hidden] {
	display: none !important;
}

.sidebar {
	grid-area: sidebar;
	background: var(--surface);
	border-right: var(--chrome-border-w) solid var(--chrome-border);
	padding: var(--pad);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	/* Reserve the scrollbar's room, so opening a folder that makes the tree
	   scroll doesn't narrow every row and resize the current-page highlight. */
	scrollbar-gutter: stable;
}

.sidebar h2 {
	font-size: 12px;
	color: var(--fg-muted);
	margin: 0 0 6px;
	font-weight: 600;
}

.sidebar-section {
	margin-bottom: 24px;
}

.sidebar-list {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.sidebar-list li a {
	display: block;
	flex: 1;
	min-width: 0;
	padding: 4px 8px;
	margin: 0 -8px;
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 3px;
}

/* The pages widget puts its draft dot and pin inside the link, at the row's
   end, so the active fill covers the whole row, markers included. */
.sidebar-list li a:has(> .sidebar-list-title) {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sidebar-list-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-list li a .draft-dot {
	margin-right: 0;
}

.sidebar-list li a.active .pin-glyph {
	color: inherit;
}

.sidebar-list li a:hover {
	color: var(--fg-strong);
}

/* The current item looks the same in every sidebar widget, tree included. */
.sidebar-list li a.active,
.sidebar-tree .page-tree a.current {
	background: var(--primary);
	color: var(--accent-fg);
}

.sidebar-tags {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sidebar-tags li a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 8px;
	margin: 0 -8px;
	color: var(--primary);
	text-decoration: none;
	font-size: 13px;
	border-radius: 3px;
}

.sidebar-tags li a:hover {
	background: var(--surface-raised);
}

.sidebar-tags li a .count,
.sidebar-namespaces li a .count {
	color: var(--fg-faint);
}

.namespace-index {
	list-style: none;
	margin: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sidebar-hints {
	margin-top: auto;
	padding-top: 16px;
	border-top: var(--border-w) solid var(--chrome-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	color: var(--fg-muted);
}

.sidebar-hints .hint-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* Wrap between hints, never inside one: a shortcut split over two lines
   ("ctrl" / "j") is unreadable. */
.sidebar-hints .hint {
	white-space: nowrap;
}

/* Link to the public docs beside the version number. */
.sidebar-hints .hint-docs {
	color: inherit;
	text-decoration: none;
	border: var(--border-w) solid var(--chrome-border);
	padding: 0 5px;
	line-height: 1.4;
}

.sidebar-hints .hint-docs:hover,
.sidebar-hints .hint-docs:focus-visible {
	color: var(--accent);
	border-color: var(--accent);
}

/* On wide screens every screen shares the reading layout: the sidebar, content
   and outline rail form one centred group, with the sidebar beside the text
   instead of pinned to the window edge. The gutter column is empty page
   background; it is zero until the window is wider than the group. Content
   starts at the same place on every screen, the editor included. Settings
   put their own menu in the sidebar column. */
@media (min-width: 900px) {
	body.shell {
		--shell-measure: calc(260px + var(--prose-measure) + var(--rail-w));
		--shell-gutter: max(0px, calc((100vw - var(--shell-measure)) / 2));
		grid-template-columns: var(--shell-gutter) 260px minmax(0, 1fr);
		grid-template-areas:
			"topbar topbar topbar"
			". sidebar main"
			"statusline statusline statusline";
	}

	body.shell.shell-public {
		grid-template-areas:
			"topbar topbar topbar"
			". sidebar main";
	}

	body.shell.no-sidebar {
		grid-template-columns: var(--shell-gutter) 260px minmax(0, 1fr);
		grid-template-areas:
			"topbar topbar topbar"
			". main main"
			"statusline statusline statusline";
	}

	body.shell > .sidebar {
		background: transparent;
		border: 0;
	}

	body.shell > main {
		align-items: flex-start;
	}

	/* The app bar keeps its full-width background, but its contents line up with
	   the group below instead of the window edges. */
	body.shell > .app-topbar {
		padding-inline: calc(var(--shell-gutter) + 10px);
		padding-inline-start: calc(var(--shell-gutter) + var(--topbar-inset));
	}

	body.shell.shell-public > .app-topbar {
		padding-inline: calc(var(--shell-gutter) + 20px);
	}

	/* The sidebar is always shown on desktop, like the docs sites this layout
	   follows, so the toggle is mobile-only. The editor's Full mode hides the
	   sidebar. */
	body.shell #sidebar-toggle {
		display: none;
	}
}

kbd {
	border: var(--border-w) solid var(--border-strong);
	border-radius: 3px;
	padding: 1px 5px;
	font-family: inherit;
	font-size: 11px;
	color: var(--fg-muted);
}

main {
	grid-area: main;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content-col {
	max-width: var(--prose-measure);
	width: 100%;
	padding: 40px 48px;
}

.main-header {
	max-width: 720px;
	width: 100%;
	padding: 20px 48px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.main-header-site {
	font-weight: 700;
	color: var(--fg-faint);
}

.page-wrap {
	display: flex;
	width: 100%;
	max-width: calc(var(--prose-measure) + var(--rail-w));
}

/* Reading controls shared by live and exported pages. */
.page-pagination {
	display: flex;
	gap: 24px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.page-pagination a { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.page-pagination a[rel="next"] { text-align: right; margin-left: auto; }
.page-pagination span { display: block; color: var(--fg-muted); font-size: 12px; font-weight: 400; margin-bottom: 6px; }
/* A block with a fenced language gets a header strip: the language on the
   left, copy on the right, a hairline under both. Without a language the copy
   button sits over the code's corner and shows on hover or focus. */
#page-content pre.code-copy-block { position: relative; }
#page-content pre.code-has-lang { padding-top: calc(2.25rem + 0.75rem); }
.code-lang {
	position: absolute;
	inset: 0 0 auto;
	padding: 0 0.75rem;
	line-height: 2.25rem;
	border-bottom: var(--border-w) solid var(--border);
	font-size: 12px;
	color: var(--fg-muted);
}
.code-copy { position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 12px; opacity: 0; }
.code-has-lang > .code-copy { top: calc((2.25rem - 1.5em - 8px) / 2); padding: 2px 8px; opacity: 1; }
#page-content pre.code-copy-block:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }
@media (hover: none) {
	.code-copy { opacity: 1; }
}
@media print {
	.page-pagination, .code-copy { display: none !important; }
}

/* Statusline */

.statusline {
	grid-area: statusline;
	display: flex;
	align-items: stretch;
	height: 32px;
	font-size: 12.5px;
	background: var(--surface-raised);
	border-top: var(--chrome-border-w) solid var(--border);
	overflow: hidden;
	position: relative;
}

.seg-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: var(--scroll-pct, 0%);
	background: color-mix(in srgb, var(--primary) 12%, transparent);
	pointer-events: none;
}

.statusline .seg {
	display: flex;
	align-items: center;
	padding: 0 12px;
	border-right: var(--border-w) solid var(--chrome-border);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--fg-muted);
	position: relative;
}

.sync-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-right: 6px;
	background: currentColor;
}

.statusline .seg-mode {
	font-weight: 700;
	color: var(--accent-fg);
	background: var(--primary);
	text-transform: uppercase;
}

.statusline[data-mode="edit"] .seg-mode { background: var(--warning); }
.statusline[data-mode="search"] .seg-mode,
.statusline[data-mode="log"] .seg-mode { background: var(--accent); }
.statusline[data-mode="conflict"] .seg-mode { background: var(--danger); }
.statusline[data-mode="settings"] .seg-mode { background: var(--border-strong); color: var(--fg-strong); }

.statusline .seg-title { color: var(--fg-strong); }
.statusline .dirty { color: var(--warning); margin-left: 4px; }

.statusline .seg-sync[data-state="ok"] { color: var(--primary); }
.statusline .seg-sync[data-state="pending"] { color: var(--warning); }
.statusline .seg-sync[data-state="failed"] { color: var(--danger); font-weight: 600; }
.statusline .seg-sync[data-state="no remote"] { color: var(--fg-faint); }

.statusline .seg-spacer { flex: 1; border-right: none; }

.statusline .seg-right {
	margin-left: auto;
	border-right: none;
}

.statusline .seg-user {
	color: var(--fg-muted);
}

.statusline button.link-btn,
.statusline a.link-btn {
	background: none;
	border: none;
	color: var(--fg-muted);
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	font: inherit;
}

.statusline button.link-btn:hover,
.statusline a.link-btn:hover {
	color: var(--fg-strong);
}

/* Shared application bar */

.app-topbar {
	grid-area: topbar;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	background: var(--surface);
	border-bottom: var(--chrome-border-w) solid var(--chrome-border);
	z-index: 1000;
}

/* Same-origin page loads crossfade instead of flashing. Nothing slides or
   morphs: the topbar is named only so it holds still while the page beneath
   it fades. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	.app-topbar {
		view-transition-name: topbar;
	}
}

.topbar-site {
	min-width: 0;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--fg-strong);
	text-decoration: none;
}

.topbar-site::before {
	content: var(--brand-prefix);
	color: var(--marker-colour);
}

.topbar-site::after {
	content: var(--brand-cursor);
	color: var(--marker-colour);
	visibility: hidden;
}

.topbar-site:hover::after,
.topbar-site:focus-visible::after {
	visibility: visible;
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.topbar-icon,
.topbar-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 36px;
	height: 36px;
	padding: 0 9px;
	border: 0;
	border-radius: var(--radius-lg);
	background: none;
	color: var(--fg-muted);
	text-decoration: none;
	cursor: pointer;
}

.topbar-icon:hover,
.topbar-action:hover,
.topbar-menu[open] > summary {
	background: var(--surface-raised);
	color: var(--fg-strong);
}

.topbar-primary {
	background: var(--primary);
	color: var(--accent-fg);
}

.app-topbar svg {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.topbar-menu {
	position: relative;
}

.topbar-menu > summary {
	list-style: none;
}

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

.topbar-menu-items {
	position: absolute;
	top: calc(100% + 5px);
	right: 0;
	min-width: 160px;
	padding: 6px;
	background: var(--surface-raised);
	border: var(--field-border-w) solid var(--border-visible);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.topbar-menu-items a,
.topbar-menu-items button {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--radius-lg);
	background: none;
	color: var(--fg);
	text-align: left;
	text-decoration: none;
}

.topbar-menu-items a:hover,
.topbar-menu-items button:hover {
	background: var(--surface);
}

/* Forms and buttons */

input, textarea, button, select {
	font: inherit;
	color: inherit;
}

input[type="text"], input[type="search"], input[type="password"], textarea {
	width: 100%;
	padding: 0.4rem 0.6rem;
	background: var(--bg);
	border: var(--field-border-w) solid var(--border-visible);
	border-radius: var(--radius-lg);
}

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

button {
	padding: 0.4rem 1rem;
	background: var(--accent);
	color: var(--accent-fg);
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
}

button:hover {
	filter: brightness(1.1);
}

/* Shared action layout; component appearance is defined in components.css. */
.ui-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.error {
	background: color-mix(in srgb, var(--danger) 15%, var(--bg));
	color: var(--danger);
	padding: 0.75rem;
	border-radius: var(--radius-lg);
	margin-bottom: 1rem;
}

/* Login */

.login-container {
	max-width: 20rem;
	margin: 4rem auto;
}

.login-form {
	background: var(--surface);
	padding: 2rem;
	border-radius: 8px;
	border: var(--border-w) solid var(--chrome-border);
}

.login-form h2 {
	margin: 0 0 1.5rem;
}

.login-form div {
	margin-bottom: 1rem;
}

.login-form button {
	width: 100%;
	padding: 0.6rem;
}

.sso-icon {
	height: 1.1em;
	width: 1.1em;
	vertical-align: -0.2em;
	margin-right: 0.45em;
}

/* Page view */

article nav {
	margin-bottom: 1rem;
	display: flex;
	gap: 1rem;
	font-size: 0.9rem;
}

aside {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: var(--border-w) solid var(--chrome-border);
	color: var(--fg-muted);
}

aside h2 {
	font-size: 1rem;
	margin-top: 0;
}

.old-version {
	background: var(--surface);
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius-lg);
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.current-marker {
	font-size: 0.8rem;
	color: var(--fg-muted);
}

/* Editor: the source sits in the reading column at the reading width, so
   editing looks like the page. It grows with its document and the page
   scrolls, as on a reading page; the preview swaps into the same place. */

#cm-host .cm-editor {
	min-height: 24rem;
	background: none;
	color: var(--fg);
}

#cm-host .cm-editor.cm-focused {
	outline: none;
}

#cm-host .cm-gutters {
	display: none;
}

#cm-host .cm-content {
	padding: 0 0 4rem;
}

#cm-host .cm-line {
	padding: 0;
}

#preview {
	min-height: 24rem;
}

#preview:focus {
	outline: none;
}

#preview.preview-loading {
	opacity: 0.5;
}

#preview.preview-error {
	color: var(--danger);
}

.snippet {
	color: var(--fg-muted);
	font-size: 0.9rem;
}

/* Editor actions (Save + Cancel) */

.edit-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.cancel-link {
	color: var(--accent);
	text-decoration: none;
	padding: 0.4rem 0.6rem;
}

/* Editor status bar (JS hook only, not displayed) */

.editor-statusbar {
	display: none;
}

/* Old version banner actions */

.old-version-actions {
	display: flex;
	gap: 1rem;
	align-items: center;
}

/* CM6 dark theme */

:root[data-theme="dark"] #cm-host .cm-editor .cm-activeLine {
	background: color-mix(in srgb, var(--border) 30%, transparent);
}

:root[data-theme="dark"] #cm-host .cm-editor .cm-selectionBackground {
	background: color-mix(in srgb, var(--accent) 30%, transparent);
}

:root[data-theme="dark"] #cm-host .cm-editor .cm-cursor {
	border-left-color: var(--fg);
}

/* Editor toolbar */

/* The toolbar stays in reach while the page scrolls through the document. */
.toolbar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--pad);
	margin: 0 0 1.25rem;
	padding: 0.5rem 0;
	background: var(--bg);
	border-bottom: var(--border-w) var(--rule-style) var(--chrome-border);
}

.toolbar-group {
	display: flex;
	flex: none;
	gap: 0.3rem;
}

.toolbar-view {
	margin-left: auto;
}

/* Small screens: the buttons flow and wrap as one set rather than scroll
   sideways. */
@media (max-width: 899px) {
	.toolbar {
		flex-wrap: wrap;
		gap: 0.3rem;
	}

	.toolbar-group {
		display: contents;
	}
}

/* Tags */

.tags {
	margin-bottom: 1rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Zen Mode focus: only the title and the writing stay, larger, with all
   but the current line dimmed. Save stays on Ctrl/Cmd+S. */

body.zen-focus .app-topbar,
body.zen-focus .sidebar,
body.zen-focus .statusline,
body.zen-focus main > .ui-notice--banner,
body.zen-focus .editor-col > .breadcrumb,
body.zen-focus .edit-meta,
body.zen-focus .toolbar,
body.zen-focus #editor-src,
body.zen-focus #preview {
	display: none !important;
}

/* The shell collapses to its main area. */
body.zen-focus.shell {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "main";
}

body.zen-focus.shell > main {
	align-items: center;
}

/* The text grows and the column with it, so lines keep their length. The
   focus bar's size buttons set the scale on the body. */
body.zen-focus {
	--zen-scale: 1.2;
}

body.zen-focus :is(.page-wrap, .page-wrap .content-col) {
	max-width: calc(var(--prose-measure) * var(--zen-scale));
}

body.zen-focus #cm-host .cm-editor {
	font-size: calc(1em * var(--zen-scale));
}

body.zen-focus .cm-editor .cm-line:not(.cm-activeLine) {
	opacity: 0.35;
}

/* Zen Mode floating status bar */

.zen-status {
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	background: var(--surface);
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius-lg);
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
	color: var(--fg-muted);
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.3s ease;
	align-items: center;
	gap: 0.5rem;
}

body.zen-focus .zen-status {
	display: flex;
}

body.zen-focus .zen-status.visible {
	opacity: 1;
}

.zen-exit {
	background: var(--accent);
	color: var(--accent-fg);
	border: none;
	border-radius: var(--radius);
	padding: 0.2rem 0.6rem;
	font-size: 0.8rem;
	cursor: pointer;
}

/* ---------------------------------------------------------------
   Page view content
   --------------------------------------------------------------- */

.page-title {
	font-size: var(--title-size);
	font-weight: var(--title-weight);
	text-transform: var(--title-transform);
	letter-spacing: var(--title-tracking);
	font-family: var(--heading-family);
	color: var(--fg-strong);
	margin: 0 0 8px;
}

/* Document titles only: settings panel headings stay plain. */
h1.page-title:not(.settings-panels *)::after {
	content: "";
	display: var(--title-rule);
	width: var(--title-rule-w);
	height: var(--title-rule-h);
	margin-top: 0.35em;
	border-radius: var(--title-rule-h);
	background: var(--title-rule-colour);
}

/* Namespace indexes keep their catalogue readable without borrowing page chrome. */
.namespace-index-page {
	max-width: var(--prose-measure);
}

.namespace-index-meta {
	color: var(--fg-muted);
	font-size: 0.85rem;
	margin: -0.75rem 0 1.25rem;
}

.namespace-index-meta a {
	color: var(--accent);
}

.namespace-index-actions {
	margin: 0 0 1.25rem;
}

.namespace-index-empty {
	border: var(--border-w) var(--rule-style) var(--border);
	background: var(--surface);
	color: var(--fg-muted);
	padding: var(--pad);
	border-radius: var(--radius);
}

/* Namespace index tree: folders are real filesystem directories under the
   namespace (see namespace.go's navNode), so the index shows that structure
   instead of a flat alphabetical list. A folder's children get a guide
   line down the left edge and a short connector into each row, the same
   shape "tree" would print. */
ul.page-tree {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
}
ul.page-tree.branch {
	margin-left: 0.8em;
	padding-left: 1em;
	border-left: var(--border-w) var(--rule-style) var(--border-visible);
}
.page-tree li {
	position: relative;
	padding: 0.25em 0;
}
ul.page-tree.branch > li::before {
	content: "";
	position: absolute;
	left: -1em;
	top: 1.1em;
	width: 0.7em;
	height: var(--border-w);
	background: var(--border-visible);
}
.page-tree a {
	color: var(--fg-strong);
	text-decoration: none;
}
.page-tree a:hover,
.page-tree a:focus-visible {
	color: var(--primary);
	text-decoration: underline;
}
.page-tree .dir {
	color: var(--fg-muted);
}
.page-tree summary {
	cursor: pointer;
	list-style: revert;
}
.page-tree a.current {
	background: var(--primary);
	color: var(--accent-fg);
	border-radius: 3px;
	padding: 0 4px;
	margin: 0 -4px;
}

/* Sidebar TREE widget: the same tree, but compact (13px, sidebar-list's
   rhythm) and collapsible as a whole via <details>, matching every other
   sidebar section's h2 header, but interactive. */
.sidebar-tree > summary {
	cursor: pointer;
	list-style: revert;
	font-size: 12px;
	color: var(--fg-muted);
	font-weight: 600;
	margin: 0 0 6px;
}
.sidebar-tree .page-tree {
	font-size: 13px;
}
.sidebar-tree .page-tree a {
	display: block;
	padding: 4px 8px;
	margin: 0 -8px;
	color: var(--fg-muted);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 3px;
}
.sidebar-tree .page-tree a:hover {
	color: var(--fg-strong);
}
/* Nested rows start their highlight where the connector into the row ends, so
   it never covers the tree's guide lines. */
.sidebar-tree .page-tree.branch a {
	margin-left: -0.3em;
	padding-left: 0.3em;
}
/* A folder row is a flex row with its own fixed-width disclosure triangle,
   so the row's geometry doesn't depend on the skin font's native marker.
   The folder's link reaches back under the triangle, so its highlight is
   exactly a page row's block; the triangle sits above the link so clicking
   it still opens and closes the folder. */
.sidebar-tree .page-tree summary {
	display: flex;
	align-items: baseline;
	list-style: none;
}
.sidebar-tree .page-tree summary::-webkit-details-marker {
	display: none;
}
.sidebar-tree .page-tree summary::before {
	content: "\25b8";
	position: relative;
	z-index: 1;
	flex: none;
	width: 1.25em;
	color: var(--fg-muted);
}
.sidebar-tree .page-tree details[open] > summary::before {
	content: "\25be";
}
.sidebar-tree .page-tree summary:has(> a.current)::before {
	color: var(--accent-fg);
}
.sidebar-tree .page-tree summary > a.nav-link {
	flex: 1;
	min-width: 0;
	margin: 0 -8px 0 calc(-1.25em - 8px);
	padding: 4px 8px 4px calc(1.25em + 8px);
}
.sidebar-tree .page-tree.branch summary > a.nav-link {
	margin-left: calc(-1.25em - 0.3em);
	padding-left: calc(1.25em + 0.3em);
}
.sidebar-tree .page-tree summary > .dir {
	padding: 4px 0;
}
.sidebar-tree .page-tree .dir {
	color: var(--fg-faint);
	font-size: 12px;
}

.namespace-management {
	width: min(100%, 900px);
}

.namespace-management .settings-zone-desc,
.namespace-management .settings-note {
	max-width: 70ch;
}

/* Option labels carry each image's size, so the select takes the control
   column instead of growing to its longest option. */
.settings-row #namespace-image {
	flex: 1 1 0;
	min-width: 0;
}

.namespace-image-preview {
	display: block;
	max-width: min(100%, 20rem);
	margin-bottom: 1rem;
	border: var(--border-w) solid var(--border-visible);
	border-radius: var(--radius-lg);
}

.namespace-table,
.table-wrap {
	overflow-x: auto;
}

.namespace-table table {
	min-width: 38rem;
}

.tree-order-editor {
	margin: 0.25rem 0 0.75rem;
}

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

.tree-order-editor > .tree-order-list {
	border: var(--field-border-w) solid var(--border-visible);
	border-radius: var(--radius);
	max-height: 28rem;
	overflow: auto;
}

.tree-order-node > details > .tree-order-list {
	border-left: 2px solid var(--border-visible);
	margin: 0.25rem 0 0.25rem 1.1rem;
	padding-left: 0.65rem;
}

.tree-order-item {
	align-items: center;
	border-bottom: var(--border-w) solid var(--border-visible);
	cursor: grab;
	display: flex;
	gap: 0.5rem;
	min-height: 2rem;
	padding: 0.25rem 0.5rem;
}

.tree-order-list > .tree-order-node:last-child > .tree-order-item,
.tree-order-list > .tree-order-node:last-child > details > .tree-order-item { border-bottom: 0; }
.tree-order-item.dragging { background: var(--surface-raised); opacity: 0.55; }
.tree-order-item.fixed { cursor: default; }
summary.tree-order-item { list-style: none; }
summary.tree-order-item::-webkit-details-marker { display: none; }
.tree-order-toggle,
.tree-order-toggle-placeholder {
	color: var(--fg-muted);
	flex: 0 0 0.75rem;
	text-align: center;
}
.tree-order-node > details[open] > .tree-order-item .tree-order-toggle { transform: rotate(90deg); }
.tree-order-handle { color: var(--fg-faint); cursor: grab; }
.tree-order-title { color: var(--fg-strong); flex: 1; min-width: 0; }
.tree-order-item code {
	color: var(--fg-muted);
	font-size: 0.75rem;
	max-width: 40%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tree-order-index {
	color: var(--primary);
	font-size: 0.75rem;
	text-transform: uppercase;
}

.published-preview {
	margin: 0.75rem 0 0;
}

.published-preview > span {
	color: var(--primary);
	display: block;
	margin-bottom: 0.4rem;
}

.published-preview iframe {
	border: var(--field-border-w) solid var(--border-visible);
	border-radius: var(--radius);
	display: block;
	height: 28rem;
	width: 100%;
}

@media (max-width: 600px) {
	.namespace-management .settings-actions {
		align-items: stretch;
		flex-direction: column;
	}
	.namespace-management .settings-actions > * {
		text-align: center;
		min-height: 44px;
	}
	.published-preview,
	.tree-order-editor,
	.settings-inset {
		margin-left: 0;
	}
}

@media (max-width: 600px) {
	.namespace-index-page {
		padding-inline: var(--pad-tight);
	}
	.namespace-index-actions .primary {
		display: inline-block;
		min-height: 44px;
		padding: 0.75rem 1rem;
	}
}

.page-meta {
	font-size: 12.5px;
	color: var(--fg-muted);
	margin-bottom: 32px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.page-meta a {
	color: var(--accent);
	text-decoration: none;
}

.page-meta a:hover {
	text-decoration: underline;
}

.page-meta .meta-tag {
	color: var(--primary);
	text-decoration: none;
}

.page-meta a.meta-tag:hover {
	text-decoration: underline;
}

.h::before {
	content: var(--marker-title);
	color: var(--marker-colour);
}

.settings-zone-title .h::before {
	content: var(--marker-h2);
}

.tag-chips a::before {
	content: var(--tag-prefix);
}

.breadcrumb .tag::before {
	content: var(--tag-prefix);
}

.page-meta .meta-tag::before,
.tag-list a::before,
.hit-tags .hit-tag::before,
.preview-card .card-tag::before {
	content: var(--tag-prefix);
}

#page-content, #preview {
	font-size: var(--prose-size);
	line-height: var(--prose-leading);
}

#page-content p, #preview p {
	margin-bottom: var(--para-gap);
	text-wrap: pretty;
}

.page-title,
#page-content :is(h2, h3, h4),
#preview :is(h2, h3, h4) {
	text-wrap: balance;
}

#page-content h2::before, #preview h2::before {
	content: var(--marker-h2);
	color: var(--marker-colour);
}

#page-content h3::before, #preview h3::before {
	content: var(--marker-h3);
	color: var(--marker-colour);
}

#page-content h4::before, #preview h4::before {
	content: var(--marker-h4);
	color: var(--marker-colour);
}

/* Wiki links */

.wiki {
	color: var(--primary);
	text-decoration: none;
}

.wiki .br {
	color: var(--primary-muted);
}

.missing.wiki {
	color: var(--danger);
	border-bottom: var(--border-w) dashed var(--danger);
}

.missing.wiki .br {
	color: var(--danger-muted);
}

.missing-suffix {
	color: var(--danger);
}

/* Tables */

#page-content table {
	border: none;
}

#page-content th, #page-content td {
	border: none;
	border-bottom: var(--border-w) solid var(--chrome-border);
	padding: 6px 12px;
}

/* Cells keep their words whole: letting them break anywhere squeezed every
   column to a few characters. A wide table scrolls in its wrapper instead. */
#page-content th, #page-content td {
	overflow-wrap: normal;
	vertical-align: top;
}

#page-content th {
	white-space: nowrap;
}

#page-content th {
	background: var(--surface-raised);
	color: var(--fg-muted);
	font-size: 12px;
	font-weight: 600;
}

#page-content td:first-child, #page-content th:first-child {
	color: var(--accent);
}

.settings-table {
	border: none;
	width: 100%;
}

.settings-table th, .settings-table td {
	border: none;
	border-bottom: var(--border-w) solid var(--border-visible);
	padding: 6px 12px;
}

.settings-table th {
	background: var(--surface-raised);
	color: var(--fg-muted);
	font-size: 12px;
	font-weight: 600;
}

.settings-table td:first-child, .settings-table th:first-child {
	color: var(--accent);
}

/* Old-layout attachments: names and headings stay whole on a phone; the
   last column takes the wrapping. */
#legacy-attachments-table :is(th, td:first-child) {
	white-space: nowrap;
}

/* Code blocks */

#page-content pre {
	background: var(--surface);
	border: none;
	border-radius: var(--radius);
	font-size: 13.5px;
}

/* TOC rail */

.page-wrap .content-col {
	max-width: var(--prose-measure);
}

.toc-rail {
	display: none;
	width: var(--rail-w);
	flex-shrink: 0;
	padding: 40px 16px 40px 0;
}

.toc-rail nav {
	position: sticky;
	top: 40px;
	border-left: var(--border-w) solid var(--chrome-border);
	padding-left: 12px;
}

.toc-rail .toc-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fg-muted);
	margin-bottom: 8px;
}

.toc-rail a,
.toc-inline a {
	display: block;
	font-size: 13px;
	color: var(--fg-muted);
	text-decoration: none;
	padding: 3px 0 3px 12px;
	margin-left: -13px;
	border-left: 2px solid transparent;
}

.toc-rail a.h3,
.toc-inline a.h3 {
	padding-left: 24px;
}

.toc-rail a.active,
.toc-inline a.active {
	color: var(--primary);
	border-left-color: var(--primary);
}

.toc-inline {
	display: none;
	max-width: 720px;
	width: 100%;
	margin-bottom: 20px;
}

.toc-inline summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--fg-faint);
	list-style: none;
	user-select: none;
	padding: 8px 0;
}

.toc-inline summary::-webkit-details-marker {
	display: none;
}

.toc-inline summary::before {
	content: "▸ ";
	color: var(--primary);
}

.toc-inline[open] summary::before {
	content: "▾ ";
}

.breadcrumb-history {
	display: none;
}

@media (min-width: 1200px) {
	.toc-rail.has-headings {
		display: block;
	}
}

/* ---------------------------------------------------------------
   ctrl-k palette
   --------------------------------------------------------------- */

.palette-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(4, 7, 10, 0.5);
	z-index: 1000;
	align-items: flex-start;
	justify-content: center;
	padding-top: 15vh;
}

.palette-backdrop.open {
	display: flex;
}

.palette {
	width: 580px;
	max-width: 90vw;
	max-height: 60vh;
	background: var(--surface);
	border: var(--border-w) solid var(--border-strong);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.palette-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: var(--border-w) solid var(--chrome-border);
}

.palette-input-row .prefix {
	color: var(--primary);
}

.palette-input-row input {
	flex: 1;
	background: none;
	border: none;
	color: var(--fg-strong);
	font: inherit;
	outline: none;
	padding: 0;
}

.palette-input-row .match-count {
	color: var(--fg-faint);
	font-size: 12px;
	flex-shrink: 0;
}

.palette-results {
	overflow: hidden;
}

.palette-shortcuts {
	border-top: var(--border-w) solid var(--chrome-border);
}

.palette-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 16px;
	cursor: pointer;
	text-decoration: none;
	color: var(--fg);
}

.palette-row .filetype {
	color: var(--fg-faint);
	font-size: 11px;
	flex-shrink: 0;
}

.palette-row .title {
	color: var(--fg-strong);
	flex-shrink: 0;
}

.palette-row .hit-tags {
	flex-shrink: 0;
	white-space: nowrap;
}

.palette-row .snippet {
	flex: 1 1 0;
	min-width: 0;
	color: var(--fg-muted);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.palette-row mark {
	background: var(--warning-bg);
	color: var(--fg-strong);
}

.palette-row.selected {
	background: var(--primary-muted);
}

:root[data-theme="light"] .palette-row.selected {
	background: color-mix(in srgb, var(--primary) 14%, var(--surface-raised));
}

.palette-create {
	border-top: var(--border-w) solid var(--chrome-border);
	color: var(--primary);
}

.palette-footer {
	border-top: var(--border-w) solid var(--chrome-border);
	padding: 6px 16px;
	font-size: 11px;
	color: var(--fg-faint);
}

/* ---------------------------------------------------------------
   Editor header (edit.html): the title edits in place of the page
   title, with tags and the page details below it as on a reading page.
   --------------------------------------------------------------- */

.editor-col > .breadcrumb .cancel-link {
	margin-left: auto;
	padding: 0;
	color: var(--fg-muted);
}

.edit-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

/* Flex layout would trim the space the title marker ends with. */
.edit-title .h {
	white-space: pre;
}

/* The skin's title rule keeps its own line under the title: the margin
   fills the rest of the row so it wraps there. */
h1.edit-title::after {
	margin-right: calc(100% - var(--title-rule-w));
}

.edit-title input {
	flex: 1 1 60%;
	min-width: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.edit-title input:focus-visible {
	outline: none;
}

.edit-title input::placeholder {
	color: var(--fg-faint);
}

.edit-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem var(--pad);
	margin-bottom: 1.25rem;
	font-size: 13px;
}

.edit-meta > .ui-disclosure > summary {
	color: var(--fg-muted);
}

.edit-meta > .ui-disclosure[open] {
	flex-basis: 100%;
	order: 1;
}

.edit-details {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem var(--pad);
	padding-top: 0.75rem;
}

.edit-field {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex: 1 1 16rem;
	min-width: 0;
}

.edit-field label {
	color: var(--primary);
	font-weight: 400;
	margin: 0;
}

.edit-field input {
	background: none;
	border: none;
	border-bottom: var(--field-border-w) solid var(--border-visible);
	color: var(--fg-strong);
	border-radius: 0;
	padding: 2px 0;
	flex: 1 1 12rem;
	min-width: 0;
	width: auto;
	font-size: inherit;
}

.edit-field-checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--fg-muted);
	cursor: pointer;
}

.edit-field-checkbox input {
	width: auto;
}

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

.search-query-form {
	display: flex;
	align-items: baseline;
	margin-bottom: 8px;
}

.search-query-prompt::before {
	content: var(--prompt-symbol);
	color: var(--marker-colour);
	margin-right: 0.3em;
}

.search-query-form input {
	min-width: 0;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: var(--field-border-w) solid transparent;
	border-radius: 0;
	padding: 0;
}

.search-query-form input:focus {
	border-bottom-color: var(--primary);
	outline: 0;
}

.search-header .search-stats {
	color: var(--fg-muted);
	font-size: 12.5px;
	margin-bottom: 24px;
}

.search-hit {
	margin-bottom: 20px;
}

.search-hit .hit-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--primary);
	text-decoration: none;
}

.search-hit .hit-tags {
	color: var(--fg-faint);
	font-size: 12px;
	margin-left: 8px;
}

.search-hit .hit-snippet {
	font-size: 13px;
	color: var(--fg-muted);
	margin-top: 4px;
}

.search-hit mark {
	background: var(--warning-bg);
	color: var(--fg-strong);
}

/* ---------------------------------------------------------------
   History page
   --------------------------------------------------------------- */

.history-sub {
	color: var(--fg-muted);
	font-size: 12.5px;
	margin-bottom: 24px;
}

.history-sub a {
	color: var(--accent);
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Conflict + login
   --------------------------------------------------------------- */

.conflict-card, .login-card {
	max-width: 620px;
	margin: 4rem auto;
}

/* Banners (notices with a banner key): span the main column, like the top bar. */
.ui-notice--banner {
	align-self: stretch;
	margin: var(--pad) var(--pad) 0;
}

/* On wide screens the banners sit over the reading column instead of running
   to the window edge, so they start where content starts on every screen.
   Settings screens give the sidebar column to their own menu. */
@media (min-width: 900px) {
	body.shell > main > .ui-notice--banner {
		align-self: flex-start;
		width: calc(100% - 96px);
		max-width: calc(var(--prose-measure) - 96px);
		margin: var(--pad) 48px 0;
	}

	body.shell.no-sidebar > main > .ui-notice--banner {
		margin-left: calc(260px + 48px);
		max-width: calc(min(var(--prose-measure), 100% - 260px) - 96px);
	}
}

/* Banners stack: app.js numbers the visible ones in data-stack and --stack.
   The first sits on top; each one behind it is a thin, darker, narrower sliver
   under the one in front, and shows once the ones above it are dismissed. Only
   two slivers show; any further ones wait folded away. Hovering grows the
   slivers without moving the layout. Touch screens have no hover, so there the
   banners stay in full with a small gap. */
/* A sliver keeps the colour of its own variant. */
.ui-notice--banner.ui-notice--danger { --banner-bg: var(--danger-bg); }
.ui-notice--banner.ui-notice--info,
.ui-notice--banner.ui-notice--success { --banner-bg: var(--surface); }

.ui-notice--banner {
	position: relative;
	z-index: calc(10 - var(--stack, 0));
	flex-shrink: 0;
}

body main > .ui-notice--banner[data-stack] {
	margin-bottom: 0;
}

body main > .ui-notice--banner[data-stack]:not([data-stack="0"]) {
	margin-top: calc(var(--pad) / 4);
}

@media (hover: hover) {
	body main > .ui-notice--banner[data-stack]:not([data-stack="0"]) {
		height: 1.1em;
		max-height: 1.1em;
		margin-top: -0.7em;
		padding-block: 0;
		overflow: hidden;
		color: transparent;
		background: color-mix(in srgb, var(--banner-bg, var(--warning-bg)), black calc(var(--stack) * 9%));
		clip-path: inset(0 calc(var(--stack) * 12px));
		transition: height 0.15s ease-out, max-height 0.15s ease-out, margin-bottom 0.15s ease-out;
	}

	body main > .ui-notice--banner[data-stack] > * {
		visibility: hidden;
	}

	body main > .ui-notice--banner[data-stack="0"] > * {
		visibility: visible;
	}

	body main > .ui-notice--banner[data-stack] {
		box-shadow: 0 2px 4px color-mix(in srgb, black 35%, transparent);
	}

	body main > .ui-notice--banner[data-stack="3"]:not([data-stack="0"]) {
		height: 0;
		max-height: 0;
		margin: 0;
		border: 0;
		box-shadow: none;
	}

	/* Hovering grows the slivers by 30% of their height; the bottom margin
	   takes the growth back so nothing below moves. */
	body main:has(> .ui-notice--banner:hover) > .ui-notice--banner:is([data-stack="1"], [data-stack="2"]) {
		height: 1.43em;
		max-height: 1.43em;
		margin-bottom: -0.33em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ui-notice--banner[data-stack] {
		transition: none;
	}
}

.remote-changed-banner {
	background: var(--warning-bg);
	color: var(--fg-strong);
	padding: 8px 14px;
	border-radius: var(--radius-lg);
	margin-bottom: 12px;
	font-size: 13.5px;
}

.conflict-banner {
	background: var(--danger-bg);
	color: var(--danger);
	font-weight: 700;
	padding: 12px 16px;
	border-radius: var(--radius-lg);
	margin-bottom: 20px;
}

.conflict-row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 13.5px;
}

.conflict-row .label {
	width: 60px;
	flex-shrink: 0;
}

.conflict-row.theirs .label { color: var(--warning); }
.conflict-row.yours .label { color: var(--primary); }

.conflict-actions {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin: 20px 0;
}


.conflict-reassurance {
	font-size: 12px;
	color: var(--fg-muted);
}

.login-intro {
	color: var(--fg-faint);
	font-size: 12.5px;
	margin-bottom: 24px;
}

.login-card label {
	color: var(--fg-muted);
	font-weight: 400;
	width: 9ch;
	flex-shrink: 0;
}

/* The checkbox label is not a field-label column. */
.login-card .ui-choice label {
	width: auto;
}

/* ---------------------------------------------------------------
   Responsive: < 900px sidebar becomes a drawer, app-bar labels collapse
   --------------------------------------------------------------- */

@media (max-width: 899px) {
	body.shell.shell-public {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: calc(56px + env(safe-area-inset-top)) 1fr;
		grid-template-areas: "topbar" "main";
	}

	.shell-public .sidebar {
		top: calc(56px + env(safe-area-inset-top));
		background: var(--surface);
	}

	.shell-public .sidebar.open {
		box-shadow: 8px 0 24px #0003;
	}

	#public-sidebar-toggle {
		display: inline-flex;
	}

	.shell-public .toc-inline.has-headings {
		display: block;
	}

	body.shell {
		grid-template-columns: 1fr;
		grid-template-rows: calc(44px + env(safe-area-inset-top)) 1fr calc(36px + env(safe-area-inset-bottom));
		grid-template-areas:
			"topbar"
			"main"
			"statusline";
	}

	.sidebar {
		position: fixed;
		top: calc(44px + env(safe-area-inset-top));
		left: 0;
		bottom: 0;
		width: 260px;
		z-index: 900;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
	}

	.sidebar.open {
		transform: translateX(0);
	}

	.app-topbar {
		padding: env(safe-area-inset-top) 12px 0;
	}

	.breadcrumb-history {
		display: inline;
	}

	.app-topbar button,
	.app-topbar .topbar-action {
		min-width: 44px;
		min-height: 44px;
	}

	.topbar-action span:last-child {
		display: none;
	}


	.content-col,
	.editor-col {
		padding: 24px 20px;
	}

	.page-title {
		font-size: 22px;
	}

	.toc-rail {
		display: none !important;
	}

	.statusline {
		height: calc(36px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		font-size: 13px;
	}

	.statusline .seg:not(.seg-mode):not(.seg-sync):not(.seg-word-count):not(.seg-right) {
		display: none;
	}

	.statusline .seg {
		padding: 0.2rem 0.25rem;
		font-size: 12px;
	}

	.seg-context {
		display: none;
	}

}

@media (min-width: 900px) and (max-width: 1199px) {
	.toc-rail {
		display: none !important;
	}

	.toc-inline.has-headings {
		display: block;
	}
}

/* ---------------------------------------------------------------
   Settings page
   --------------------------------------------------------------- */




.settings-note {
	color: var(--fg-muted);
	font-size: 0.85rem;
	margin: 0.25rem 0 0.75rem;
}

.settings-error {
	background: color-mix(in srgb, var(--danger) 15%, var(--bg));
	color: var(--danger);
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-lg);
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.settings-row select {
	background: var(--bg);
	border: var(--field-border-w) solid var(--border-visible);
	color: var(--fg-strong);
	border-radius: var(--radius);
	padding: 2px 4px;
	font-family: inherit;
	font-size: inherit;
}

.settings-row .token-meta {
	color: var(--fg-muted);
	font-size: 0.85rem;
	flex: 1 1 auto;
	min-width: max-content;
}

.settings-row.user-row {
	flex-wrap: wrap;
	padding: 0.6rem 0;
}

.user-row .scope-checks {
	flex: 1 1 auto;
}

.user-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-inline-start: auto;
}

.scope-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	flex: 1;
}

.scope-check {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-width: 0;
	color: var(--fg-strong);
	font-weight: 400;
}

.scope-check input {
	flex: none;
}

.settings-form {
	max-width: 48rem;
	margin-bottom: 1.5rem;
}

/* OAuth: readable consent, compact client records and explicit danger actions. */
.oauth-page { max-width: 56rem; min-width: 0; }
.oauth-consent { max-width: 44rem; }
.oauth-heading { margin-bottom: 1.75rem; }
.oauth-heading p { color: var(--fg-muted); margin: 0.5rem 0 0; }
.oauth-heading strong { color: var(--fg-strong); overflow-wrap: anywhere; }
.oauth-page h2 { font-size: 1.05rem; margin: 0; }
.oauth-page h3 { font-size: 1rem; margin: 0; }
.oauth-eyebrow { color: var(--fg-muted); font-size: 0.8rem; margin: 0 0 0.5rem; }
.oauth-panel, #oauth-register { border: var(--border-w) solid var(--border-visible); padding: 1.25rem; margin-bottom: 1.25rem; border-radius: var(--radius-lg); min-width: 0; }
.oauth-facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.6rem 1rem; margin: 1rem 0; font-size: 0.85rem; }
.oauth-facts dt { color: var(--fg-muted); }
.oauth-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.oauth-page code { overflow-wrap: anywhere; white-space: normal; }
.oauth-help { color: var(--fg-muted); font-size: 0.8rem; line-height: 1.6; }
.oauth-page p.oauth-help { margin: 0.5rem 0; }
.oauth-details { border-top: var(--border-w) solid var(--chrome-border); margin-top: 1rem; padding-top: 0.8rem; font-size: 0.85rem; }
.oauth-page summary { cursor: pointer; color: var(--fg-strong); padding: 0.25rem 0; }
.oauth-page summary:hover { color: var(--primary); }
.oauth-register > summary { font-weight: 600; }
.oauth-register > summary .oauth-help { display: inline-block; font-weight: 400; margin-left: 0.75rem; }
.oauth-form { margin-top: 1.25rem; }
.oauth-field { display: grid; gap: 0.4rem; margin-bottom: 1.25rem; min-width: 0; }
.oauth-field > label { color: var(--fg-strong); font-size: 0.85rem; }
.oauth-field input, .oauth-field textarea, .oauth-field select {
	width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
	background: var(--bg); color: var(--fg-strong); font: inherit; font-size: 0.85rem;
	border: var(--border-w) solid var(--border-visible); border-radius: var(--radius);
	padding: 0.65rem 0.75rem;
}
.oauth-field textarea { resize: vertical; line-height: 1.6; }
.oauth-field input[readonly] { font-size: 0.8rem; }
.oauth-copy-field { display: flex; gap: 0.5rem; min-width: 0; }
.oauth-copy-field input { flex: 1; }
.oauth-copy-field button { flex-shrink: 0; }
.oauth-fieldset { border: 0; padding: 0; margin: 1.75rem 0; min-width: 0; }
.oauth-fieldset legend { color: var(--fg-strong); font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.oauth-choice {
	display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem;
	margin-top: 0.6rem; border: var(--border-w) solid var(--border-visible); border-radius: var(--radius);
	cursor: pointer; min-width: 0;
}
.oauth-choice:has(input:checked) { border-color: var(--primary-muted); background: color-mix(in srgb, var(--primary) 5%, var(--bg)); }
.oauth-choice > span { min-width: 0; }
.oauth-choice strong { display: block; font-size: 0.85rem; font-weight: 600; color: var(--fg-strong); }
.oauth-choice small { display: block; font-size: 0.8rem; color: var(--fg-muted); line-height: 1.6; margin-top: 0.2rem; }
.oauth-choice input, .oauth-namespace input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0.2rem 0 0; accent-color: var(--primary); }
.oauth-namespaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.25rem 1rem; max-height: 16rem; overflow-y: auto; padding: 0.6rem 1rem; border-left: 2px solid var(--primary-muted); margin: 0.5rem 0 0.75rem 1.5rem; }
.oauth-namespace { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.4rem 0; font-size: 0.85rem; cursor: pointer; overflow-wrap: anywhere; min-width: 0; }
.oauth-namespace span { min-width: 0; }
.oauth-scope-options { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.oauth-notice { padding: 0.9rem 1rem; background: color-mix(in srgb, var(--primary) 6%, var(--bg)); font-size: 0.85rem; overflow-wrap: anywhere; }
.oauth-validation { font-size: 0.8rem; color: var(--fg-muted); margin: 0.8rem 0; }
.oauth-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.oauth-consent-footer { border-top: var(--border-w) solid var(--chrome-border); padding-top: 1rem; }
.oauth-section-heading, .oauth-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.oauth-section-heading { margin: 2rem 0 1rem; }
.oauth-count { color: var(--fg-muted); font-size: 0.8rem; margin-left: 0.4rem; font-weight: 400; }
.oauth-card-heading h2, .oauth-card-heading h3 { overflow-wrap: anywhere; flex: 1; min-width: 0; }
.oauth-status { display: inline-block; font-size: 0.7rem; color: var(--fg-muted); border: var(--border-w) solid var(--border-visible); border-radius: var(--radius); padding: 0.2rem 0.5rem; }
.oauth-status-active { color: var(--primary); border-color: var(--primary-muted); }
.oauth-tag { display: inline-block; border: var(--border-w) solid var(--chrome-border); padding: 0 0.4rem; font-size: 0.8rem; }
.oauth-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; border-top: var(--border-w) solid var(--chrome-border); margin-top: 1rem; padding-top: 1rem; }
.oauth-card-footer .oauth-help { flex: 1 1 15rem; }
.oauth-callbacks { padding-left: 1.25rem; margin-bottom: 0; overflow-wrap: anywhere; }
.oauth-callbacks li + li { margin-top: 0.5rem; }
.oauth-page .ui-empty { padding: 2rem 1.25rem; border: var(--border-w) dashed var(--border-visible); color: var(--fg-muted); font-size: 0.85rem; }
.oauth-page .ui-empty h2, .oauth-page .ui-empty h3 { color: var(--fg-strong); }
.oauth-page [hidden] { display: none !important; }
@media (max-width: 600px) {
	.oauth-panel, #oauth-register { padding: 1rem; }
	.oauth-facts { grid-template-columns: 1fr; gap: 0.2rem; }
	.oauth-facts dd + dt { margin-top: 0.6rem; }
	.oauth-register > summary .oauth-help { display: block; margin: 0.25rem 0 0; }
	.oauth-namespaces { grid-template-columns: minmax(0, 1fr); margin-left: 0.5rem; }
	.oauth-actions > button { flex: 1 1 auto; }
}

.settings-zone {
	max-width: 48rem;
	margin-bottom: 2.5rem;
	padding-top: 1.5rem;
	border-top: var(--border-w) solid var(--chrome-border);
}

.settings-zone:first-of-type {
	padding-top: 0;
	border-top: none;
}

.settings-zone-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--fg-strong);
	text-transform: lowercase;
	margin: 0 0 4px;
}

.settings-zone-desc {
	color: var(--fg-muted);
	font-size: 0.85rem;
	margin: 0 0 1.25rem;
}

/* The settings page's side padding below the desktop layout. The topbar's
   site name starts at the same inset, so it lines up with the content. */
body.no-sidebar { --settings-pad: 20px; }
.settings-container { width: 100%; max-width: 1200px; padding: var(--settings-pad); }
@media (max-width: 899px) {
	body.no-sidebar .app-topbar { padding-left: var(--settings-pad); }
}
.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
.settings-panels { min-width: 0; overflow-wrap: break-word; }
/* Desktop: the settings menu fills the sidebar column and the panels the reading
   column, so they line up with the wiki sidebar and page text. */
@media (min-width: 900px) {
	.settings-container { max-width: var(--shell-measure); padding: 0; }
	.settings-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 0; }
	.settings-layout > .settings-nav { padding: var(--pad) calc(var(--pad) / 2); }
	.settings-panels { max-width: calc(var(--prose-measure) + var(--rail-w)); padding: 40px 48px; }
}
.settings-panels > .content-col,
.settings-view-only > .content-col { padding: 0; max-width: none; }
/* Read-only mode: settings stay visible, but their controls are disabled by
   the fieldset and there is nothing to save. */
.settings-view-only { display: contents; }
.settings-view-only .settings-actions { display: none; }
.settings-view-only .tree-order-item,
.settings-view-only .tree-order-handle { cursor: default; }
.settings-panels :is(.settings-zone, .settings-form) { max-width: none; }
.settings-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-self: start;
	position: sticky;
	top: 24px;
	font-size: 0.85rem;
}
.settings-nav-group { color: var(--fg-muted); font-size: 0.75rem; padding: 8px 10px; }
.settings-nav-group:not(:first-child) { margin-top: 12px; }
.settings-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	color: var(--fg-muted);
	border-radius: var(--radius-lg);
	text-decoration: none;
}
.settings-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.settings-nav a:hover { background: var(--surface); color: var(--fg-strong); }
.settings-nav a[aria-current="page"] { background: var(--surface); color: var(--primary); font-weight: 600; }
.settings-advanced summary { cursor: pointer; padding: 10px; color: var(--fg-muted); }
.settings-advanced a { margin-top: 4px; }
/* Namespace editor sections, nested under the namespaces link (16px icon + 8px gap). */
.settings-subnav { display: flex; flex-direction: column; margin-inline-start: 24px; border-inline-start: var(--border-w) solid var(--border); }
.settings-subnav-title { color: var(--fg-muted); font-size: 0.75rem; padding: 6px 10px 2px; overflow-wrap: anywhere; }
.settings-nav .settings-subnav a { padding: 6px 10px; }
.settings-selector { display: none; }
.settings-selector > details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 10px 12px;
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	color: var(--fg-strong);
	cursor: pointer;
	list-style: none;
}
.settings-selector > details > summary::-webkit-details-marker { display: none; }
.settings-selector > details[open] > summary .settings-icon { transform: rotate(180deg); }
.settings-selector > details > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 899px) {
	.settings-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.settings-layout > .settings-nav { display: none; }
	.settings-selector { display: block; min-width: 0; }
	.settings-mobile-nav {
		position: static;
		margin-top: 8px;
		padding: 8px;
		border: var(--border-w) solid var(--chrome-border);
		border-radius: var(--radius-lg);
		background: var(--surface);
		max-height: 60vh;
		overflow-y: auto;
	}
	.settings-mobile-nav a { min-height: 44px; }
	.settings-panels .settings-row select { max-width: 100%; }
	.settings-panels .settings-actions { flex-wrap: wrap; }
}

.settings-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
	border-bottom: var(--border-w) solid var(--chrome-border);
}

.settings-tab {
	background: none;
	border: none;
	color: var(--fg-muted);
	font-family: inherit;
	font-size: 0.85rem;
	text-transform: lowercase;
	padding: 0.5rem 0.75rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

.settings-tab:hover {
	color: var(--fg-strong);
}

.settings-tab.active {
	color: var(--primary);
	border-bottom-color: var(--primary);
}

.settings-section {
	min-width: 0;
	border: var(--border-w) solid var(--border-visible);
	border-radius: var(--radius-lg);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.settings-section legend {
	color: var(--primary);
	font-weight: 400;
	padding: 0 0.5rem;
	text-transform: lowercase;
}

.settings-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.4rem 0;
}

/* Every setting and group is linkable by its key, e.g. #git.token. */
.settings-anchor {
	scroll-margin-top: 4rem;
}

.settings-anchor:target {
	outline: 1px solid var(--primary);
	outline-offset: 0.25rem;
}

.settings-inline-form {
	display: contents;
}

.settings-row label {
	color: var(--primary);
	font-weight: 400;
	margin: 0;
}

/* Field labels share one column so every control in a section starts at the
   same edge; long labels wrap rather than push their control along. */
.settings-row label:not(.scope-check),
.settings-row .settings-row-label {
	flex: 0 0 var(--settings-label-w);
	color: var(--primary);
	overflow-wrap: anywhere;
}

/* A row without an info icon keeps its control on the same edge as rows with one. */
@media (min-width: 900px) {
	.settings-row label:not(.scope-check):not(:has(+ .ui-info)),
	.settings-row .settings-row-label:not(:has(+ .ui-info)) {
		flex-basis: calc(var(--settings-label-w) + var(--settings-info-slot));
	}
}

.settings-row input {
	background: none;
	border: none;
	border-bottom: var(--field-border-w) solid var(--border-visible);
	color: var(--fg-strong);
	border-radius: 0;
	padding: 2px 0;
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: inherit;
}

.settings-row input[type="checkbox"] {
	/* The general input rule makes controls flex: 1, which turns a checkbox
	   into a wide, confusing click target. Keep native toggles compact. */
	flex: 0 0 auto;
	min-width: 1rem;
	width: 1rem;
	accent-color: var(--primary);
}

.settings-row input:focus {
	border-bottom-color: var(--primary);
}

.settings-row input[readonly] {
	color: var(--fg-muted);
}

.badge-env {
	font-size: 0.75rem;
	color: var(--fg-muted);
	white-space: nowrap;
}

.badge-restart {
	font-size: 0.75rem;
	color: var(--warning);
	white-space: nowrap;
}

.settings-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

/* Namespace editor: one bordered block per namespace, since each is its own
   form with its own save and its own widget picker. */
.namespace-form {
	max-width: 48rem;
	margin-bottom: 1rem;
}

.export-link-row {
	display: grid;
	gap: 0.5rem;
	margin: 0.75rem 0;
}

.export-link-row label {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem;
	color: var(--primary);
}

.export-link-row .ui-field__label {
	display: block;
	flex: 0 0 6.5rem;
}

.export-link-row input,
.export-link-row select {
	min-width: 0;
	width: 100%;
	flex: 1 1 0;
	background: none;
	color: var(--fg-strong);
	font: inherit;
	border: none;
	border-bottom: var(--field-border-w) solid var(--border-visible);
}

.export-link-row .export-link-checkbox {
	display: flex;
}

.export-link-checkbox input[type="checkbox"] {
	width: 1rem;
	flex: 0 0 auto;
}

.export-link-remove {
	justify-self: start;
}

.namespace-form .settings-actions {
	flex-wrap: wrap;
}

.export-bot-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.export-bot-options .scope-check {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.namespace-head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.namespace-head h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--fg-strong);
	margin: 0;
}

.namespace-head .scope-check {
	margin-left: auto;
}

.badge-default {
	font-size: 0.75rem;
	color: var(--fg-faint);
}

.namespace-actions {
	justify-content: flex-end;
}

.widget-picker {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0.25rem 0 0.75rem;
}

.widget-group {
	display: grid;
	grid-template-columns: calc(var(--settings-label-w) + var(--settings-info-slot)) minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem;
}

.widget-slot {
	font-size: 0.75rem;
	color: var(--fg-faint);
}

.widget-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.new-page-fields {
	margin-bottom: 0.5rem;
}

/* Content that belongs to the control column, such as lists of sub-items. */
.settings-inset {
	margin-inline-start: var(--settings-control-inset);
}

.settings-inset-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 0.75rem;
}

.new-page-fields .settings-note {
	margin-bottom: 0;
}

.settings-actions-sticky {
	position: sticky;
	bottom: 0;
	background: var(--bg);
	padding: 0.75rem 0;
	margin-top: 0;
	z-index: 1;
}

.theme-colours {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.5rem;
}

.colour-pick {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.colour-pick .colour-name {
	color: var(--fg-muted);
	min-width: 5rem;
	font-size: 0.85rem;
}

.colour-pick input[type="color"] {
	width: 2.5rem;
	height: 1.5rem;
	border: var(--border-w) solid var(--border-strong);
	border-radius: 3px;
	background: none;
	cursor: pointer;
	padding: 0;
}

@media (max-width: 899px) {
	/* The label and its info icon share the first line; the control wraps below. */
	.settings-row label:not(.scope-check),
	.settings-row .settings-row-label {
		flex: 1 1 calc(100% - 2rem);
	}

	.settings-row .ui-choice:has(> input) {
		flex: 1 1 100%;
		flex-wrap: wrap;
	}

	/* A list row puts its name on its own line, with details and actions below. */
	.namespace-row > .settings-row-label {
		flex-basis: 100%;
	}

	.widget-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}

	.published-preview,
	.tree-order-editor,
	.settings-inset {
		margin-left: 0;
	}

	.settings-row input:not([type="checkbox"], [type="radio"]),
	.settings-row select {
		flex: 1 1 auto;
		min-width: 0;
	}

	.theme-colours {
		grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	}
}

.setup-page {
	max-width: 48rem;
}

.setup-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.setup-modal {
	max-width: 48rem;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--surface);
	border: var(--border-w) solid var(--border-strong);
	border-radius: var(--radius-lg);
	padding: 2rem;
}

.setup-modal h1 {
	margin-bottom: 0.5rem;
}

.setup-modal > p {
	font-size: 14px;
	color: var(--fg-muted);
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

.setup-item {
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius);
	background: var(--surface);
	margin: 0.75rem 0;
	overflow: hidden;
}

.setup-item-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border-bottom: var(--border-w) solid var(--chrome-border);
}

.setup-item-title {
	font-weight: 700;
	color: var(--fg-strong);
}

.setup-item-file {
	font-size: 12px;
	color: var(--fg-muted);
	background: var(--bg);
	padding: 1px 6px;
	border-radius: 3px;
	border: var(--border-w) solid var(--chrome-border);
}

.setup-item-input {
	font-size: 12px;
	font-family: var(--font-mono);
	color: var(--fg-strong);
	background: var(--bg);
	padding: 1px 6px;
	border-radius: 3px;
	border: var(--field-border-w) solid var(--border-visible);
	width: 12ch;
}

.setup-badge {
	font-size: 11px;
	color: var(--warning);
	border: var(--border-w) solid var(--warning);
	padding: 0 5px;
	border-radius: 3px;
	line-height: 1.6;
}

.setup-item-desc {
	font-size: 13.5px;
	color: var(--fg-muted);
	padding: 0.75rem 1rem 0;
	line-height: 1.55;
}

.setup-item-desc code {
	font-size: 12px;
	color: var(--fg-faint);
	background: var(--bg);
	padding: 1px 5px;
	border-radius: 3px;
	border: var(--border-w) solid var(--chrome-border);
}

.setup-preview {
	border-top: var(--border-w) solid var(--chrome-border);
}

.setup-preview > summary {
	cursor: pointer;
	padding: 0.5rem 1rem;
	font-size: 12.5px;
	color: var(--fg-faint);
	list-style: none;
	user-select: none;
}

.setup-preview > summary::before {
	content: "▸ ";
	color: var(--primary);
}

.setup-preview[open] > summary::before {
	content: "▾ ";
}

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

.setup-preview-body {
	padding: 0 1rem 1rem;
	font-size: 14px;
	border-top: var(--border-w) solid var(--chrome-border);
	padding-top: 0.75rem;
}

.setup-preview-body h1 {
	font-size: 1.1rem;
}

.setup-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.setup-actions .primary {
	display: inline-block;
	background: var(--primary);
	color: var(--accent-fg);
	border: var(--border-w) solid var(--primary);
	border-radius: 3px;
	padding: 0.4rem 1rem;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.setup-actions .primary:hover {
	filter: brightness(1.1);
}


/* Breadcrumb navigation */
.breadcrumb {
	font-size: 12px;
	color: var(--fg-faint);
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.breadcrumb a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
}

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

.breadcrumb .sep {
	color: var(--border-strong);
}

.breadcrumb .current {
	color: var(--fg);
}

.breadcrumb .tag {
	color: var(--primary);
}

.breadcrumb .dirty {
	color: var(--warning);
}

.pin-glyph {
	color: var(--primary);
}


/* Tag chips */
.tag-chips {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin-bottom: 1rem;
}

.tag-chips li {
	padding: 0;
}

.tag-chips a {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	color: var(--primary);
	border: var(--border-w) solid var(--primary);
	border-radius: 999px;
	padding: 1px 9px;
	text-decoration: none;
	transition: background 0.2s;
}

.tag-chips a:hover {
	background: var(--surface-raised);
}

.tag-chips .count {
	margin-left: 0.3rem;
	color: var(--fg-faint);
}

.tag-chips .all-link {
	border-style: dashed;
	color: var(--fg-faint);
}

/* Log section in sidebar */
.sidebar-log {
	margin-bottom: 1rem;
}

.sidebar-log summary {
	font-size: 12px;
	color: var(--fg-faint);
	font-weight: 600;
	margin-bottom: 0.5rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.sidebar-log summary::-webkit-details-marker {
	display: none;
}

.sidebar-log summary::before {
	content: "▸ ";
	color: var(--primary);
}

.sidebar-log details[open] summary::before {
	content: "▾ ";
}

.log-entry {
	font-size: 12px;
	margin-bottom: 0.5rem;
}

.log-entry a {
	color: var(--fg-muted);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

.log-entry a:hover {
	color: var(--fg-strong);
}

.log-entry .age {
	color: var(--warning);
	font-weight: 700;
}

/* Health link in sidebar hints: a fixed-width label whose colour signals
   status. The full missing/orphan breakdown is in the title tooltip. */
.health-hint.has-missing {
	color: var(--danger);
}

.health-hint.has-orphans {
	color: var(--warning);
}

/* Draft dot indicator */
.draft-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--warning);
	margin-right: 0.5rem;
	flex-shrink: 0;
}

/* Preview card for wiki links */
.preview-card {
	position: absolute;
	width: 340px;
	background: var(--surface);
	border: var(--border-w) solid var(--border-strong);
	border-radius: var(--radius-lg);
	padding: 12px 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	z-index: 10;
	font-size: 13px;
	pointer-events: none;
}

.preview-card h3 {
	color: var(--fg-strong);
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	font-size: 13px;
}

.preview-card .snippet {
	color: var(--fg-muted);
	font-size: 12.5px;
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

.preview-card .meta {
	color: var(--fg-faint);
	font-size: 11px;
}

/* Backlinks footer */
.backlinks-footer {
	margin-top: 48px;
	padding-top: 16px;
	border-top: var(--border-w) solid var(--chrome-border);
}

.backlinks-label {
	font-size: 12px;
	color: var(--fg-muted);
	margin-bottom: 1rem;
}

.backlinks-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

.backlinks-row a {
	color: var(--accent);
	text-decoration: none;
}

.backlinks-row a:hover {
	text-decoration: underline;
}

.widget-checklist {
	display: flex;
	flex-direction: column;
}

.widget-check-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 10px 0;
	border-bottom: var(--border-w) solid var(--chrome-border);
}

.widget-check-row:last-child {
	border-bottom: none;
}

.widget-check {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 6px;
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--fg-muted);
}

.widget-check input[type="checkbox"] {
	grid-row: 1;
	margin: 3px 0 0;
}

.widget-check-name {
	grid-row: 1;
}

.widget-check-title {
	color: var(--fg-muted);
	font-size: 11px;
}

.widget-check-desc {
	grid-column: 2;
	color: var(--fg-muted);
	font-size: 12px;
	margin-top: 2px;
}

.widget-preview,
.widget-preview-note {
	flex: 0 0 200px;
	max-width: 200px;
}

.widget-preview {
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius-lg);
	padding: 10px;
	max-height: 150px;
	overflow: hidden;
	pointer-events: none;
	font-size: 12px;
}

/* .widget-preview reuses .sidebar for its cosmetics (h2/section spacing,
   prompt colours), but .sidebar also carries the real sidebar's
   positioning, including the off-canvas drawer transform under 900px.
   Two classes beats one, so this wins regardless of viewport width. */
.widget-preview.sidebar {
	position: static;
	inset: auto;
	width: auto;
	z-index: auto;
	transform: none;
	transition: none;
	border-right: none;
}

.widget-preview .sidebar-section {
	margin-bottom: 0;
}

.widget-preview-note {
	color: var(--fg-faint);
	font-size: 12px;
	font-style: italic;
	align-self: center;
}

/* Skin and palette pickers: radio cards. The radio itself is hidden; the
   card is the control, and .selected is kept in step by the settings script. */
.skin-picker,
.palette-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px;
}

.skin-card,
.palette-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--pad-tight);
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius);
	background: var(--surface);
	cursor: pointer;
}

.skin-card:hover,
.palette-card:hover {
	border-color: var(--border-strong);
}

.skin-card.selected,
.palette-card.selected {
	border-color: var(--primary);
	background: var(--surface-raised);
	outline: 1px solid var(--primary);
	outline-offset: calc(var(--border-w) * -1);
}

.skin-card input,
.palette-card input {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.skin-card-name,
.palette-card-name {
	color: var(--fg-strong);
	font-size: 13px;
}

.skin-card-note {
	color: var(--fg-muted);
	font-size: 11.5px;
	line-height: 1.5;
}

.palette-swatches {
	display: flex;
	gap: 3px;
}

.palette-swatch {
	width: 22px;
	height: 14px;
	border: var(--border-w) solid var(--border-visible);
	border-radius: 2px;
}

.page-meta-inline {
	font-size: 12px;
	color: var(--fg-faint);
}

/* Calendar widget (journal profile) */
.cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.cal-dow {
	font-size: 10px;
	color: var(--fg-muted);
	text-align: center;
	padding-bottom: 2px;
}

.cal-day {
	display: block;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--fg-muted);
	text-decoration: none;
	border-radius: var(--radius);
}

.cal-day-blank {
	visibility: hidden;
}

.cal-day:hover {
	background: var(--surface-raised);
}

.cal-day.lit {
	color: var(--accent-fg);
	background: var(--primary-muted);
}

.cal-day.today {
	border: var(--border-w) solid var(--primary);
}

/* Writing-stats widget (journal profile) */
.sidebar-writing-stats .stat-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--fg-muted);
	margin-bottom: 2px;
}

.sidebar-writing-stats .stat-value {
	color: var(--fg-strong);
}

.spark {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 20px;
	margin-top: 8px;
}

.spark-bar {
	flex: 1;
	height: calc(4px + var(--v, 0) * 1px);
	max-height: 20px;
	background: var(--primary-muted);
	border-radius: 1px;
}

/* Inbox widget (opt-in; no skin mounts it by default) */
.inbox-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.inbox-list li a {
	display: block;
	padding: 4px 8px;
	margin: 0 -8px;
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 3px;
}

.inbox-list li a:hover {
	color: var(--fg-strong);
}

.inbox-meta {
	margin-left: 6px;
	font-size: 11px;
	color: var(--fg-faint);
}

/* Sources widget (opt-in; no skin mounts it by default) */
.src-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.src-list li {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--fg-muted);
	padding: 2px 0;
}

.src-list .count {
	color: var(--fg-muted);
}

/* Source-card widget (opt-in, page-head) */
.source-card {
	margin-bottom: 24px;
	padding: 10px 12px;
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.source-card-url {
	color: var(--accent);
	text-decoration: none;
	font-size: 12.5px;
	word-break: break-all;
}

.source-card-url:hover {
	text-decoration: underline;
}

.source-card-meta {
	display: flex;
	gap: 10px;
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--fg-faint);
}

.source-card-unread {
	color: var(--warning);
}

/* Prev-entries widget (journal profile, page-foot) */
.prev-entries {
	margin-top: 48px;
	padding-top: 16px;
	border-top: var(--border-w) solid var(--chrome-border);
}

.prev-entries-label {
	font-size: 12px;
	color: var(--fg-faint);
	margin-bottom: 1rem;
}

.prev-entry {
	font-size: 13px;
	color: var(--fg-muted);
	margin-bottom: 6px;
}

.prev-entry a {
	color: var(--accent);
	text-decoration: none;
	margin-right: 6px;
}

.prev-entry a:hover {
	text-decoration: underline;
}

/* History page checkboxes and diff */
.history-rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: var(--border-w) solid var(--chrome-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.history-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-bottom: var(--border-w) solid var(--chrome-border);
}

/* The revert form's button sits in the row's flex line. */
.history-row .js-revert {
	display: contents;
}

.history-row:last-child {
	border-bottom: none;
}

.history-row.current {
	background: var(--surface-raised);
}

.history-row:first-child {
	background: var(--surface-raised);
}

.history-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	flex-shrink: 0;
}

.history-row .hash {
	color: var(--accent);
	font-weight: 700;
	flex-shrink: 0;
}

.history-row .message {
	color: var(--fg-strong);
	flex: 1;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
}

.history-row .author,
.history-row .date {
	color: var(--fg-faint);
	font-size: 12px;
}

@media (max-width: 700px) {
	.history-row {
		flex-wrap: wrap;
	}

	.history-row .message {
		flex: 1 1 100%;
		order: 1;
	}

	.history-row .author,
	.history-row .date,
	.history-row .view-link,
	.history-row .revert-link,
	.history-row .current-marker {
		order: 2;
	}
}

.history-row .view-link,
.history-row .revert-link,
.history-row .current-marker {
	font-size: 12px;
	flex-shrink: 0;
}

.history-row .current-marker {
	color: var(--primary);
}

.history-row .view-link,
.history-row .revert-link {
	color: var(--accent);
	text-decoration: none;
	cursor: pointer;
}

.history-row .view-link:hover,
.history-row .revert-link:hover {
	text-decoration: underline;
}

/* Diff selector and panel */
.diff-selector {
	margin-top: 1rem;
	font-size: 12px;
	color: var(--fg-muted);
}

.diff-selector span {
	color: var(--fg-strong);
	font-family: var(--font-mono);
}

.diff-panel {
	margin-top: 1rem;
}

.diff-header {
	background: var(--surface-raised);
	padding: 0.5rem;
	font-size: 12px;
	color: var(--accent);
	border-bottom: var(--border-w) solid var(--chrome-border);
}

.diff-body {
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.7;
	max-height: 400px;
	overflow-y: auto;
}

.diff-body pre {
	margin: 0;
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
}

.diff-line {
	padding: 0 0.75rem;
	display: block;
	white-space: pre-wrap;
	word-break: break-word;
}

.diff-context {
	color: var(--fg-muted);
}

.diff-add {
	background: var(--primary-muted);
	color: var(--primary);
}

.diff-delete {
	background: var(--danger-bg);
	color: var(--danger);
}

/* Palette verb mode */
.palette-row.palette-verb {
	flex-direction: column;
	align-items: flex-start;
}

.palette-row .verb-desc {
	font-size: 11px;
	color: var(--fg-muted);
	margin-top: 0.25rem;
}

/* Mobile responsive adjustments */
@media (max-width: 899px) {
	.breadcrumb {
		font-size: 11px;
		gap: 0.25rem;
	}

	.breadcrumb-site,
	.breadcrumb-site + .sep {
		display: none;
	}

	.breadcrumb .tag,
	.breadcrumb .current {
		font-size: 11px;
	}

	.sidebar {
		width: 280px;
	}

	.tag-chips {
		gap: 4px;
	}

	.tag-chips a {
		font-size: 11px;
		padding: 0px 7px;
	}

	.sidebar-log {
		margin-bottom: 0.75rem;
	}

	.log-entry {
		font-size: 11px;
	}

	/* Tap targets: 44px minimum for anything interactive. */
	.history-row input[type="checkbox"],
	.rev-checkbox,
	.scope-check input {
		min-height: 44px;
		min-width: 44px;
	}

	.statusline .link-btn,
	.toc-inline summary,
	.history-row .view-link,
	.history-row .revert-link {
		min-height: 44px;
		padding-block: 12px;
		display: inline-flex;
		align-items: center;
	}
}

.sidebar-list li {
	display: flex;
	gap: 6px;
	align-items: center;
}

.settings-status {
	font-size: 12px;
	color: var(--fg-faint);
	margin-top: 1rem;
}

.settings-status .state-ok {
	color: var(--primary);
}

.settings-status .state-pending {
	color: var(--warning);
}

.settings-status .state-failed {
	color: var(--danger);
}

/* Keeps Save and Discard together when the notice wraps. */
.ui-notice__actions { display: inline-flex; gap: 0.5rem; white-space: nowrap; vertical-align: middle; }