/* GENERATED from design/_courier.css by scripts/css-from-mockup.py.
   Do not edit. Change the mock-up and run `npm run design`.

   The design tokens are NOT here: they are served per theme from
   /theme/<key>.css, so this file is the rules only. */

/* ============================================================================
   Courier — tokens and every rule.

   This file is the specification. When the app is built, its stylesheet and
   theme tokens are GENERATED from this file and _palettes.css, minus the
   palette blocks and everything below the RIG marker. The generated files are
   never hand-edited.

   The governing idea: the mail is the content. The chrome is quiet, the
   grounds sit within a few percent of each other, and the accent marks only
   what needs finding: the Write button, unread mail, the open folder and the
   open message. A mail client that shouts is one you stop wanting to open.

   Every text token clears 7:1 on every ground token, in both modes, in all
   three themes. python3 _contrast.py is the gate.
   ========================================================================== */



/* ============================================================================
   Base
   ========================================================================== */

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

/* `hidden` loses to any component rule that sets display, so settle it once. */
[hidden] { display: none !important; }

html { color-scheme: light; -webkit-text-size-adjust: 100%; }
html.dark { color-scheme: dark; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

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

textarea, select,
input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="url"]) {
	width: 100%;
	font-size: .95rem;
	color: var(--text);
	background: var(--bg-card);
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-sm);
	padding: .5rem .65rem;
}
textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }

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

:where(a, button, input, textarea, select, summary, label[tabindex], [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: .5rem; top: -3rem; z-index: 200;
	padding: .5rem .85rem;
	background: var(--accent); color: var(--on-accent);
	border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .5rem; }

.icon { width: 18px; height: 18px; flex: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	min-height: 2.375rem;
	padding: .4rem .95rem;
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-sm);
	background: var(--bg-card);
	color: var(--text);
	font-size: .9rem; font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.btn:hover { background: var(--bg-sunken); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-quiet { border-color: transparent; background: transparent; }
.btn-danger { color: var(--danger); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.icon-btn {
	display: inline-grid; place-items: center;
	width: 2.375rem; height: 2.375rem;
	border: 0; border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	text-decoration: none;
	flex: none;
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--text); }
.icon-btn[aria-pressed="true"] { color: var(--accent); }

/* ============================================================================
   The shell: side rail, list pane, reading pane

   Wide (72rem+):   side | list | reading
   Medium (48rem+): side | list, and the reading pane replaces the list
   Narrow:          the list, with the side as a drawer; reading is its own page
   ========================================================================== */

.app { min-height: 100dvh; }

@media (width >= 48rem) {
	.app {
		display: grid;
		grid-template-columns: var(--side-width) minmax(0, 1fr);
		height: 100dvh;
	}
}

/* ── Side rail ──────────────────────────────────────────────────────────── */

.side {
	display: flex; flex-direction: column; gap: 1rem;
	padding: 1rem .75rem;
	background: var(--bg-side);
	border-right: 1px solid var(--border);
	overflow-y: auto;
}

.brand {
	display: flex; align-items: center; gap: .6rem;
	padding: .15rem .35rem;
	color: var(--text); text-decoration: none;
}
.brand-mark { width: 40px; height: auto; flex: none; }   /* the envelope is 580 by 355 */
.brand-name { display: grid; line-height: 1.15; }
.brand-name strong { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.brand-name span { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; }

.write-btn { width: 100%; min-height: 2.75rem; font-size: .95rem; border-radius: var(--radius-md); }

/* The drawer on narrow screens: a checkbox, so it opens without script. The
   checkbox itself takes focus and the visible button shows the ring, so the
   drawer opens from the keyboard too. */
.nav-toggle { position: absolute; top: .5rem; left: .5rem; width: 1px; height: 1px; opacity: 0; }
.nav-toggle:focus-visible ~ .app .menu-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (width >= 48rem) { .nav-toggle { display: none; } }
.side-scrim { display: none; }

@media (width < 48rem) {
	.side {
		position: fixed; inset: 0 auto 0 0; z-index: 60;
		width: min(18rem, 86vw);
		transform: translateX(-100%);
		transition: transform .2s ease;
		box-shadow: var(--shadow);
	}
	.nav-toggle:checked ~ .app .side { transform: none; }
	.nav-toggle:checked ~ .app .side-scrim {
		display: block; position: fixed; inset: 0; z-index: 50; background: var(--scrim);
	}
}

/* ── Mailbox switcher ───────────────────────────────────────────────────── */

.switcher { position: relative; }
.switcher > summary {
	display: flex; align-items: center; gap: .6rem;
	padding: .55rem .65rem;
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	cursor: pointer;
	list-style: none;
}
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary:hover { background: var(--bg-sunken); }
.switcher-text { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.switcher-text strong { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-text span { font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher .chevron { color: var(--text-muted); transition: transform .15s ease; }
.switcher[open] .chevron { transform: rotate(180deg); }

.menu-list {
	position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + .35rem);
	display: grid;
	padding: .35rem;
	background: var(--bg-card);
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow);
}
.menu-list hr { border: 0; border-top: 1px solid var(--border); margin: .3rem .25rem; }
.menu-item {
	display: flex; align-items: center; gap: .6rem;
	padding: .5rem .6rem;
	border: 0; border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text); text-decoration: none; text-align: left;
	font-size: .9rem;
	cursor: pointer;
}
.menu-item:hover { background: var(--bg-sunken); }
.menu-item[aria-current="true"] { background: var(--bg-selected); font-weight: 600; }
.menu-item .address { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item .count { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.menu-item.is-muted { color: var(--text-muted); }

.dot {
	width: .625rem; height: .625rem; flex: none;
	border-radius: 50%;
	background: var(--dot, var(--dot-grey));
}
.dot-all {
	background: conic-gradient(var(--dot-blue) 0 33%, var(--dot-green) 0 66%, var(--dot-amber) 0);
}

/* ── Folders ────────────────────────────────────────────────────────────── */

.folders { display: grid; gap: 1px; }
.folder {
	display: flex; align-items: center; gap: .7rem;
	padding: .5rem .65rem;
	border-radius: var(--radius-sm);
	color: var(--text); text-decoration: none;
	font-size: .925rem;
}
.folder .icon { color: var(--text-muted); }
.folder:hover { background: var(--bg-sunken); }
.folder[aria-current="page"] { background: var(--bg-selected); font-weight: 600; }
.folder[aria-current="page"] .icon { color: var(--accent); }
.folder .label { flex: 1; }
.folder .count { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.folder[aria-current="page"] .count,
.folder .count.is-unread { color: var(--accent); }

/* ── Labels in the side rail ────────────────────────────────────────── */

/* The heading folds the list away; the + beside it stays put either way.
   Folded, the heading keeps the unread count, so nothing hides silently. */
.side-labels { position: relative; }
.labels-fold { display: grid; gap: .15rem; }
.labels-fold > .folders, .labels-fold > .side-note { margin-top: .15rem; }
.side-head {
	display: flex; align-items: center; gap: .35rem;
	min-height: 2rem;
	padding: 0 2.5rem 0 .65rem;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
	cursor: pointer; list-style: none;
}
.side-head::-webkit-details-marker { display: none; }
.side-head:hover { background: var(--bg-sunken); color: var(--text); }
.side-head .chevron { transition: transform .15s ease; transform: rotate(-90deg); }
.labels-fold[open] .side-head .chevron { transform: none; }
.fold-count { margin-left: auto; color: var(--accent); }
.labels-fold[open] .fold-count { display: none; }
.side-labels > .new-label { position: absolute; top: 0; right: 0; }
.new-label > .icon-btn { width: 2rem; height: 2rem; }
.dot-slot { display: grid; place-items: center; width: 18px; flex: none; }
.side-note { margin: 0; padding: .3rem .65rem; font-size: var(--text-sm); color: var(--text-muted); }
a.side-manage { color: var(--accent); text-decoration: none; font-weight: 600; }
a.side-manage:hover { text-decoration: underline; }

.menu, .new-label { position: relative; }
:is(.menu, .new-label) > summary { list-style: none; }
:is(.menu, .new-label) > summary::-webkit-details-marker { display: none; }
.new-label-form { left: auto; right: 0; width: 14rem; display: grid; gap: .5rem; padding: .75rem; }
.new-label-form label { font-size: .875rem; font-weight: 600; }
.new-label-form .field-error, .label-list .field-error { margin: 0; }

.side-foot {
	margin-top: auto;
	display: grid; gap: 1px;
	padding-top: .75rem;
	border-top: 1px solid var(--border);
}
.side-foot form { margin: 0; }
.side-foot button.folder { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }

/* ============================================================================
   Main area
   ========================================================================== */

.main { min-width: 0; min-height: 0; }

@media (width >= 48rem) {
	.main.mail {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		height: 100dvh;
		overflow: clip;   /* clipped, never scrolled */
	}
	.main.mail .read-pane { display: none; }
	.main.mail.is-reading .list-pane { display: none; }
	.main.mail.is-reading .read-pane { display: block; }
}
@media (width >= 72rem) {
	.main.mail { grid-template-columns: var(--list-width) minmax(0, 1fr); }
	.main.mail .read-pane { display: block; }
	.main.mail.is-reading .list-pane { display: flex; }
	.main.mail .read-pane { border-left: 1px solid var(--border); }
	.read-back { display: none !important; }
}
@media (width < 48rem) {
	.main.mail .read-pane { display: none; }
	.main.mail.is-reading .list-pane { display: none; }
	.main.mail.is-reading .read-pane { display: block; }
}

/* ── List pane ──────────────────────────────────────────────────────────── */

.list-pane {
	display: flex; flex-direction: column;
	min-height: 0; height: 100%;
	background: var(--bg-card);
}
/* No overflow of its own: the message list scrolls inside it, and a menu
   opened from its header may spill over the reading pane. A pane that hid
   its overflow was scrolled sideways by the browser when the menu's box
   took focus. */

.list-head {
	display: grid; gap: .65rem;
	padding: .85rem 1rem .75rem;
	border-bottom: 1px solid var(--border);
	background: var(--bg-card);
}
@media (width < 48rem) { .list-head { position: sticky; top: 0; z-index: 20; } }

.list-title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.list-title h1 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.list-title .context {
	display: inline-flex; align-items: center; gap: .4rem; min-width: 0;
	font-size: var(--text-sm); font-weight: 500; color: var(--text-muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-title .spacer { flex: 1; }
.menu-btn { display: none; margin-left: -.5rem; }
@media (width < 48rem) { .menu-btn { display: inline-grid; } }

.search { position: relative; margin: 0; }
.search .icon { position: absolute; left: .65rem; top: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
.search input { padding-left: 2.2rem; background: var(--bg-sunken); border-color: transparent; }
.search input:focus { background: var(--bg-card); border-color: var(--border-firm); }

.list-tools {
	display: flex; align-items: center; gap: .15rem;
	min-height: 2.375rem;
	margin: 0 -.35rem;
	font-size: var(--text-sm); color: var(--text-muted); font-weight: 500;
}
.list-tools .select-all { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; cursor: pointer; }
.list-tools .range { margin-left: auto; padding-right: .35rem; white-space: nowrap; }
.list-tools .bulk { display: none; align-items: center; gap: .1rem; }
.list-tools.has-selection .bulk { display: flex; }
.list-tools.has-selection .range { display: none; }
.list-tools .selected-count { padding: 0 .4rem; color: var(--text); font-weight: 600; }

.msg-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
/* Paging, after the last row of a page. */
.list-more { display: flex; justify-content: center; gap: .5rem; padding: 1rem; }

/* A row is two layers: the swipe panels underneath, and the row itself on
   top, which slides aside to show one of them. */
.row {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
}
.row-inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 2.5rem minmax(0, 1fr);
	background: var(--bg-card);
	touch-action: pan-y;   /* the page still scrolls; sideways is ours */
	user-select: none;
}
.row-link { -webkit-user-drag: none; }
.row:hover .row-inner { background: var(--bg-sunken); }
.row[aria-current="true"] .row-inner { background: var(--bg-selected); }
.row.is-checked .row-inner { background: var(--bg-selected); }
.row.is-settling .row-inner { transition: transform .18s ease; }

/* ── Swiping ────────────────────────────────────────────────────────────
   Swipe right shows the panel on the left, swipe left the one on the right.
   Each says what will happen, in words, and arms once the row has gone far
   enough; letting go short of that puts the row back. Moving to Trash or
   Spam is a danger fill, everything else the accent. */
.swipe-panel {
	position: absolute; inset: 0;
	display: flex; align-items: center; gap: .5rem;
	padding: 0 1.25rem;
	background: var(--accent); color: var(--on-accent);
	font-size: .9rem; font-weight: 700;
	visibility: hidden;
}
.swipe-panel.is-danger { background: var(--danger); color: var(--on-danger); }
.swipe-panel.at-end { justify-content: flex-end; }
.swipe-panel .icon { transition: transform .15s ease; }
.row.is-swiping-right .swipe-panel.at-start,
.row.is-swiping-left .swipe-panel.at-end { visibility: visible; }
.row.is-armed .swipe-panel .icon { transform: scale(1.25); }
.swipe-panel .hint { font-weight: 500; opacity: .85; }
.row.is-armed .swipe-panel .hint { display: none; }

/* What a swipe did, with Undo. Undo, not a question first: every swipe can
   be taken back. */
.toast {
	position: fixed; left: 50%; bottom: calc(var(--rig-space, 0px) + 1rem); z-index: 70;
	translate: -50% 0;
	display: flex; align-items: center; gap: 1rem;
	/* Centred by translate, so without this it would size itself in the half
	   of the screen right of centre, and wrap "Marked unread." on a phone. */
	width: max-content;
	max-width: calc(100vw - 2rem);
	padding: .65rem .65rem .65rem 1rem;
	border-radius: var(--radius-md);
	background: var(--text); color: var(--bg-card);
	box-shadow: var(--shadow);
	font-size: .9rem; font-weight: 600;
}
.toast:empty { display: none; }
.toast button {
	border: 0; background: transparent; color: inherit;
	font-weight: 700; text-decoration: underline; text-underline-offset: .15em;
	padding: .3rem .4rem; cursor: pointer;
}
@media (width < 48rem) { body:has(.toast:not(:empty)) .fab { display: none; } }

.row-check { display: grid; justify-items: center; padding-top: .9rem; cursor: pointer; }

.row-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: .75rem;
	padding: .7rem 1rem .7rem 0;
	color: var(--text); text-decoration: none;
}
.row-from {
	display: flex; align-items: center; gap: .45rem; min-width: 0;
	font-size: .925rem;
}
.row-from .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-from .n { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; }
.row-date { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; align-self: center; }
.row-subject, .row-snippet {
	grid-column: 1 / -1;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-subject { font-size: .9rem; }
.row-snippet { font-size: var(--text-sm); color: var(--text-muted); padding-right: 3.75rem; }

.row.unread .row-from .name,
.row.unread .row-subject { font-weight: 700; }
.row.unread .row-date { color: var(--accent); font-weight: 600; }
.unread-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: none; }

.row-flags {
	position: absolute; right: .5rem; bottom: .3rem;
	display: flex; align-items: center; gap: .1rem;
	color: var(--text-muted);
}
.row-flags .icon-btn { width: 2rem; height: 2rem; }
.row-flags .clip { display: grid; place-items: center; width: 1.25rem; }
.star-btn[aria-pressed="true"] { color: var(--accent); }
.star-btn[aria-pressed="true"] svg { fill: currentColor; }

/* A row's labels: their own line under the snippet, so the subject keeps
   its place at the left. One line, never wrapping; the star sits beside it. */
.row-labels {
	grid-column: 1 / -1;
	display: flex; gap: .35rem;
	min-width: 0; overflow: hidden;
	margin-top: .3rem;
	padding-right: 3.75rem;
}
.label-chip {
	display: inline-flex; align-items: center; gap: .3rem;
	flex: none; max-width: 100%;
	padding: 0 .45rem;
	border-radius: var(--radius-pill);
	background: var(--pill-bg); color: var(--pill-text);
	font-size: var(--text-sm); font-weight: 600; line-height: 1.45;
	white-space: nowrap;
}
.row.unread .label-chip { font-weight: 600; }
.label-chip .dot { width: .5rem; height: .5rem; }

.mailbox-tag {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: var(--text-sm); font-weight: 500; color: var(--text-muted);
	white-space: nowrap;
}

.row.is-broken .row-subject { font-style: italic; }

.list-more { padding: 1rem; text-align: center; }

/* ── Empty states ───────────────────────────────────────────────────────── */

.empty {
	display: grid; justify-items: center; gap: .35rem;
	padding: 3.5rem 1.5rem;
	text-align: center;
	color: var(--text-muted);
}
.empty .icon { width: 36px; height: 36px; margin-bottom: .5rem; }
.empty h2 { margin: 0; font-size: 1.05rem; color: var(--text); }
.empty p { margin: 0; max-width: 24rem; font-size: .925rem; }

/* ── Reading pane ───────────────────────────────────────────────────────── */

.read-pane { background: var(--bg); min-height: 0; overflow-y: auto; }
@media (width >= 48rem) { .read-pane { height: 100dvh; } }

.read-tools {
	position: sticky; top: 0; z-index: 10;
	display: flex; align-items: center; gap: .15rem;
	padding: .5rem .75rem;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
.read-tools .sep { width: 1px; height: 1.25rem; background: var(--border-firm); margin: 0 .35rem; }
.read-tools .spacer { flex: 1; }
@media (width < 30rem) { .read-tools .wide-only { display: none; } }

.thread { max-width: var(--read-width); margin: 0 auto; padding: 1.25rem 1rem 3rem; }
@media (width >= 48rem) { .thread { padding: 1.75rem 1.75rem 4rem; } }

.thread-head { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.thread-head h1 { margin: 0; font-size: 1.35rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.thread-pills { display: flex; flex-wrap: wrap; gap: .35rem; }

.pill {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .15rem .55rem;
	border-radius: var(--radius-pill);
	background: var(--pill-bg); color: var(--pill-text);
	font-size: var(--text-sm); font-weight: 600;
	white-space: nowrap;
}

.msg {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	margin-bottom: .6rem;
	overflow: hidden;
}

.msg-collapsed {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
	width: 100%;
	padding: .7rem 1rem;
	border: 0; background: transparent; text-align: left; cursor: pointer;
}
.msg-collapsed:hover { background: var(--bg-sunken); }
.msg-collapsed .who { font-weight: 600; font-size: .925rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-collapsed .snip { display: block; font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.msg-collapsed .when { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
/* An earlier message is a details element, so it opens without script;
   open, its one-line summary gives way to the whole message. */
.msg-fold > summary { list-style: none; }
.msg-fold > summary::-webkit-details-marker { display: none; }
.msg-fold[open] > .msg-collapsed { display: none; }

.msg-head {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start;
	padding: 1rem 1rem .75rem;
}
.avatar {
	display: grid; place-items: center;
	width: 2.25rem; height: 2.25rem;
	border-radius: 50%;
	background: var(--pill-bg); color: var(--pill-text);
	font-size: .85rem; font-weight: 700;
	flex: none;
}
.msg-who { min-width: 0; line-height: 1.35; }
.msg-who .from { font-weight: 600; overflow-wrap: anywhere; }
.msg-who .addr { color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
.msg-who .to { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.msg-when { display: flex; align-items: center; gap: .1rem; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
@media (width < 36rem) {
	/* No room for the date beside the sender: it moves under the address. */
	.msg-head { grid-template-columns: auto minmax(0, 1fr); padding-right: .5rem; }
	.msg-who .addr { display: block; }
	.msg-when { grid-column: 2; margin-top: -.35rem; }
}

.notice {
	display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
	margin: 0 1rem .75rem;
	padding: .55rem .75rem;
	border-radius: var(--radius-sm);
	background: var(--bg-sunken);
	font-size: var(--text-sm); color: var(--text-muted); font-weight: 500;
}
.notice .icon { width: 16px; height: 16px; }
.notice-text { display: flex; align-items: center; gap: .45rem; flex: 1 1 14rem; }
.notice-actions { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.notice-actions form { display: contents; }
.link-btn {
	padding: 0; border: 0; background: none;
	color: var(--accent); font: inherit; font-weight: 600;
	text-decoration: underline; text-underline-offset: .15em;
	cursor: pointer;
}
.notice.is-danger { color: var(--danger); background: var(--bg-sunken); box-shadow: inset 3px 0 0 var(--danger); }

.msg-body { padding: 0 1rem 1rem; overflow-wrap: anywhere; }
.msg-body.plain { white-space: pre-wrap; font-size: .95rem; line-height: 1.6; }
.msg-body.plain .quote { color: var(--text-muted); border-left: 2px solid var(--border-firm); padding-left: .75rem; display: block; }
.msg-body iframe {
	display: block; width: 100%; border: 0;
	border-radius: var(--radius-sm);
	background: #ffffff;   /* HTML mail assumes a white page; the frame gives it one in both modes */
}

.attachments {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .5rem;
	padding: .75rem 1rem 1rem;
	border-top: 1px solid var(--border);
}
.attachments h3 { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.attachment {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: center;
	padding: .5rem .6rem;
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-sm);
	color: var(--text); text-decoration: none;
}
.attachment:hover { background: var(--bg-sunken); }
.attachment .thumb {
	display: grid; place-items: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: 4px;
	background: var(--pill-bg); color: var(--pill-text);
	font-size: .7rem; font-weight: 700;
	overflow: hidden;
}
.attachment .thumb img { width: 100%; height: 100%; object-fit: cover; }
.attachment .meta { display: grid; min-width: 0; line-height: 1.3; }
.attachment .meta strong { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment .meta span { font-size: var(--text-sm); color: var(--text-muted); }

.reply-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* A label on the open conversation: a pill that opens the label, with a
   button that takes it off. */
.label-pill { padding-right: .2rem; }
.label-pill a { color: inherit; text-decoration: none; }
.label-pill a:hover { text-decoration: underline; }
.pill-x {
	display: inline-grid; place-items: center;
	width: 1.4rem; height: 1.4rem;
	border: 0; border-radius: 50%;
	background: transparent; color: inherit;
	cursor: pointer;
}
.pill-x:hover { background: var(--bg-card); }
.pill-x .icon { width: 13px; height: 13px; }

/* ── The Label menu ─────────────────────────────────────────────────────
   Tick labels, find one by typing, or type a new name and make it there.
   Nothing changes until Apply. On a phone it is a sheet at the foot of the
   screen, where it has room and a thumb can reach it. */
.label-menu .menu-list { right: auto; width: 16.5rem; padding: .5rem; gap: .1rem; }
.label-find { margin-bottom: .35rem; }
.label-options { display: grid; gap: 1px; max-height: 15rem; overflow-y: auto; }
.label-option { cursor: pointer; }
.label-option input { margin-right: .1rem; }
.menu-note { margin: .35rem .5rem; font-size: var(--text-sm); color: var(--text-muted); }
.label-menu-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem .25rem 0; }
.label-menu-foot .link-btn { font-size: var(--text-sm); text-decoration: none; }
@media (width < 48rem) {
	.label-menu .menu-list {
		position: fixed; z-index: 90;
		left: .75rem; right: .75rem; top: auto;
		bottom: calc(var(--rig-space, 0px) + .75rem);
		width: auto; max-height: 70dvh; overflow-y: auto;
		padding: .75rem;
	}
	body:has(.label-menu[open]) .fab { display: none; }
}

/* ============================================================================
   Pages that are not the mail view: compose, settings, sign in
   ========================================================================== */

.page { min-height: 100dvh; overflow-y: auto; }
@media (width >= 48rem) { .page { height: 100dvh; } }

.page-head {
	display: flex; align-items: center; gap: .5rem;
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--border);
	background: var(--bg-card);
}
.page-head h1 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
@media (width < 48rem) { .page-head { position: sticky; top: 0; z-index: 20; } }

.page-body { max-width: 50rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
@media (width >= 48rem) { .page-body { padding: 2rem 1.75rem 4rem; } }

.card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

/* ── Status messages ────────────────────────────────────────────────────── */

.status {
	display: flex; gap: .6rem; align-items: flex-start;
	margin-bottom: 1rem;
	padding: .7rem .85rem;
	border-radius: var(--radius-sm);
	background: var(--bg-card);
	border: 1px solid var(--border-firm);
	font-size: .9rem;
}
.status:empty { display: none; }
.status .icon { margin-top: .1rem; color: var(--accent); }
.status.is-error { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.status.is-error .icon { color: var(--danger); }
.status p { margin: 0; }
.status strong { display: block; }

/* ── Compose ────────────────────────────────────────────────────────────── */

.compose { overflow: hidden; }
.compose-row {
	display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; align-items: center;
	border-bottom: 1px solid var(--border);
	padding: 0 .75rem 0 1rem;
}
.compose-row > label { font-size: .875rem; font-weight: 600; color: var(--text-muted); }
.compose-row input, .compose-row select {
	border: 0; border-radius: 0; background: transparent;
	padding: .8rem .25rem;
}
.compose-row input:focus-visible, .compose-row select:focus-visible { outline-offset: -2px; }
.compose-row .link-btn { font-size: var(--text-sm); padding: .5rem 0 .5rem .5rem; }
.compose-row.is-subject input { font-weight: 600; }
.field-error { grid-column: 2 / -1; margin: -.35rem 0 .55rem .25rem; font-size: var(--text-sm); color: var(--danger); font-weight: 600; }

.compose-body {
	display: block; width: 100%;
	min-height: 18rem;
	border: 0; border-radius: 0;
	padding: 1rem;
	background: transparent;
	font-size: .95rem;
	resize: vertical;
}
.compose-body:focus-visible { outline-offset: -2px; }

.compose-files {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	padding: .75rem 1rem;
	border-top: 1px solid var(--border);
}
.file-chip {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .2rem .25rem .2rem .65rem;
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm); font-weight: 500;
	max-width: 100%;
}
.file-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .size { color: var(--text-muted); }
.file-chip .icon-btn { width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.file-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.files-total { font-size: var(--text-sm); color: var(--text-muted); margin-left: auto; }

.compose-actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	padding: .75rem 1rem;
	border-top: 1px solid var(--border);
	background: var(--bg-side);
}
.compose-actions .spacer { flex: 1; }
.compose-actions .saved { font-size: var(--text-sm); color: var(--text-muted); }
.compose-actions .btn-primary { min-width: 6.5rem; }

/* ── Settings ───────────────────────────────────────────────────────────── */

.tabs {
	display: flex; gap: .25rem;
	margin-bottom: 1.5rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--border);
}
.tab {
	padding: .6rem .8rem;
	border-bottom: 2px solid transparent;
	color: var(--text-muted); text-decoration: none;
	font-size: .925rem; font-weight: 600;
	white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
/* On a phone the tabs wrap onto a second row rather than scrolling sideways,
   as Mosaic's do, so every tab is in view. The rule underneath would cut
   between the rows, so it goes, and the current tab is a raised card with
   the accent along its foot. */
@media (width < 48rem) {
	.tabs { flex-wrap: wrap; overflow: visible; border-bottom: 0; gap: .25rem; }
	.tab { padding: .45rem .7rem; border-bottom: 0; border-radius: var(--radius-sm); }
	.tab:hover { background: var(--bg-sunken); }
	.tab[aria-current="page"] { background: var(--bg-card); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
}

.section { margin-bottom: 2rem; }
.section > h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.section > .lead { margin: 0 0 1rem; color: var(--text-muted); font-size: .925rem; }

.mailbox-card { padding: 0; margin-bottom: .75rem; }
.mailbox-card > summary {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center;
	padding: .85rem 1rem;
	cursor: pointer; list-style: none;
}
.mailbox-card > summary::-webkit-details-marker { display: none; }
.mailbox-card .who { display: grid; min-width: 0; line-height: 1.3; }
.mailbox-card .who strong { overflow-wrap: anywhere; }
.mailbox-card .who span { font-size: var(--text-sm); color: var(--text-muted); }
.mailbox-card .chevron { color: var(--text-muted); transition: transform .15s ease; }
.mailbox-card[open] .chevron { transform: rotate(180deg); }
.mailbox-form { display: grid; gap: 1rem; padding: .25rem 1rem 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }

.field { display: grid; gap: .35rem; }
.field > label, .field > .label, fieldset legend { font-size: .875rem; font-weight: 600; }
.field .hint { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .925rem; cursor: pointer; }
.check input { margin-top: .2rem; }
.check span small { display: block; font-size: var(--text-sm); color: var(--text-muted); }

.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch .dot { display: block; width: 1.75rem; height: 1.75rem; box-shadow: 0 0 0 2px var(--bg-card); }
.swatch input:checked + .dot { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text); }
.swatch input:focus-visible + .dot { outline: 2px solid var(--accent); outline-offset: 4px; }

.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.swipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem; }
.swipe-col { display: grid; gap: 1rem; align-content: start; }
.swipe-demo { overflow: hidden; pointer-events: none; }
.swipe-demo .row { border-bottom: 0; }
.swipe-demo .row-link { grid-template-columns: minmax(0, 1fr) auto; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.choice {
	position: relative;
	display: grid; gap: .6rem;
	padding: .75rem;
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice input { position: absolute; opacity: 0; }
.choice-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; font-size: .925rem; }
.choice-top .tick { color: var(--accent); visibility: hidden; }
.choice:has(input:checked) .tick { visibility: visible; }
.choice p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.preview {
	display: grid; grid-template-columns: 28% 1fr; height: 4.5rem;
	border-radius: var(--radius-sm); overflow: hidden;
	border: 1px solid var(--border);
}
.preview .p-side { background: var(--p-side); padding: .45rem .4rem; display: grid; gap: .3rem; align-content: start; }
.preview .p-main { background: var(--p-card); padding: .45rem .5rem; display: grid; gap: .35rem; align-content: start; }
.preview i { display: block; height: .3rem; border-radius: 2px; background: var(--p-muted); opacity: .55; }
.preview i.a { background: var(--p-accent); opacity: 1; height: .45rem; }
.preview i.t { background: var(--p-text); opacity: .85; }

.list-table { display: grid; }
.list-table > div {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center;
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--border);
}
.list-table > div:last-child { border-bottom: 0; }
.list-table strong { display: block; font-size: .925rem; }
.list-table span { font-size: var(--text-sm); color: var(--text-muted); }
.list-table form { margin: 0; }

.toggle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .who { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .925rem; }
.toggle-row .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Sign in ────────────────────────────────────────────────────────────── */

.auth {
	min-height: 100dvh;
	display: grid; place-items: center;
	padding: 1.5rem 1rem;
}
.auth-card { width: min(100%, 24rem); padding: 1.75rem 1.5rem; display: grid; gap: 1.1rem; }
.auth-brand { display: grid; justify-items: center; gap: .5rem; text-align: center; margin-bottom: .25rem; }
.auth-brand .brand-mark { width: 88px; height: auto; }
.auth-brand h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.015em; }
.auth-brand p { margin: 0; color: var(--text-muted); font-size: .925rem; }
.auth-card .btn-primary { width: 100%; min-height: 2.75rem; }
.auth-foot { text-align: center; font-size: var(--text-sm); color: var(--text-muted); }

/* ── Floating Write button on narrow screens ────────────────────────────── */

.fab {
	position: fixed; right: 1rem; bottom: 1rem; z-index: 30;
	display: none;
	box-shadow: var(--shadow);
	border-radius: var(--radius-pill);
	min-height: 3.25rem; padding: 0 1.25rem;
}
@media (width < 48rem) { .fab { display: inline-flex; } }
/* The Write button belongs to the list, not to an open message. */
body:has(.main.is-reading) .fab { display: none; }

/* ============================================================================
   Admin: dashboard, themes, site settings, audit

   The same tabs and cards as Settings. Admin has no colours of its own:
   working is the accent, failing is danger, idle is muted, and every state
   is said in words as well, never by colour alone.
   ========================================================================== */

.admin-body { max-width: 60rem; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */

.todo { display: grid; }
.todo > div {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center;
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--border);
}
.todo > div:last-child { border-bottom: 0; }
.todo .icon { color: var(--danger); }
.todo strong { display: block; font-size: .925rem; }
.todo span { font-size: var(--text-sm); color: var(--text-muted); }
.todo .form-actions { justify-content: flex-end; }
@media (width < 36rem) {
	.todo > div { grid-template-columns: auto minmax(0, 1fr); }
	.todo .form-actions { grid-column: 2; justify-content: flex-start; }
}
.all-clear { display: flex; gap: .6rem; align-items: center; padding: .85rem 1rem; font-size: .925rem; }
.all-clear .icon { color: var(--accent); }

.health { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: .75rem; }
.health-card { display: grid; gap: .3rem; align-content: start; padding: .9rem 1rem 1rem; }
.health-card h3 {
	display: flex; align-items: center; gap: .45rem;
	margin: 0;
	font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
}
.health-card .state { width: .55rem; height: .55rem; border-radius: 50%; background: var(--text-muted); flex: none; }
.health-card[data-state="ok"] .state { background: var(--accent); }
.health-card[data-state="fail"] { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.health-card[data-state="fail"] .state { background: var(--danger); }
.health-big { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.health-card[data-state="fail"] .health-big { color: var(--danger); }
.health-card p:not(.health-big) { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.health-card form { margin: .5rem 0 0; }

.counts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: .9rem 1rem; }
.counts div { display: grid; }
.counts strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -.015em; }
.counts span { font-size: var(--text-sm); color: var(--text-muted); }

.storage-bar { display: flex; height: .6rem; margin: .5rem 0 .35rem; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-sunken); }
.storage-bar span { display: block; height: 100%; }
.storage-key { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--text-sm); color: var(--text-muted); }
.storage-key span { display: inline-flex; align-items: center; gap: .35rem; }

.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-list li {
	display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .25rem 1rem;
	padding: .65rem 1rem;
	border-bottom: 1px solid var(--border);
	font-size: .9rem;
}
.audit-list li:last-child { border-bottom: 0; }
.audit-list time { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.audit-list .detail { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
@media (width < 36rem) { .audit-list li { grid-template-columns: minmax(0, 1fr); } }

.version { margin: 1rem 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.version code, .audit-list code { font-family: var(--font-mono); font-size: .8125rem; }

.controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.controls .field { min-width: 12rem; }

/* ── Themes ─────────────────────────────────────────────────────────────── */

.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.theme-card { display: grid; gap: .6rem; padding: .75rem; }
.theme-card[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-card h3 { margin: 0; font-size: .95rem; }
.theme-card .badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.pill.is-danger { color: var(--danger); background: var(--bg-sunken); }
.theme-card .form-actions .btn { min-height: 2rem; padding: .25rem .7rem; font-size: .85rem; }

.editor { display: grid; gap: 1.25rem; padding: 1rem; }
.editor-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; }
.editor-head .field { flex: 1 1 14rem; }

.tokens { display: grid; gap: 1.25rem; }
.tokens fieldset { display: grid; gap: .1rem; }
.tokens legend { margin-bottom: .35rem; }
.token-row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem 1rem; align-items: center;
	padding: .45rem 0;
	border-bottom: 1px solid var(--border);
}
.token-row .name { display: grid; line-height: 1.3; }
.token-row .name code { font-family: var(--font-mono); font-size: .85rem; font-weight: 600; }
.token-row .name span { font-size: var(--text-sm); color: var(--text-muted); }
.token-head { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); border-bottom: 0; padding-bottom: 0; }
.token-head span:not(:first-child) { width: 10.4rem; }
@media (width < 40rem) {
	.token-row { grid-template-columns: auto auto; justify-content: start; }
	.token-row .name { grid-column: 1 / -1; }
	.token-head { display: none; }
	.token-row .mode-label { display: block; }
}
@media (width < 30rem) { .token-row { grid-template-columns: minmax(0, 1fr); } }
.mode-label { display: none; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: .2rem; }

.gate { display: grid; gap: .5rem; }
.gate-sum { display: flex; gap: .5rem; align-items: center; margin: 0; font-weight: 600; }
.gate-sum .icon { color: var(--accent); }
.gate.is-failing .gate-sum, .gate.is-failing .gate-sum .icon { color: var(--danger); }
.gate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.gate li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: var(--text-sm); }
.gate .sample {
	display: inline-grid; place-items: center;
	width: 2.25rem; height: 1.6rem;
	border-radius: 4px; border: 1px solid var(--border);
	font-weight: 700; font-size: .8rem;
}
.gate .ratio { font-family: var(--font-mono); font-weight: 600; min-width: 3.5rem; }
.gate li.fail .ratio { color: var(--danger); }
.gate details summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; }
.gate details ul { margin-top: .5rem; }

.th-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .75rem; }
.th-pane {
	display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--bg); color: var(--text);
	font-size: .85rem;
}
.th-pane > .cap { grid-column: 1 / -1; padding: .35rem .6rem; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); background: var(--bg-sunken); border-bottom: 1px solid var(--border); }
.th-side { background: var(--bg-side); border-right: 1px solid var(--border); padding: .5rem .35rem; display: grid; gap: .2rem; align-content: start; }
.th-side span { padding: .25rem .4rem; border-radius: 4px; font-size: .8rem; }
.th-side .on { background: var(--bg-selected); font-weight: 600; color: var(--accent); }
.th-list { background: var(--bg-card); min-width: 0; }
.th-row { padding: .45rem .6rem; border-bottom: 1px solid var(--border); display: grid; min-width: 0; }
.th-row b, .th-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-row span { color: var(--text-muted); font-size: .8rem; }
.th-row.sel { background: var(--bg-selected); }
.th-row .u { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); margin-right: .3rem; vertical-align: middle; }
.th-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .55rem .6rem; }
.th-foot .btn { min-height: 1.9rem; padding: .2rem .6rem; font-size: .8rem; }
.th-foot .warn { color: var(--danger); font-size: .8rem; font-weight: 600; }

.save-bar {
	position: sticky; bottom: 0;
	display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center;
	margin: 0 -1rem -1rem; padding: .75rem 1rem;
	border-top: 1px solid var(--border);
	background: var(--bg-side);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.save-bar .spacer { flex: 1; }
.save-bar .check { font-size: .9rem; }
.save-bar .check small { max-width: 22rem; }

/* The colour picker is color-picker.js and color-picker.css, the same pair
   every app with a theme editor uses. Its stylesheet is Mosaic's, which draws
   it entirely from the theme tokens Courier shares, so it follows the theme
   and the colour mode with nothing here to override it. */

/* ── Site settings ──────────────────────────────────────────────────────── */

.site-img {
	display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center;
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--border);
}
.site-img:last-child { border-bottom: 0; }
.site-img .thumb {
	display: grid; place-items: center;
	width: 3.5rem; height: 3.5rem;
	border-radius: var(--radius-sm);
	background: var(--bg-sunken);
	border: 1px solid var(--border);
}
.site-img .thumb img { max-width: 80%; max-height: 80%; }
.site-img strong { display: block; font-size: .925rem; }
.site-img span { font-size: var(--text-sm); color: var(--text-muted); }
.site-img form { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
@media (width < 36rem) {
	.site-img { grid-template-columns: 3.5rem minmax(0, 1fr); }
	.site-img form { grid-column: 1 / -1; }
}

.radios { display: grid; gap: .6rem; }
.fixed-list { margin: 0; padding: .9rem 1rem .9rem 2.25rem; display: grid; gap: .5rem; font-size: .925rem; }
.fixed-list li::marker { color: var(--text-muted); }

/* ── Confirmations: the native dialog, never a hand-built modal ─────────── */

.dlg {
	width: min(26rem, calc(100vw - 2rem));
	padding: 0;
	border: 1px solid var(--border-firm);
	border-radius: var(--radius-md);
	background: var(--bg-card); color: var(--text);
	box-shadow: var(--shadow);
}
.dlg::backdrop { background: var(--scrim); }
.dlg form { display: grid; gap: .75rem; padding: 1.25rem; }
.dlg h2 { margin: 0; font-size: 1.1rem; }
.dlg p { margin: 0; color: var(--text-muted); font-size: .925rem; }
.dlg .form-actions { justify-content: flex-end; margin-top: .25rem; }