/* Frickmail v1 shell styles (Phase 9).
 *
 * Colour comes from the Frickmail theme token values: a saturated indigo/
 * violet base with blue, teal, green and amber accents, plus a light variant,
 * rather than the flat grey starting point. The palette is declared here so
 * the app is self-contained; the token names mirror `frickmail-theme.css`
 * (`--fm-bg-base`, `--fm-accent`, …) so adopting the shared plugin
 * stylesheet later is an alias change, not a rewrite.
 */

:root,
html[data-fm-theme="dark"] {
	color-scheme: dark;
	--fm-bg: #13131f;
	--fm-surface: #1e1f33;
	--fm-panel: #1a1a2e;
	--fm-elevated: #252641;
	--fm-hover: #2a2d45;
	--fm-selected: #2d3461;
	--fm-text: #e2e4f0;
	--fm-muted: #9fa3bf;
	--fm-faint: #6b6f8a;
	--fm-accent: #7aa2f7;
	--fm-accent-strong: #9ab5f9;
	--fm-accent-soft: rgba(122, 162, 247, 0.18);
	--fm-teal: #14b8a6;
	--fm-green: #9ece6a;
	--fm-yellow: #e0af68;
	--fm-danger: #f7768e;
	--fm-border: rgba(255, 255, 255, 0.09);
	--fm-border-strong: rgba(255, 255, 255, 0.18);
	--fm-radius: 10px;
	--fm-font: system-ui, -apple-system, "Segoe UI", sans-serif;
	--fm-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

html[data-fm-theme="light"] {
	color-scheme: light;
	--fm-bg: #f4f5fb;
	--fm-surface: #ffffff;
	--fm-panel: #eceefa;
	--fm-elevated: #ffffff;
	--fm-hover: #e4e7f7;
	--fm-selected: #d9e2ff;
	--fm-text: #1a1c2b;
	--fm-muted: #555a75;
	--fm-faint: #83879f;
	--fm-accent: #3b6fd4;
	--fm-accent-strong: #2f5cb0;
	--fm-accent-soft: rgba(59, 111, 212, 0.14);
	--fm-teal: #0d9488;
	--fm-green: #3f8f2a;
	--fm-yellow: #a97a1f;
	--fm-danger: #c5344e;
	--fm-border: rgba(0, 0, 0, 0.12);
	--fm-border-strong: rgba(0, 0, 0, 0.22);
	--fm-radius: 10px;
	--fm-font: system-ui, -apple-system, "Segoe UI", sans-serif;
	--fm-shadow: 0 4px 16px rgba(40, 44, 80, 0.16);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--fm-bg);
	color: var(--fm-text);
	font-family: var(--fm-font);
}

/* Signed-out: a single centered authentication card. */
body:not(.fm-app) {
	display: grid;
	place-items: center;
}

body:not(.fm-app) #app {
	width: min(26rem, calc(100vw - 2rem));
	background: var(--fm-surface);
	border-radius: var(--fm-radius);
	padding: 1.75rem;
}

#app h1 {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
}

#app label {
	display: block;
	margin: 0.75rem 0 0.25rem;
	color: var(--fm-muted);
	font-size: 0.85rem;
}

#app input {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--fm-border-strong);
	border-radius: 6px;
	background: var(--fm-bg);
	color: inherit;
	font: inherit;
}

#app input[type="checkbox"],
#app input[type="radio"] {
	width: auto;
	min-width: 0;
}

#app select {
	max-width: 100%;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--fm-border-strong);
	border-radius: 6px;
	background: var(--fm-bg);
	color: inherit;
	font: inherit;
}

#app .actions {
	margin-top: 1.25rem;
}

#app button[type="submit"] {
	width: 100%;
	padding: 0.6rem;
	border: 0;
	border-radius: 6px;
	background: var(--fm-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

#app .status {
	min-height: 1.4em;
	margin-top: 0.75rem;
	color: var(--fm-danger);
	font-size: 0.9rem;
}

#app [data-fm="list"] {
	list-style: none;
	margin: 0;
	padding: 0;
}

#app [data-fm="message"] {
	display: grid;
	grid-template-columns: minmax(8rem, 12rem) 1fr auto;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.55rem 0.25rem;
	border-bottom: 1px solid var(--fm-border);
	cursor: pointer;
}

#app [data-fm="message"][data-unseen] [data-fm="subject"] {
	font-weight: 700;
	color: var(--fm-text);
}

#app [data-fm="from"] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--fm-muted);
	font-size: 0.85rem;
}

#app [data-fm="subject"] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#app [data-fm="date"] {
	color: var(--fm-muted);
	font-size: 0.8rem;
	white-space: nowrap;
}

#app [data-fm="headers"] {
	margin-bottom: 1rem;
}

#app [data-fm="headers"] h2 {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

#app [data-fm="headers"] div {
	color: var(--fm-muted);
	font-size: 0.85rem;
}

#app [data-fm="body"] {
	width: 100%;
	min-height: 20rem;
	border: 1px solid var(--fm-border);
	border-radius: 6px;
	background: #fff;
}

#app pre {
	white-space: pre-wrap;
	word-break: break-word;
}

#app [data-fm="attachments"] {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

#app [data-fm="attachment"] {
	display: flex;
	gap: 0.75rem;
	padding: 0.4rem 0;
	border-top: 1px solid var(--fm-border);
	font-size: 0.85rem;
}

#app button[data-fm="back"] {
	margin-bottom: 1rem;
	background: none;
	border: 1px solid var(--fm-border-strong);
	border-radius: 6px;
	color: inherit;
	font: inherit;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
}

#app [data-fm="nav"] {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

#app [data-fm="nav"] button {
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--fm-muted);
	font: inherit;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
}

#app [data-fm="nav"] button[aria-current="page"] {
	color: var(--fm-text);
	border-color: var(--fm-border-strong);
}

#app [data-fm="row"] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0.6rem 0;
}

#app [data-fm="row"] input[type="text"],
#app [data-fm="row"] input[type="number"] {
	max-width: 12rem;
}

#app [data-fm="row"] input[type="checkbox"] {
	width: auto;
}

#app [data-fm="tasks"] {
	list-style: none;
	margin: 0;
	padding: 0;
}

#app [data-fm="task"] {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--fm-border);
}

#app [data-fm="filter-label"] {
	display: block;
	margin: 0.75rem 0;
}

#app [data-fm="contacts"] {
	list-style: none;
	margin: 0;
	padding: 0;
}

#app [data-fm="contact"] {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--fm-border);
}

#app [data-fm="contact"] [data-fm="uid"] {
	color: var(--fm-muted);
	font-size: 0.8rem;
}

#app [data-fm="rules"] {
	list-style: none;
	margin: 0;
	padding: 0;
}

#app [data-fm="rule"] {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--fm-border);
}

#app textarea {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--fm-border-strong);
	border-radius: 6px;
	background: var(--fm-bg);
	color: inherit;
	font: inherit;
	resize: vertical;
}

#app [data-fm="folders"] {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

#app [data-fm="folder"] {
	border: 1px solid var(--fm-border);
	border-radius: 6px;
	padding: 0.35rem 0.6rem;
	font-size: 0.85rem;
	cursor: pointer;
	color: var(--fm-muted);
}

#app [data-fm="folder"][data-current] {
	color: var(--fm-text);
	border-color: var(--fm-accent);
}

#app [data-fm="counts"] {
	margin-left: 0.4rem;
	opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════
   Authenticated app shell — full window, Thunderbird-like panes.

   The signed-out login card above stays centered; once authenticated
   (`body.fm-app`) the app fills the viewport: a sticky top navigation bar,
   a folders sidebar beside the message list, and a scrolling reading pane.
   ═══════════════════════════════════════════════════════════════ */

body.fm-app {
	height: 100vh;
	overflow: hidden;
}

body.fm-app #app {
	height: 100vh;
	width: 100%;
	padding: 0;
	background: var(--fm-bg);
	border-radius: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

/* Top navigation bar: sticky, wraps, never scrolls away. */
body.fm-app #app > [data-fm="nav"] {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0.45rem 0.75rem;
	background: var(--fm-panel);
	border-bottom: 1px solid var(--fm-border);
}

body.fm-app #app > [data-fm="nav"] button {
	padding: 0.4rem 0.7rem;
	border-radius: 7px;
}

body.fm-app #app > [data-fm="nav"] button[aria-current="page"] {
	background: var(--fm-accent-soft);
	border-color: transparent;
	color: var(--fm-text);
}

/* Generic screen content. */
body.fm-app #app > :not([data-fm="nav"]) {
	padding: 0 1.25rem;
}

body.fm-app #app > [data-fm="title"] {
	margin: 1rem 0 0.5rem;
}

/* ── Mailbox: folders sidebar + message list, both scroll independently ── */
body.fm-app #app:has(> [data-fm="folders"]) {
	display: grid;
	grid-template-columns: minmax(190px, 230px) 1fr;
	grid-template-rows: auto auto 1fr;
	overflow: hidden;
}

body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="title"] {
	display: none;
}

body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="nav"] {
	grid-column: 1 / -1;
	grid-row: 1;
}

/* The folder toolbar spans both panes, above the sidebar and the list. */
body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="folder-toolbar"] {
	grid-column: 1 / -1;
	grid-row: 2;
}

body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="folders"] {
	grid-column: 1;
	grid-row: 3;
	display: block;
	overflow-y: auto;
	margin: 0;
	padding: 0.6rem 0.5rem;
	background: var(--fm-panel);
	border-right: 1px solid var(--fm-border);
}

body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="folders"] [data-fm="folder"] {
	display: block;
	border: 1px solid transparent;
	border-radius: 7px;
	padding: 0.45rem 0.6rem;
	margin-bottom: 0.15rem;
}

body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="folders"] [data-fm="folder"]:hover {
	background: var(--fm-hover);
}

body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="folders"] [data-fm="folder"][data-current] {
	background: var(--fm-accent-soft);
	border-color: transparent;
	color: var(--fm-text);
}

body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="list"],
body.fm-app #app:has(> [data-fm="folders"]) > [data-fm="empty"] {
	grid-column: 2;
	grid-row: 3;
	overflow-y: auto;
	margin: 0;
	padding: 0;
}

body.fm-app #app > [data-fm="empty"] {
	padding: 1.5rem 1.25rem;
	color: var(--fm-muted);
}

/* Message list rows: roomier, with hover and current-row feedback. */
body.fm-app #app > [data-fm="list"] [data-fm="message"] {
	padding: 0.6rem 1.25rem;
	border-bottom: 1px solid var(--fm-border);
}

body.fm-app #app > [data-fm="list"] [data-fm="message"]:hover {
	background: var(--fm-hover);
}

/* ── Action toolbars: folder-level above the list, message-level in the
   reading pane. Both are sticky so the actions stay reachable in a long
   message. ── */
#app [data-fm="toolbar"],
#app [data-fm="folder-toolbar"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0.45rem 1.25rem;
	background: var(--fm-panel);
	border-bottom: 1px solid var(--fm-border);
}

body.fm-app #app > [data-fm="toolbar"],
body.fm-app #app > [data-fm="folder-toolbar"] {
	position: sticky;
	/* The nav is sticky too, so the toolbar pins under it. `--fm-sticky-top`
	   is the measured nav height, published by the shell on every render and
	   on resize, because the nav wraps to a second row on narrow windows. */
	top: var(--fm-sticky-top, 0px);
	z-index: 4;
	width: 100%;
}

#app [data-fm="spacer"] {
	flex: 1 1 auto;
	min-width: 0.5rem;
}

#app [data-fm="current-folder"] {
	font-size: 0.95rem;
}

#app [data-fm="unread-count"] {
	color: var(--fm-muted);
	font-size: 0.8rem;
}

#app [data-fm="toolbar"] button,
#app [data-fm="folder-toolbar"] button {
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--fm-border);
	border-radius: 7px;
	background: var(--fm-surface);
	color: var(--fm-text);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

#app [data-fm="toolbar"] button:hover,
#app [data-fm="folder-toolbar"] button:hover {
	border-color: var(--fm-accent);
}

/* Delete is the one destructive action in the row. */
#app [data-fm="toolbar"] button[data-action="delete"] {
	color: var(--fm-danger);
}

#app [data-fm="toolbar"] select {
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--fm-border);
	border-radius: 7px;
	background: var(--fm-surface);
	color: var(--fm-text);
	font: inherit;
	font-size: 0.85rem;
	max-width: 14rem;
}

#app [data-fm="toolbar"] [data-fm="status"],
#app [data-fm="folder-toolbar"] [data-fm="status"] {
	color: var(--fm-danger);
	font-size: 0.82rem;
}

/* ── Reading pane: scrolls with the window, nav stays reachable ── */
body.fm-app #app > [data-fm="message-bar"] {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
	padding-top: 0.75rem;
	color: var(--fm-muted);
	font-size: 0.85rem;
}

body.fm-app #app > [data-fm="message-bar"] [data-fm="back"] {
	align-self: center;
}

body.fm-app #app > [data-fm="headers"] {
	margin-top: 0.75rem;
}

/* ── Calendar: pager, calendar picker, month grid, agenda, event editor ── */
body.fm-app #app > [data-fm="pager"] {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.75rem 0;
}

body.fm-app #app > [data-fm="pager"] [data-fm="month"] {
	font-weight: 600;
	font-size: 1.05rem;
	min-width: 11rem;
}

#app [data-fm="calendars"] {
	list-style: none;
	margin: 0.5rem 0 0.75rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
}

#app [data-fm="calendars"] label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	color: var(--fm-muted);
}

#app [data-fm="calendars"] input {
	width: auto;
}

#app [data-fm="grid"] {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

#app [data-fm="grid"] th {
	padding: 0.4rem 0.3rem;
	color: var(--fm-muted);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--fm-border);
}

#app [data-fm="grid"] td[data-fm="day"] {
	height: 5.6rem;
	vertical-align: top;
	border: 1px solid var(--fm-border);
	border-top: none;
	padding: 0.25rem 0.3rem;
	overflow: hidden;
}

#app [data-fm="grid"] td[data-outside] {
	opacity: 0.45;
}

#app [data-fm="day-number"] {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.75rem;
	color: var(--fm-muted);
}

#app button[data-fm="event"] {
	display: block;
	width: 100%;
	margin-bottom: 0.15rem;
	padding: 0.05rem 0.3rem;
	border: 0;
	border-left: 3px solid var(--fm-accent);
	border-radius: 3px;
	background: var(--fm-accent-soft);
	color: var(--fm-text);
	font: inherit;
	font-size: 0.72rem;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

#app [data-fm="events"] {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

#app [data-fm="event-row"] {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--fm-border);
}

#app [data-fm="event-start"] {
	margin-right: 0.5rem;
	color: var(--fm-muted);
	font-size: 0.82rem;
}

#app [data-fm="editor"] {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--fm-surface);
	border: 1px solid var(--fm-border);
	border-radius: 8px;
}

#app [data-fm="editor"] label {
	display: block;
	margin: 0.5rem 0;
}

#app [data-fm="editor"] input[type="text"],
#app [data-fm="editor"] input:not([type]),
#app [data-fm="editor"] select {
	max-width: 24rem;
}

/* In the app, submit buttons size to their content (the full-width submit is
   the signed-out login card only). */
body.fm-app #app button[type="submit"] {
	width: auto;
	padding: 0.55rem 1.1rem;
}

/* The plain-text `<pre>` and the HTML iframe fill the pane; horizontal
   spacing comes from the shared screen padding above. */
body.fm-app #app > pre {
	flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   Overhaul: real mail-client chrome.

   Thunderbird-inspired: a compact top bar instead of a row of equal
   buttons, a full-height reading pane, a compose window with proper header
   rows, and a Settings hub that gathers S/MIME, PGP, identities and accounts
   where users expect them.
   ═══════════════════════════════════════════════════════════════ */

/* ── Top bar ── */
body.fm-app #app > [data-fm="nav"] {
	align-items: center;
	gap: 0.1rem;
}

#app [data-fm="nav-brand"] {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-right: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--fm-text);
}

#app [data-fm="nav-brand"] [data-fm="brand-mark"] {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 7px;
	background: linear-gradient(135deg, var(--fm-accent), var(--fm-teal));
	color: #fff;
	font-size: 0.95rem;
	font-weight: 800;
}

#app [data-fm="nav-spacer"] {
	flex: 1 1 auto;
}

/* Compose is the one prominent action in the bar. */
body.fm-app #app > [data-fm="nav"] button[data-fm="nav-compose"] {
	margin-left: 0.35rem;
	border-color: transparent;
	background: var(--fm-accent);
	color: #fff;
	font-weight: 600;
}

body.fm-app #app > [data-fm="nav"] button[data-fm="nav-compose"]:hover {
	background: var(--fm-accent-strong);
}

/* ── Reading pane ── */
body.fm-app #app > [data-fm="message-bar"] {
	padding: 0.55rem 1.25rem;
	border-bottom: 1px solid var(--fm-border);
}

#app [data-fm="headers"] {
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--fm-border);
}

#app [data-fm="headers"] h2[data-fm="subject"] {
	font-size: 1.2rem;
	line-height: 1.3;
}

#app [data-fm="headers"] [data-fm="from"] {
	color: var(--fm-text);
}

/* Sender avatar chip, Thunderbird-style. */
#app [data-fm="headers"] [data-fm="sender-chip"] {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-right: 0.6rem;
	border-radius: 50%;
	background: var(--fm-accent-soft);
	color: var(--fm-accent);
	font-weight: 700;
	vertical-align: middle;
}

/* The message body. `background: #fff` is intentional: HTML mail is authored
   for a light canvas, and every mainstream client keeps it white even in a
   dark chrome. */
#app [data-fm="body"] {
	flex: 0 0 auto;
	width: 100%;
	height: max(26rem, 68vh);
	border: 1px solid var(--fm-border);
	border-radius: 8px;
	background: #fff;
}

#app [data-fm="body-plain"] {
	flex: 0 0 auto;
	margin: 0.75rem 0 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--fm-border);
	border-radius: 8px;
	background: var(--fm-surface);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Remote-image guard bar, shown until the user chooses to load them. */
#app [data-fm="image-bar"] {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.6rem 0 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--fm-border-strong);
	border-radius: 8px;
	background: var(--fm-elevated);
	color: var(--fm-muted);
	font-size: 0.85rem;
}

#app [data-fm="image-bar"] button {
	margin-left: auto;
	padding: 0.3rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 7px;
	background: var(--fm-accent);
	color: #fff;
	font: inherit;
	font-size: 0.82rem;
	cursor: pointer;
}

/* ── Attachments: cards with a real download affordance ── */
#app [data-fm="attachments"] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.9rem 0 0;
}

#app [data-fm="attachment"] {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--fm-border);
	border-radius: 8px;
	background: var(--fm-surface);
}

#app [data-fm="attachment"] [data-fm="attachment-icon"] {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 6px;
	background: var(--fm-accent-soft);
	color: var(--fm-accent);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
}

#app [data-fm="attachment"] [data-fm="attachment-meta"] {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

#app [data-fm="attachment"] [data-fm="name"] {
	color: var(--fm-text);
	font-size: 0.88rem;
}

#app [data-fm="attachment"] [data-fm="size"] {
	color: var(--fm-muted);
	font-size: 0.75rem;
}

#app [data-fm="attachment"] a[data-fm="download"] {
	margin-left: 0.25rem;
	padding: 0.3rem 0.6rem;
	border-radius: 7px;
	background: var(--fm-accent-soft);
	color: var(--fm-accent);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

#app [data-fm="attachment"] a[data-fm="download"]:hover {
	background: var(--fm-accent);
	color: #fff;
}

/* ── Compose window ── */
#app [data-fm="compose"] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 0.75rem;
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius);
	background: var(--fm-surface);
	overflow: hidden;
}

#app [data-fm="compose-head"] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--fm-border);
	background: var(--fm-panel);
}

#app [data-fm="compose-head"] [data-fm="compose-title"] {
	font-weight: 600;
}

#app [data-fm="compose-fields"] {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
	gap: 0;
	border-bottom: 1px solid var(--fm-border);
}

#app [data-fm="compose-fields"] label {
	display: contents;
}

#app [data-fm="compose-fields"] label[hidden] {
	display: none;
}

#app [data-fm="compose-fields"] [data-fm="field-label"] {
	padding: 0.5rem 0.4rem 0.5rem 0.9rem;
	color: var(--fm-muted);
	font-size: 0.85rem;
}

#app [data-fm="compose-fields"] input {
	width: 100%;
	margin: 0;
	padding: 0.5rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var(--fm-border);
	border-radius: 0;
	background: transparent;
	color: var(--fm-text);
	font: inherit;
}

#app [data-fm="compose-fields"] input:focus {
	outline: none;
	background: var(--fm-hover);
}

#app [data-fm="compose"] textarea[data-fm="compose-body"] {
	flex: 1 1 auto;
	min-height: 16rem;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.5;
	resize: none;
}

#app [data-fm="compose-foot"] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	border-top: 1px solid var(--fm-border);
	background: var(--fm-panel);
}

#app [data-fm="compose-foot"] [data-fm="spacer"] {
	flex: 1 1 auto;
}

#app button[data-fm="send"] {
	padding: 0.5rem 1.2rem;
	border: 0;
	border-radius: 7px;
	background: var(--fm-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

#app button[data-fm="send"]:hover {
	background: var(--fm-accent-strong);
}

#app button[data-fm="compose-toggle"] {
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--fm-border);
	border-radius: 7px;
	background: transparent;
	color: var(--fm-muted);
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

/* ── Settings hub ── */
body.fm-app #app > [data-fm="settings-layout"] {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 1fr;
	gap: 0;
	flex: 1 1 auto;
	min-height: 0;
	padding: 0;
}

#app [data-fm="settings-menu"] {
	margin: 0;
	padding: 0.75rem 0.5rem;
	background: var(--fm-panel);
	border-right: 1px solid var(--fm-border);
	overflow-y: auto;
}

#app [data-fm="settings-menu"] button {
	display: block;
	width: 100%;
	margin-bottom: 0.15rem;
	padding: 0.5rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: var(--fm-muted);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

#app [data-fm="settings-menu"] button:hover {
	background: var(--fm-hover);
	color: var(--fm-text);
}

#app [data-fm="settings-menu"] button[aria-current="page"] {
	background: var(--fm-accent-soft);
	color: var(--fm-text);
}

#app [data-fm="settings-panel"] {
	padding: 1rem 1.25rem;
	overflow-y: auto;
}

/* ── Colour accents ── */
#app [data-fm="message"][data-unseen] [data-fm="from"] {
	color: var(--fm-accent);
	font-weight: 700;
}

#app [data-fm="message"][data-unseen] {
	box-shadow: inset 3px 0 0 var(--fm-accent);
}

#app [data-fm="folder"][data-current] {
	background: var(--fm-accent-soft);
}

/* Theme toggle buttons in Settings. */
#app [data-fm="theme-choices"] {
	display: flex;
	gap: 0.5rem;
	margin: 0.5rem 0 1rem;
}

#app [data-fm="theme-choices"] button {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--fm-border-strong);
	border-radius: 7px;
	background: var(--fm-surface);
	color: var(--fm-text);
	font: inherit;
	cursor: pointer;
}

#app [data-fm="theme-choices"] button[aria-pressed="true"] {
	border-color: var(--fm-accent);
	background: var(--fm-accent-soft);
	color: var(--fm-accent);
	font-weight: 600;
}

/* ── OpenPGP ── */
/* Key list in Settings: identity and fingerprint stack on the left, the
   per-row actions stay on the right, so the panel reads at a glance the way a
   key manager does. */
#app [data-fm="pgp-keys"] {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

#app [data-fm="pgp-key"] {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.75rem;
	padding: 0.65rem 0.25rem;
	border-bottom: 1px solid var(--fm-border);
}

#app [data-fm="pgp-key"] [data-fm="uid"] {
	flex: 1 1 100%;
	font-weight: 600;
	color: var(--fm-text);
}

#app [data-fm="pgp-key"] [data-fm="fingerprint"] {
	flex: 1 1 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78rem;
	color: var(--fm-muted);
	word-break: break-all;
}

#app [data-fm="pgp-key"] [data-fm="created"],
#app [data-fm="pgp-key"] [data-fm="expires"] {
	color: var(--fm-muted);
	font-size: 0.8rem;
}

#app [data-fm="pgp-key"] [data-fm="state"] {
	flex: 1 1 100%;
	color: var(--fm-accent);
	font-size: 0.78rem;
}

#app [data-fm="pgp-key"] button {
	width: auto;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--fm-border-strong);
	border-radius: 6px;
	background: var(--fm-surface);
	color: var(--fm-text);
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

#app [data-fm="pgp-key"] button:hover {
	border-color: var(--fm-accent);
}

/* Deleting a key is irreversible, so it is the one destructive row action. */
#app [data-fm="pgp-key"] [data-fm="pgp-delete"] {
	color: var(--fm-danger);
}

#app [data-fm="pgp-generate"],
#app [data-fm="pgp-import"],
#app [data-fm="pgp-export-form"] {
	max-width: 34rem;
	margin-bottom: 1.75rem;
}

#app [data-fm="pgp-export-form"] [data-fm="export-output"] {
	margin-top: 0.6rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.75rem;
}

/* Compose OpenPGP bar: sits between the body and the footer, the way a
   mail client's encrypt/sign toggle does. Collapsed by default so the compose
   window only grows by its one summary line. */
#app [data-fm="pgp-compose"] {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--fm-border);
	background: var(--fm-panel);
	/* A flex item defaults to `min-width: auto`, which lets the recipient
	   select push the bar wider than the compose window. */
	min-width: 0;
}

#app [data-fm="pgp-compose"] > summary {
	padding: 0.45rem 0.9rem;
	color: var(--fm-muted);
	font-size: 0.8rem;
	cursor: pointer;
	user-select: none;
}

#app [data-fm="pgp-compose"][open] > summary {
	color: var(--fm-text);
}

#app [data-fm="pgp-compose"] [data-fm="pgp-state"] {
	color: var(--fm-accent);
}

#app [data-fm="pgp-compose"] [data-fm="pgp-compose-body"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.1rem;
	padding: 0.25rem 0.9rem 0.6rem;
}

#app [data-fm="pgp-compose"] label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
	font-size: 0.8rem;
}

#app [data-fm="pgp-compose"] input[type="password"] {
	width: 12rem;
	max-width: 100%;
}

#app [data-fm="pgp-compose"] select {
	max-width: 100%;
}

#app [data-fm="pgp-compose"] select[multiple] {
	min-width: 12rem;
	max-height: 7rem;
	overflow-y: auto;
}

/* Narrow window: the section menu becomes a horizontal scroller, otherwise its
   180px floor leaves the settings panel almost no room to show anything. */
@media (max-width: 40rem) {
	body.fm-app #app > [data-fm="settings-layout"] {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
	}

	#app [data-fm="settings-menu"] {
		display: flex;
		gap: 0.25rem;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--fm-border);
	}

	#app [data-fm="settings-menu"] button {
		width: auto;
		margin-bottom: 0;
		white-space: nowrap;
	}
}