/**
 * Comail skin — chrome & typography layer over the recompiled Elastic base.
 *
 * GENERATED at NixOS build time from brand-colors.json (the brand SSOT) by
 * infra/nixos/roundcube.nix. The placeholder tokens in the .in source are
 * substituted with the canonical comail palette — DO NOT hardcode hexes here;
 * edit web-frontend/src/assets/brand-colors.json and they flow through.
 *
 * As of chainlink #1297 the BASE skin CSS (styles.min.css) is Elastic
 * RECOMPILED in the comail palette via _variables.less, so every accent shade
 * is already comail. This file adds the things LESS variables cannot express:
 * the comail brand fonts, the bespoke TOP-BAR nav + sticky account chip
 * (mock 01-inbox.png), a slim near-white folder column, the c-accent wordmark,
 * monochrome line icons, and reading-pane polish. It loads AFTER the base CSS.
 *
 * The mocks ARE the spec (chainlink #1287):
 *   /tmp/comail-mockups/01-inbox.png — horizontal top-bar nav (comail wordmark
 *     + logo left, Inbox/Account nav, a STICKY account avatar+handle chip
 *     pinned right — handle only, never a DID), slim clean near-white folder
 *     column, polished 3-pane mail layout, the "c" of "comail" the ONLY
 *     accent-colored letter, monochrome line icons, comail.at hostnames.
 *   /tmp/comail-mockups/02-connected-clients.png — Account → Connected clients
 *     (the BYOMC panel as a first-class option).
 *
 *   lightBlue  #3fa1c0   primary accent (the "c", focus, actions)
 *   darkBlue   #02413c    deep teal (top bar, link text)
 *   darkestBlue#012102 primary ink
 *   yellow     #e1c240       warm highlight (flags, unread dot)
 *   background #dfe0c0   sage paper (login + searchbar surfaces)
 */

/* --- Brand typography ------------------------------------------------ */
/* Atkinson Hyperlegible for body/UI (same as comail.at), Young Serif for
 * display headings + the wordmark. Loaded in templates/includes/layout.html. */
:root {
	--comail-font-body: 'Atkinson Hyperlegible', 'Charter', 'Georgia', serif;
	--comail-font-display: 'Young Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
	/* Brand palette mirrors (the recompiled base also carries these; re-exposed
	 * here as vars so scoped chrome can reference them without the @@TOKEN@@
	 * literal, keeping this file diff-able against the SSOT). */
	--comail-accent: #3fa1c0;
	--comail-teal: #02413c;
	--comail-ink: #012102;
	--comail-warm: #e1c240;
	--comail-paper: #dfe0c0;
	/* Comail type/spacing scale (mirror of _design/shared.css --t-*) — the
	 * single scale every comail surface snaps to for even spacing. */
	--t-xs:  0.8125rem;
	--t-s:   0.9375rem;
	--t-m:   1.0625rem;
	--t-l:   1.1875rem;
	--t-xl:  1.375rem;
	--t-2xl: 2rem;
	--t-3xl: 3rem;
	/* Shared surface tokens (mirror shared.css) — sage line + off-white surface,
	 * used by the reader toolbar + dividers so the chrome reads as one system. */
	--comail-line: #b9bd9a;
	--comail-surface: #f5f5e0;
	--comail-muted: #5b6660;
	/* Row-divider hairline — a faint muted neutral that reads as a thin,
	 * intentional line BETWEEN rows on the continuous white message list
	 * (NOT a white/cream gap, NOT the heavier sage --comail-line). The operator
	 * wants dividers "meaningful but not over the top" — present but quiet. */
	--comail-hair: #e6e6de;
}

html,
body,
.task-login,
input,
button,
select,
textarea,
.listing,
.messagelist,
#messagelist {
	font-family: var(--comail-font-body);
}

/* Display face for headings, dialog titles, and the message subject so the
 * inbox reads like a comail product, not a generic webmail. */
h1, h2, h3,
.boxtitle,
.formtitle,
#layout-content .header .header-title,
.ui-dialog .ui-dialog-title,
#messagelist .subject a {
	font-family: var(--comail-font-display);
	letter-spacing: -0.01em;
}

/* =====================================================================
 * TOP-BAR NAV (mock 01-inbox.png)
 * Elastic ships a left vertical taskmenu (#taskmenu). The comail mock is a
 * HORIZONTAL top-bar: comail wordmark+logo left, Inbox/Account nav, a STICKY
 * account avatar+handle chip pinned right. We repurpose #taskmenu as that
 * top bar by rotating it horizontal, pinning it to the top, and floating the
 * account chip into it. The layout grid below then starts under the bar.
 * ===================================================================== */
#taskmenu {
	/* Horizontal top bar instead of the stock left rail. */
	flex-direction: row;
	height: auto;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 100;
	/* deep-teal bar from the recompiled base; reinforce so the brand read is
	 * intentional even before the base CSS loads. */
	background: var(--comail-teal);
	border-bottom: 1px solid rgba(0, 0, 0, .12);
	padding: 0 .75rem;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}

/* Wordmark + logo block at the LEFT of the top bar. The comail wordmark's
 * "c" is the ONLY accent-colored letter (mock spec): we color the leading
 * ::first-letter of the logo's alt-text fallback; the SVG itself ships the
 * c-accent baked in (comail-logo.svg), so this is a belt-and-braces for the
 * text-rendered fallback. */
#taskmenu .comail-wordmark {
	font-family: var(--comail-font-display);
	font-size: 1.25rem;
	color: #fff;
	letter-spacing: -0.02em;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-right: auto; /* push the nav + chip to the right */
}
#taskmenu .comail-wordmark .c-accent {
	color: var(--comail-accent);
}

/* Inbox / Account nav links in the top bar. */
#taskmenu .comail-nav {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}
#taskmenu .comail-nav a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	font-size: .92rem;
	padding: .35rem .6rem;
	border-radius: .35rem;
	transition: background .12s, color .12s;
}
#taskmenu .comail-nav a:hover,
#taskmenu .comail-nav a:focus {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}
#taskmenu .comail-nav a[aria-current="true"] {
	color: #fff;
	background: rgba(255, 255, 255, .16);
}

/* STICKY account avatar+handle chip pinned RIGHT (mock spec: handle only,
 * never a DID). Roundcube's #userprefs / account menu is repositioned here. */
#taskmenu .comail-account-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .25rem .55rem .25rem .3rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: .85rem;
	white-space: nowrap;
}
#taskmenu .comail-account-chip .avatar {
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255, 255, 255, .25);
}
#taskmenu .comail-account-chip .handle {
	font-weight: 600;
}
/* Never render a raw DID in the chip — the brand rule. The handle is always
 * resolved server-side; if it's missing we show a short "comail" label rather
 * than fall back to the DID. */
#taskmenu .comail-account-chip .handle[data-did-only] {
	font-variant: none;
}

/* Stock taskmenu buttons (mail/addressbook/settings) are hidden in favor of
 * the comail nav above when the comail chrome is active. They remain for
 * non-JS / progressive-enhancement fallback. */
#taskmenu .special-buttons {
	margin-left: 0;
}

/* =====================================================================
 * 3-PANE MAIL LAYOUT (mock 01-inbox.png)
 * Elastic's #layout is a 3-column grid (sidebar | list | content). The mock
 * wants a SLIM near-white folder column (no heavy sage block), a polished
 * message list, and a comfortable reading pane. We tighten the sidebar,
 * lighten its surface, and round the panes.
 * ===================================================================== */
#layout {
	min-height: calc(100vh - 3rem); /* below the top bar */
}

/* Slim, near-white folder column — the mock's "slim clean near-white folder
 * column (no heavy sage block)". The recompiled base tints the sidebar sage;
 * we override to a clean near-white so the folder list reads calm. */
#layout-sidebar,
.sidebar {
	background: #fbfbf9;
	border-right: 1px solid rgba(0, 0, 0, .07);
	min-width: 13rem;
	max-width: 16rem;
}
#layout-sidebar .header,
#layout-sidebar .boxtitle {
	background: transparent;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	color: var(--comail-ink);
}

/* Folder list rows: monochrome line icons (NOT emojis), tight human copy. */
#layout-sidebar .listing li a,
#layout-sidebar .listing tbody td {
	color: var(--comail-ink);
	font-size: .9rem;
	padding: .45rem .7rem;
}
#layout-sidebar .listing li a::before {
	/* Elastic renders folder icons as a font ligature; keep them monochrome
	 * (the mock's "monochrome line icons"), inheriting the ink, not a tint. */
	color: var(--comail-ink);
	opacity: .7;
}
#layout-sidebar .listing li.selected > a,
#layout-sidebar .listing li.selected > a::before {
	color: var(--comail-accent);
	opacity: 1;
	background: rgba(63, 161, 192, .08);
}

/* Message list pane: polished rows, comfortable density. */
#layout-list {
	background: #fff;
	border-right: 1px solid rgba(0, 0, 0, .07);
}
.messagelist thead th,
.messagelist tbody td {
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	padding: .5rem .6rem;
}
.messagelist tbody tr:hover td {
	background: rgba(63, 161, 192, .04);
}
.messagelist .subject a {
	color: var(--comail-ink);
}
.messagelist tr.unread .subject a {
	font-weight: 700;
	color: var(--comail-ink);
}
/* Unread marker: a small warm dot (mock spec: monochrome icons, but the unread
 * state uses the warm highlight sparingly). */
.messagelist tr.unread .status .unreadcount,
.messagelist tr.unread td.status::before {
	color: var(--comail-warm);
}

/* Reading pane: comfortable measure + spacing so long mail reads well. */
#layout-content {
	background: #fff;
}
#messagebody,
.message-htmlpart,
.message-part {
	font-family: var(--comail-font-body);
	line-height: 1.55;
	max-width: 46rem;
}
#messageheader .subject,
.message-headers .subject {
	font-family: var(--comail-font-display);
	color: var(--comail-ink);
}
/* Quoted-reply bars in the deep-teal family. */
#messagebody blockquote {
	border-left-color: var(--comail-teal);
}

/* =====================================================================
 * BELT-AND-BRACES ACCENT (covers selectors the LESS vars miss)
 * ===================================================================== */
a, a:visited { color: #02413c; }
a:hover, a:active, a:focus { color: #3fa1c0; }

.messagelist .flagged td.flag span.flagged,
.messagelist td.flag .flagged::before {
	color: #e1c240;
}

#layout-content .header,
#layout-sidebar .header,
#layout-list .header {
	font-family: var(--comail-font-display);
}

/* =====================================================================
 * LOGIN — BRAND SPLIT-PANEL (chainlink #1354)
 * A full-bleed two-column login: a deep-teal BRAND panel (Cammie mascot +
 * the comail wordmark, the leading "c" the ONLY accent letter, + tagline)
 * beside a sage FORM panel (a "Sign in" heading, the handle input +
 * Continue button, and the comail footer). On narrow viewports the panels
 * STACK (brand on top). The login is OAUTH-ONLY — the handle form is the
 * single affordance; there is no username/password field (the atproto OAuth
 * handle flow IS the gate).
 *
 * THEME: the brand panel is intentionally DARK (deep teal, white text); the
 * form panel is the light sage surface. Both are FORCED (!important where
 * Elastic's OS-dark-mode cascade would otherwise repaint them — see the DARK
 * MODE guards below) so the login looks identical regardless of the OS
 * color-scheme. WCAG AA: white on teal #02413c ≈ 13:1; ink #012102 on sage
 * #dfe0c0 ≈ 12.8:1; login-scoped muted #525c56 on sage ≈ 5.15:1; the c-accent
 * cyan #3fa1c0 is used ONLY on the LARGE wordmark "c" (large-text AA ≥ 3:1).
 * ===================================================================== */
.task-login {
	background-color: #dfe0c0;
	color: var(--comail-ink) !important;
	/* Login-scoped darker muted tone so small text clears WCAG AA on sage:
	 * #525c56 on #dfe0c0 ≈ 5.15:1 (the app-wide #5b6660 is sub-AA on sage). */
	--comail-muted: #525c56;
}

/* The login fills the viewport; the split is edge-to-edge (no outer card). */
.task-login #layout {
	display: flex;
	min-height: 100vh;
	background-color: #dfe0c0 !important;
}
.task-login #layout-content {
	display: flex;
	flex: 1 1 auto;
	padding: 0;
	min-height: 100vh;
	background-color: #dfe0c0 !important;
}

/* The split container: two equal columns, full height, no card chrome. */
#comail-login-card.comail-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: none;
	margin: 0;
	min-height: 100vh;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	text-align: left;
}

/* ---- BRAND panel (left, deep teal) ---------------------------------- */
.comail-split-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Vertically + horizontally center the brand cluster in the panel; the
	 * brand-foot is absolutely pinned to the bottom-left (below). */
	align-items: flex-start;
	justify-content: center;
	padding: clamp(2rem, 5vw, 4rem);
	background: var(--comail-teal); /* #02413c */
	color: #fff;
}
.comail-split-brand-inner {
	max-width: 22rem;
}
/* cammie-icon.png has an OPAQUE cream background (it is NOT a transparent PNG),
 * so on the dark teal panel it sits inside a light sage BADGE — the opaque bg
 * then reads as an intentional rounded logo chip, not a glitch (operator rule,
 * memory comail-cammie-icon-not-transparent). NEVER place the bare icon on a
 * non-light surface. */
.comail-split-brand .comail-logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	border-radius: 1.25rem;
	background: #dfe0c0;
	margin: 0 0 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.comail-split-brand .comail-logo {
	display: block;
	width: 3.5rem;
	height: auto;
	margin: 0;
}
.comail-split-brand .comail-wordmark {
	font-family: var(--comail-font-display);
	font-size: clamp(2.6rem, 5vw, 3.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff !important;
	margin: 0;
}
/* The leading "c" is the ONLY accent-colored letter (brand rule). */
.comail-split-brand .comail-wordmark .c-accent {
	color: var(--comail-accent) !important;
}
.comail-split-brand #comail-login-tagline {
	font-family: var(--comail-font-body);
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: rgba(255, 255, 255, 0.82) !important;
	margin: 0.85rem 0 0;
	font-weight: 400;
	letter-spacing: 0;
}
.comail-split-brand-foot {
	position: absolute;
	left: clamp(2rem, 5vw, 4rem);
	bottom: clamp(2rem, 5vw, 4rem);
	margin: 0;
	font-family: var(--comail-font-body);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6) !important;
}

/* ---- FORM panel (right, sage) --------------------------------------- */
.comail-split-form {
	display: flex;
	flex-direction: column;
	padding: clamp(2rem, 5vw, 4rem);
	background: #dfe0c0;
}
/* The form grows to fill and vertically centers; the legal footer (a direct
 * child, flex:0) then sits at the bottom of the panel. */
.comail-split-form-inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
}
.comail-form-heading {
	font-family: var(--comail-font-display);
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--comail-ink) !important;
	margin: 0 0 0.4rem;
}
.comail-form-sub {
	font-family: var(--comail-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--comail-muted, #525c56) !important;
	margin: 0 0 1.6rem;
}

/* ---- handle input + Continue button --------------------------------- *
 * The comail_auth handle login — a HANDLE TEXT INPUT + a "Continue" button
 * (same handle-first affordance as the main site's /enroll), no password
 * field. The form GETs the typed handle to the bridge's /webmail endpoint
 * (login.html owns the action); ONLY styling lives here. Dark ink on white
 * is the contrast fix — light-on-light was the operator's #1 login bug. */
.comail-auth {
	margin: 0 0 1rem;
}
.comail-auth-form {
	display: block;
	width: 100%;
	text-align: left;
}
.comail-auth-label {
	display: block;
	font-family: var(--comail-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--comail-ink) !important;
	margin: 0 0 0.35rem;
}
.comail-auth-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 0.85rem;
	padding: 0.7rem 0.85rem;
	font-family: var(--comail-font-body);
	font-size: 1rem;
	color: var(--comail-ink) !important;
	background: #fff;
	caret-color: var(--comail-ink);
	border: 1px solid var(--comail-line, #b9bd9a);
	border-radius: 0.4rem;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.comail-auth-input::placeholder {
	color: var(--comail-muted, #525c56);
	opacity: 1;
}
.comail-auth-input:focus,
.comail-auth-input:focus-visible {
	outline: none;
	border-color: var(--comail-accent);
	box-shadow: 0 0 0 3px rgba(63, 161, 192, 0.25);
}
/* The "Continue" submit — ink fill, sage text, ink→teal hover (white-on-teal
 * is AA; white-on-cyan is not). */
.comail-auth-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	background: var(--comail-ink);
	color: #dfe0c0;
	border: 1px solid var(--comail-ink);
	border-radius: 0.4rem;
	padding: 0.72rem 1rem;
	font-family: var(--comail-font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.comail-auth-btn:hover,
.comail-auth-btn:focus {
	background: var(--comail-teal);
	border-color: var(--comail-teal);
	color: #fff;
}
.comail-auth-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(63, 161, 192, 0.45);
}
.comail-auth-error {
	color: #02413c;
	font-size: 0.85rem;
}

/* ---- in-form support line (#login-footer: product · support) -------- */
#comail-login-card #login-footer,
#comail-login-card #login-footer a {
	color: var(--comail-muted, #525c56) !important;
	font-size: 0.8rem;
}
#comail-login-card #login-footer {
	margin: 1.1rem 0 0;
	text-align: left;
}

/* =====================================================================
 * LOGIN FOOTER — mirrors web-frontend/src/layouts/Layout.astro <footer>:
 * a tagline row (comail · Atmosphere Mail LLC · cooperative email for
 * atproto), a nav row (Terms / Privacy / Acceptable use / Docs / FAQ /
 * About / Source), and a meta row (version · Follow @comail.at). Pinned to
 * the BOTTOM of the form panel (flex:0 0 auto), hairline top rule, muted,
 * centered — same grammar as the app footer (globals.css `footer`).
 * ===================================================================== */
#comail-login-card .comail-login-foot {
	flex: 0 0 auto;
	margin: 2rem auto 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--comail-line, #b9bd9a);
	font-family: var(--comail-font-body);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--comail-muted, #525c56) !important;
	text-align: center;
	width: 100%;
	max-width: 420px;
}
#comail-login-card .comail-login-foot a {
	color: var(--comail-muted, #525c56);
	text-decoration: underline;
	text-decoration-color: var(--comail-line, #b9bd9a);
	text-underline-offset: 2px;
}
#comail-login-card .comail-login-foot a:hover,
#comail-login-card .comail-login-foot a:focus {
	color: var(--comail-ink);
	text-decoration-color: var(--comail-ink);
}
#comail-login-card .comail-login-foot .foot-tagline {
	margin: 0 0 0.35rem;
}
#comail-login-card .comail-login-foot .foot-brand {
	font-weight: 700;
}
#comail-login-card .comail-login-foot .foot-sep {
	margin: 0 0.4em;
	opacity: 0.5;
}
#comail-login-card .comail-login-foot .foot-nav {
	margin: 0 0 0.35rem;
}
#comail-login-card .comail-login-foot .foot-nav a:not(:last-child)::after {
	content: " ·";
	color: var(--comail-muted, #525c56);
	opacity: 0.5;
}
#comail-login-card .comail-login-foot .foot-meta {
	margin: 0;
	font-size: 0.75rem;
}
#comail-login-card .comail-login-foot .foot-meta .foot-version {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	opacity: 0.6;
	letter-spacing: 0.02em;
}

/* ---- responsive: stack the panels on narrow viewports --------------- */
@media (max-width: 48rem) {
	#comail-login-card.comail-split {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	.comail-split-brand {
		padding: 2.5rem 1.5rem 2rem;
		text-align: center;
		align-items: center;
	}
	.comail-split-brand-inner {
		margin: 0 auto;
	}
	.comail-split-brand .comail-logo-badge {
		margin-left: auto;
		margin-right: auto;
	}
	/* The "cooperative email for atproto" brand-foot is redundant with the
	 * legal footer once stacked; drop it to keep the brand band tight. */
	.comail-split-brand-foot {
		display: none;
	}
	.comail-split-form {
		padding: 2rem 1.5rem;
	}
}

/* =====================================================================
 * CONNECTED CLIENTS / BYOMC PANEL (mock 02-connected-clients.png / .html)
 * The Account → Connected clients surface. Markup mirrors the design-system
 * shared.css mock (templates/connected_clients.html) so these scoped rules
 * paint it without divergence: a two-card grid (hosted webmail + BYOMC), an
 * acct-subnav, masthead + lede, a conn-table, and an issue-box/credential
 * pair. The BYOMC card is a FIRST-CLASS peer of the hosted webmail, not a
 * fallback (open protocols + a nice default client). comail.at hostnames
 * ONLY — never atmos.email (brand rule); the endpoints mirror inboxd's real
 * implicit-TLS IMAP/submission edges (roundcube.nix: 993 / 465).
 *
 * Tokens mirror _design/shared.css exactly (--line, --surface, --muted,
 * --accent, --accent-ink, --ink, --font-display, --font-mono, --t-* sizes).
 * ===================================================================== */
.comail-clients-page {
	/* The page owns its own surface (the mock's .inbox-body/.page-pad). */
	background: #dfe0c0;
	color: var(--comail-ink);
	font-family: var(--comail-font-body);
}
/* Local design tokens (mirror shared.css var block — kept here so the
 * page is self-describing and the @@TOKEN@@ brand SSOT drives accent/ink). */
.comail-clients-page {
	--line: #b9bd9a;
	--surface: #f5f5e0;
	--muted: #5b6660;
	--accent: var(--comail-accent);
	--accent-ink: var(--comail-teal);
	--ink: var(--comail-ink);
	--bg: #dfe0c0;
	--font-display: var(--comail-font-display);
	--font-body: var(--comail-font-body);
	--font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
	--t-xs: 0.8125rem;
	--t-s: 0.9375rem;
	--t-m: 1.0625rem;
	--t-l: 1.1875rem;
	--t-2xl: 2rem;
}
/* Page wrapper = the mock's .page-pad.page-pad--wide. Centered, generous. */
.comail-clients-page .comail-page {
	padding: 2rem 2.5rem 3rem;
	max-width: 920px;
	margin: 0 auto;
}
.comail-clients-page .comail-page--wide {
	max-width: 1180px;
}

/* Account sub-nav (Domains / Deliverability / Connected clients). */
.comail-clients-page .acct-subnav {
	display: flex;
	gap: 1.4rem;
	margin: 0 0 1.4rem;
	font-size: var(--t-s);
}
.comail-clients-page .acct-subnav a {
	color: var(--muted);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
}
.comail-clients-page .acct-subnav a:hover {
	color: var(--accent-ink);
	border-bottom-color: var(--accent-ink);
}
.comail-clients-page .acct-subnav a[aria-current="page"] {
	color: var(--ink);
	font-weight: 700;
	border-bottom-color: var(--accent);
}

/* Masthead + lede. The heading renders in normal ink — the accent-blue "c"
 * treatment is reserved for the "comail" WORDMARK ONLY (brand rule: the "c" of
 * comail is the single accent letter). Generic heading first-letters like the
 * "C" of "Connected clients" are NOT accent-colored. */
.comail-clients-page .masthead-sub {
	font-family: var(--font-display);
	font-size: var(--t-2xl);
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0 0 0.25rem;
	color: var(--ink);
}
/* .cmark colors ONLY the lowercase "c" inside a "comail" wordmark/hostname
 * (e.g. alice@<span class="cmark">c</span>omail.at). It must never apply to
 * heading first-letters — those have no .cmark span in the markup. */
.comail-clients-page .cmark { color: var(--accent); }
.comail-clients-page .lede {
	font-style: italic;
	font-size: var(--t-l);
	color: var(--muted);
	line-height: 1.4;
	margin: 0 0 1.4rem;
	max-width: 34em;
}

/* Two-card grid: hosted webmail (left) + BYOMC (right, primary/accented). */
.comail-clients-page .cards {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 1.5rem;
	align-items: start;
}
.comail-clients-page .card {
	border: 1px solid var(--line);
	border-radius: 0.6rem;
	background: var(--surface);
	padding: 1.5rem 1.6rem;
}
.comail-clients-page .card.primary {
	display: flex;
	flex-direction: column;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}
.comail-clients-page .card h3 {
	margin: 0 0 0.3rem;
	font-size: var(--t-m);
	font-family: var(--font-body);
	color: var(--ink);
}
.comail-clients-page .card .sub {
	margin: 0 0 0.7rem;
	color: var(--muted);
	font-size: var(--t-s);
}
.comail-clients-page .card .helper {
	font-size: var(--t-xs);
	color: var(--muted);
	margin: 0.2rem 0 0;
}
.comail-clients-page .card .kv {
	font-size: var(--t-s);
	margin: 0.25rem 0;
	color: var(--ink);
}
.comail-clients-page .card .kv b { color: var(--accent-ink); }

/* "Default" badge — warm yellow, the mock's sparing accent. */
.comail-clients-page .badge {
	display: inline-block;
	font-size: var(--t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink);
	background: var(--comail-warm);
	border-radius: 4px;
	padding: 0.05rem 0.5rem;
	margin-left: 0.4rem;
	vertical-align: middle;
}

/* Connection matrix table. comail.at hosts only. */
.comail-clients-page .conn-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-s);
	margin: 0.4rem 0 0.6rem;
}
.comail-clients-page .conn-table th,
.comail-clients-page .conn-table td {
	text-align: left;
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid var(--line);
}
.comail-clients-page .conn-table th {
	color: var(--accent-ink);
	font-weight: 700;
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.comail-clients-page .conn-table tr:last-child td { border-bottom: 0; }
.comail-clients-page .conn-table .mono { font-family: var(--font-mono); }
.comail-clients-page .mono { font-family: var(--font-mono); }

/* BYOMC issue + credential row (2-col). */
.comail-clients-page .byomc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
	margin-top: 1.1rem;
	align-items: start;
}
.comail-clients-page .byomc-row .issue-box,
.comail-clients-page .byomc-row .credential {
	margin-top: 0;
	height: 100%;
}
.comail-clients-page .issue-box {
	margin-top: 1rem;
	border: 1px dashed var(--line);
	border-radius: 0.5rem;
	padding: 1rem;
	background: var(--bg);
}
.comail-clients-page .issue-box label {
	display: block;
	font-size: var(--t-s);
	margin: 0 0 0.25rem;
	color: var(--accent-ink);
}
.comail-clients-page .issue-box input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--line);
	border-radius: 0.35rem;
	padding: 0.5rem;
	font: inherit;
	background: var(--surface);
	color: var(--ink);
}
.comail-clients-page .credential {
	margin: 1.25rem 0;
	padding: 1.1rem 1.4rem;
	background: var(--surface);
	border: 1px solid var(--line);
}
.comail-clients-page .credential-label {
	font-size: var(--t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--accent);
	margin-bottom: 0.5rem;
}
.comail-clients-page .credential-secret {
	display: block;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 0.35rem;
	padding: 0.6rem;
	word-break: break-all;
	font-size: var(--t-m);
}
.comail-clients-page .credential-note {
	font-size: var(--t-xs);
	font-style: italic;
	color: var(--muted);
	margin-top: 0.75rem;
}

/* Buttons — real <a> affordances, NEVER icon-glyph fakes. Title tooltips. */
.comail-clients-page .btn {
	display: inline-block;
	font-family: inherit;
	font-size: var(--t-s);
	font-weight: 700;
	color: var(--bg);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0.35rem;
	padding: 0.5rem 0.9rem;
	text-decoration: none;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
.comail-clients-page .btn:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bg);
}
.comail-clients-page .btn-small { padding: 0.3rem 0.7rem; font-size: var(--t-xs); }
.comail-clients-page .btn-accent {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.comail-clients-page .btn-accent:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: #fff;
}

/* On narrow viewports the two columns stack (mirrors shared.css @media). */
@media (max-width: 60rem) {
	.comail-clients-page .cards { grid-template-columns: 1fr; }
	.comail-clients-page .byomc-row { grid-template-columns: 1fr; }
}

/* =====================================================================
 * DARK MODE CHROME
 * =====================================================================
 * NOTE: the LOGIN surface is deliberately EXCLUDED from dark mode. Elastic's
 * ui.js toggles html.dark-mode from the OS color-scheme (matchMedia
 * prefers-color-scheme: dark), but the login background is force-kept light
 * sage by the !important rules below — so the dark-mode text overrides that
 * used to live here (#f5f5e0 wordmark/heading, #c5d1d3 subtitle) produced
 * LIGHT TEXT ON LIGHT SAGE: an unreadable washed-out login (the operator's
 * #1 bug). The login now FORCES a light theme via the !important guard
 * below, so it renders proper dark ink on sage regardless of html.dark-mode.
 * (The old non-important html.dark-mode .task-login { background: #012102 }
 * rule was REMOVED — it was dead code fully overridden by the guard and a
 * latent footgun: if the guard were ever dropped, dark-bg + dark-ink =
 * the exact invisible-login bug this block fixes.) */

/* ---- FORCED THEME GUARD (login split-panel) ---------------------------
 * The login looks IDENTICAL regardless of the OS dark-mode setting: the
 * BRAND panel stays deep teal with white text + the cyan accent "c", and the
 * FORM panel stays sage with dark ink. Elastic toggles html.dark-mode from
 * the OS color-scheme and would otherwise repaint both panels; these
 * !important rules (higher specificity than the base via html.dark-mode) pin
 * the intended split. We do NOT ship a dark login — light-text-on-light-sage
 * was the operator's #1 invisible-login bug, so the form side is force-light. */
html.dark-mode .task-login,
html.dark-mode .task-login #layout,
html.dark-mode .task-login #layout-content {
	background-color: #dfe0c0 !important;
}
/* Brand panel: deep teal, white wordmark, cyan accent letter, light tagline. */
html.dark-mode .comail-split-brand {
	background: var(--comail-teal) !important;
}
html.dark-mode .comail-split-brand .comail-wordmark {
	color: #fff !important;
}
html.dark-mode .comail-split-brand .comail-wordmark .c-accent {
	color: var(--comail-accent) !important;
}
html.dark-mode .comail-split-brand #comail-login-tagline {
	color: rgba(255, 255, 255, 0.82) !important;
}
html.dark-mode .comail-split-brand-foot {
	color: rgba(255, 255, 255, 0.6) !important;
}
/* Form panel: sage surface, dark-ink heading, muted sub/footer. */
html.dark-mode .comail-split-form {
	background: #dfe0c0 !important;
}
html.dark-mode .comail-form-heading {
	color: var(--comail-ink) !important;
}
html.dark-mode .comail-form-sub,
html.dark-mode .comail-auth-error,
html.dark-mode #comail-login-card #login-footer,
html.dark-mode #comail-login-card #login-footer a,
html.dark-mode #comail-login-card .comail-login-foot a,
html.dark-mode #comail-login-card .comail-login-foot,
html.dark-mode #comail-login-card .comail-login-foot .foot-brand {
	color: var(--comail-muted, #525c56) !important;
}
/* The handle label + the text typed into the handle input MUST stay dark ink
 * even under OS dark mode — light text on the white input was the bug class. */
html.dark-mode .comail-auth-label,
html.dark-mode .comail-auth-input {
	color: var(--comail-ink) !important;
}
html.dark-mode .comail-auth-input {
	background: #fff !important;
	caret-color: var(--comail-ink) !important;
}
html.dark-mode #comail-login-card .comail-login-foot {
	border-top-color: var(--comail-line, #b9bd9a) !important;
}
/* The button keeps its ink fill + sage text in both themes; reinforce the
 * dark-mode hover so it never picks up a light-on-light state. */
html.dark-mode .comail-auth-btn {
	background: var(--comail-ink) !important;
	color: #dfe0c0 !important;
}
html.dark-mode .comail-auth-btn:hover,
html.dark-mode .comail-auth-btn:focus {
	background: var(--comail-teal) !important;
	border-color: var(--comail-teal) !important;
	color: #fff !important;
}

/* Dark mode 3-pane (TWO-TONE preserved): the folder column stays the distinct
 * tonal column — a deep slate — and the list + reading pane share a slightly
 * darker surface so the two-tone separation reads in dark mode too. Folder text
 * is forced LIGHT here so it stays legible on the slate sidebar (the light-mode
 * !important ink guard would otherwise paint dark-on-dark). */
html.dark-mode #layout-sidebar,
html.dark-mode .sidebar {
	background: #1a2024;
	border-right-color: rgba(255, 255, 255, .08);
}
html.dark-mode #layout-list,
html.dark-mode #layout-content {
	background: #12171a;
}
/* Legible folder ink in dark mode (overrides the light-mode !important guard). */
html.dark-mode #layout-sidebar .listing li a,
html.dark-mode #layout-sidebar .listing tbody td,
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-sidebar .boxtitle {
	color: #e7ead8 !important;
}
html.dark-mode #layout-sidebar .listing li.selected > a,
html.dark-mode #layout-sidebar .listing li.selected > a::before {
	color: var(--comail-accent) !important;
}
/* Dark-mode folder list: same no-per-item-divider principle as light mode —
 * Elastic's near-white --color-list-border is even more conspicuous on the
 * slate sidebar. Clean even spacing only; active folder keeps the accent. */
html.dark-mode #layout-sidebar .listing li,
html.dark-mode #layout-sidebar .listing tbody td,
html.dark-mode #layout-sidebar .treelist li,
html.dark-mode #layout-sidebar #mailboxlist li,
html.dark-mode #layout-sidebar #mailboxlist li > a {
	border-bottom: 0 !important;
	border-top: 0 !important;
}
/* Message-list rows in dark mode: dark surface, light text, with the same
 * hairline-divider principle as light mode (a continuous dark surface, rows
 * split by a thin low-opacity line — NOT a gap). */
html.dark-mode .messagelist tbody tr {
	background: #12171a;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
html.dark-mode .messagelist tbody tr:last-child { border-bottom: 0; }
html.dark-mode .messagelist tbody tr:hover { background: #1a2024; }
html.dark-mode .messagelist tbody tr.selected,
html.dark-mode .messagelist tbody tr.unread.selected {
	background: #16202a;
}
html.dark-mode .messagelist tbody td.subject .subject a,
html.dark-mode .messagelist tbody td.subject .msgicon + a,
html.dark-mode .messagelist tbody td.subject a {
	color: #e7ead8 !important;
}
html.dark-mode .messagelist tbody td.date,
html.dark-mode .messagelist tbody tr:not(.unread) td.subject {
	color: #9aa6a0 !important;
}
html.dark-mode #layout-content > .header,
html.dark-mode #messagelist-header,
html.dark-mode #layout-list > .header {
	background: #12171a !important;
	border-bottom-color: rgba(255, 255, 255, .08) !important;
}

/* ============================================================================
 * COMAIL TOP-BAR + 3-PANE (mock 01-inbox.png — the round-2 fidelity layer)
 *
 * js/comail.js builds .comail-topbar (wordmark + nav + search + Compose +
 * identity chip) over Elastic's stock #taskmenu, which it hides. The 3-pane
 * (#layout-sidebar / #layout-list / #layout-content) is restyled toward the
 * mock's slim near-white folder column, polished message list, and generous
 * reader. Tokens mirror _design/shared.css exactly (the design SSOT).
 * ===================================================================== */

/* The built top bar. Sticky, sage paper, hairline bottom rule — same grammar
 * as the mock's .appnav.appnav-inbox. */
.comail-topbar {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: nowrap;
	position: sticky;
	top: 0;
	z-index: 200;
	padding: 0.7rem 1.75rem;
	background: #dfe0c0;
	border-bottom: 1px solid var(--comail-line, #b9bd9a);
	font-family: var(--comail-font-body);
	font-size: 0.9375rem;
}
.comail-topbar .comail-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	text-decoration: none;
	padding-right: 1rem;
	border-right: 1px solid var(--comail-line, #b9bd9a);
	margin-right: 0.25rem;
}
.comail-topbar .comail-cammie { height: 1.7rem; width: auto; }
.comail-topbar .comail-wm {
	font-family: var(--comail-font-display);
	font-size: 1.1875rem;
	letter-spacing: -0.03em;
	color: var(--comail-ink);
	line-height: 1;
}
.comail-topbar .comail-wm .drop { color: var(--comail-accent); }

.comail-nav { display: inline-flex; align-items: baseline; gap: 1.1rem; }
.comail-nav a {
	color: var(--comail-ink);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}
.comail-nav a:hover { color: var(--comail-teal); border-bottom-color: var(--comail-teal); }
.comail-nav a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--comail-accent); }

/* Rounded search pill (mock .appnav-search). */
.comail-search {
	flex: 0 1 300px;
	margin-left: 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #fcfcef;
	border: 1px solid var(--comail-line, #b9bd9a);
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	color: var(--comail-muted, #5b6660);
}
.comail-search input {
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--comail-ink);
	outline: none;
	width: 100%;
}
.comail-search .licon {
	width: 1.05em; height: 1.05em;
	stroke: currentColor; fill: none; stroke-width: 1.6;
	stroke-linecap: round; stroke-linejoin: round;
}
.comail-spacer { flex: 1 1 auto; }

/* Compose button — mock .btn (ink fill, sage text). */
.comail-topbar .comail-compose {
	display: inline-block;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #dfe0c0;
	background: var(--comail-ink);
	border: 1px solid var(--comail-ink);
	border-radius: 0;
	padding: 0.5rem 1.2rem;
	text-decoration: none;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
.comail-topbar .comail-compose:hover { background: var(--comail-accent); border-color: var(--comail-accent); }

/* Identity chip — avatar + handle + address, pinned right. */
.comail-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding-left: 1rem;
	border-left: 1px solid var(--comail-line, #b9bd9a);
	cursor: pointer;
}
.comail-chip .av {
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--comail-warm);
	color: var(--comail-ink);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--comail-font-display); font-size: 1rem;
}
.comail-chip .who { line-height: 1.15; }
.comail-chip .who .nm { display: block; font-size: 0.9375rem; color: var(--comail-ink); }
/* The address sits on the sage topbar, so it uses the LOGIN-darker muted tone
 * (#525c56 on #dfe0c0 ≈ 5.15:1, AA for normal text) — the app-wide #5b6660 is
 * 4.43:1 on sage (sub-AA). Forced !important so OS dark-mode can't wash it out. */
.comail-chip .who .ad { display: block; font-family: var(--comail-font-mono, ui-monospace); font-size: 0.8125rem; color: #525c56 !important; }
.comail-chip .caret { color: #525c56 !important; margin-left: 0.1rem; }

/* ---- 3-pane restyle --------------------------------------------------- */

/* Hide the stock vertical #taskmenu rail ENTIRELY. Its items (Inbox/Account)
 * live in the comail top bar now; Elastic media-query specificity kept the
 * rail visible as a dark left sliver even when comail.js set [hidden]. Force
 * it off with !important so no width/height specificity can resurrect it.
 *
 * ROUND 5: #taskmenu is only the inner .menu; its WRAPPING container
 * #layout-menu (78px, dark rgb(47,58,63)) is what actually paints the dark
 * strip far-left. Hide the wrapper too — the comail topbar is the ONLY nav. */
#layout-menu,
#taskmenu {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}
#layout-menu[hidden],
#taskmenu[hidden] { display: none !important; }

/* The 3-pane sits below the comail top bar. Elastic pins #layout to the top
 * with the taskmenu; push it under the bar. */
#layout {
	margin-top: 0;
	min-height: calc(100vh - 3.4rem);
}

/* ---- TWO-TONE LAYOUT (the operator's cohesion move) -------------------
 * The FOLDER COLUMN = comail sage paper (#dfe0c0); the MESSAGE LIST +
 * READING PANE = plain WHITE. Clean two-tone separation, the standard email-
 * client pattern. White content means message text is black-on-white (readable,
 * no contrast risk); the sage sidebar carries the brand without muddying the
 * mail surfaces. Hairline dividers separate the three real sections.
 *
 * Folder text is forced to dark ink (!important) so OS dark-mode can't wash it
 * out on the sage column — the same legibility guard the login got. */
#layout-sidebar,
.sidebar {
	background: #dfe0c0 !important;
	border-right: 1px solid var(--comail-line, #b9bd9a) !important;
	min-width: 200px;
	max-width: 220px;
	/* Even vertical rhythm snapped to the t-scale. */
	padding: var(--t-m) var(--t-s);
}
#layout-sidebar .header,
#layout-sidebar .boxtitle {
	background: transparent !important;
	border-bottom: 1px solid var(--comail-line, #b9bd9a) !important;
	color: var(--comail-ink) !important;
	font-family: var(--comail-font-display) !important;
}
/* Folder group labels + rows toward the mock's quiet list. Ink is forced so the
 * sage sidebar stays legible in dark mode. */
#layout-sidebar .listing li a,
#layout-sidebar .listing tbody td {
	color: var(--comail-ink) !important;
	font-size: var(--t-s);
	/* Even row padding snapped to the scale — consistent row height. */
	padding: 0.5rem var(--t-s);
}
/* Folder list: NO per-item divider. Elastic paints a `border-bottom` of
 * --color-list-border (a near-white #f4f4f4 derived from lighten(@color-black,
 * 85%)) on every .listing li / tbody td — on the sage sidebar that reads as a
 * WHITE horizontal line between each folder (Inbox/Drafts/Sent/Junk/Trash),
 * which the operator flagged ("we shouldn't use white as a dividing line"). A
 * folder list doesn't need a line between items — clean even spacing carries
 * it, and the active folder is already marked by the c-accent inset bar
 * above. Reset the border to 0 here only (NOT on the white message-list pane,
 * which keeps its own hairlines). If a group separator is ever wanted between
 * folder GROUPS, it must be a subtle muted hairline, never white. */
#layout-sidebar .listing li,
#layout-sidebar .listing tbody td,
#layout-sidebar .treelist li,
#layout-sidebar #mailboxlist li,
#layout-sidebar #mailboxlist li > a {
	border-bottom: 0 !important;
	border-top: 0 !important;
}
#layout-sidebar .listing li a:hover { background: rgba(2, 65, 60, 0.06); }
#layout-sidebar .listing li.selected > a {
	background: transparent !important;
	font-weight: 700;
	box-shadow: inset 2px 0 0 var(--comail-accent) !important;
	color: var(--comail-ink) !important;
}
#layout-sidebar .listing li.selected > a::before { color: var(--comail-teal) !important; }

/* =====================================================================
 * KILL ELASTIC BLEED-THROUGH (round 4)
 * The comail top bar owns nav/search/compose/identity. Elastic still renders
 * its own toolbars below it WITH TEXT UNDER ICONS (the forbidden ugly pattern).
 * Hide every redundant Elastic chrome surface; keep only the comail top bar +
 * the clean 3-pane. Mock 01-inbox has NO such toolbar.
 * ===================================================================== */

/* #1 — the list toolbar: Select / Threads / Options / Refresh (text-under
 * icons). Mock has none. */
#layout-list > .header,
#messagelist-header,
#layout-list .toolbar,
#layout-list .searchfilter,
#layout-list .pagenav,
.messagelist thead,
#messagelist-options,
#listoptions {
	display: none !important;
}

/* #3 — the redundant Elastic quicksearch row. The comail top bar's rounded
 * "Search your mail" pill is the only search. Elastic renders the mail
 * quicksearch as <div class="searchbar menu" role="search"> wrapping the
 * #mailsearchform input; hiding the input alone left the magnifier/envelope/
 * chevron row visible below the topbar. Hide the whole .searchbar wrapper. */
#layout-list .searchbar,
#layout-list .searchbar.menu,
#layout-list [role="search"],
#mailsearchform,
#mailsearchcontainer,
.searchbox,
#searchform,
.form-group.search {
	display: none !important;
}

/* #1 (cont.) — the message/reading-pane toolbar: Reply / Reply all / Forward /
 * Delete / Mark / More. These carry the REAL Roundcube commands, so they must
 * stay in the DOM and WORK. js/comail.js builds the ONE clean icon-only
 * .comail-reader-toolbar (reply/reply-all/forward/archive/delete, driven via
 * rcmail.command) and inserts it above the message body. To avoid the
 * TWO-TOOLBAR redundancy (Elastic's #toolbar-menu + the comail toolbar), the
 * Elastic #toolbar-menu is HIDDEN VISUALLY but kept IN THE DOM — collapsed to
 * zero size + inert (visibility:hidden, not display:none, so .click() on its
 * command <a> buttons still fires for any fallback path, and Roundcube's own
 * command-state wiring stays intact). The comail reader toolbar is the single
 * visible action toolbar.
 *
 * SCOPING: gated to the message-show/preview view (body.action-show /
 * .action-preview) — where the comail reader toolbar exists. The COMPOSE view
 * (action-compose / action-edit) keeps its full Elastic toolbar (Send/Save/
 * Draft) visible + functional; comail ships no compose toolbar of its own, so
 * hiding Elastic's there would strand the composer with no Send. The comail
 * reader toolbar is only built when #message-header is present (show view).
 *
 * NOTE: do NOT hide #layout-content > .header itself — that band also carries
 * the message subject (.header-title). Only #toolbar-menu (the action row) is
 * hidden; the subject stays visible. .header just loses its toolbar + gets a
 * clean hairline divider.
 *
 * LIVE DOM (verified on the box): the Elastic toolbar is
 *   #layout-content > .header  >  #toolbar-menu.menu.toolbar.listing.iconized
 * and each action is  <a class="reply" title="Reply to sender">
 *   <span class="inner">Reply</span></a>  — the icon is the <a>'s ::before
 * (font-family:Icons), the LABEL is the .inner span. */
.task-mail.action-show #toolbar-menu,
.task-mail.action-preview #toolbar-menu,
.task-mail.action-show #messagetoolbar,
.task-mail.action-preview #messagetoolbar,
.task-mail.action-show #mailtoolbar,
.task-mail.action-preview #mailtoolbar,
.task-mail.action-show .header .toolbar,
.task-mail.action-preview .header .toolbar {
	/* Collapse the redundant Elastic action toolbar to nothing — the comail
	 * .comail-reader-toolbar is the single visible action toolbar. Kept in the
	 * DOM (visibility, not display) so command <a> buttons stay clickable for
	 * any fallback + Roundcube command-state wiring. */
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	border: 0 !important;
}
/* The .header band that wraps the toolbar + subject: keep it (it holds the
 * subject) but strip the toolbar's old background/border so it reads as a clean
 * white surface with a single hairline divider above the message. */
#layout-content > .header {
	background: #fff !important;
	border-bottom: 1px solid var(--comail-line, #b9bd9a) !important;
	box-shadow: none !important;
}
/* The action <a> buttons inside the hidden toolbar: keep them present +
 * clickable (for the comail toolbar's real.click() fallback) but fully inert
 * visually. Icon-only by construction (the toolbar is zero-height). */
#toolbar-menu a .inner,
#layout-content > .header .toolbar a .inner,
.header .toolbar a .inner,
#messagetoolbar a .inner,
#mailtoolbar a .inner {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* #4 — the folder-column identity header (alice@comail.at ⋮). The identity
 * lives in the topbar chip; the folder column should be JUST the folder list on
 * a clean near-white surface per the mock. Hide Elastic's sidebar .header row
 * (logo + username + ⋮ menu) but keep the folder tree itself. */
#layout-sidebar > .header,
.sidebar > .header,
#folderlist-header,
.sidebar .header .username,
.sidebar .header .button,
.sidebar .header .more,
.sidebar .header .logo {
	display: none !important;
}

/* #5 — reading-pane empty state: replace Elastic's big plain cube watermark
 * with the mock's cleaner empty state. The cube is an
 * <iframe id="messagecontframe" src=".../watermark.html">. When no message is
 * selected RC points that iframe at skins/elastic/watermark.html; when a real
 * message opens it points at the message body. CSS matches the watermark src
 * to hide the cube ONLY in the empty state, and #layout-content::before paints
 * a calm comail mark + hint underneath. Scoped to the mail task so it never
 * bleeds onto the login/connected-clients #layout-content. No JS required
 * (the skin JS is long-cached by the browser; CSS is cache-busted by RC's
 * ?s= mtime). */
.task-mail.action-none #layout-content > .iframe-wrapper > iframe[src*="watermark"],
.task-mail.action-none #messagecontframe[src*="watermark"] {
	display: none !important;
}
/* The comail empty-state marker (calm "c" + hint) is painted by ::before/::after
 * ONLY in the genuinely-empty reading pane. CRITICAL SCOPING: gate on
 * body.action-none — Roundcube sets action-none when nothing is open, and
 * action-show / action-preview / action-compose / action-edit when a message is
 * open or being composed. Without this gate the absolutely-positioned overlay
 * bled through the OPEN message body and the COMPOSE editor (the operator saw
 * "Select a message to read" under a real message / inside the composer). The
 * action-none gate makes the overlay strictly the empty state. */
.task-mail.action-none #layout-content { position: relative; }
.task-mail.action-none #layout-content::before {
	content: "c";
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	font-family: var(--comail-font-display);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--comail-accent);
	opacity: 0.45;
	letter-spacing: -0.04em;
	pointer-events: none;
	z-index: 0;
}
/* The hint line under the mark, via a sibling ::after. */
.task-mail.action-none #layout-content::after {
	content: "Select a message to read";
	position: absolute;
	top: calc(50% + 2.4rem);
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--comail-font-body);
	font-size: 0.875rem;
	color: var(--comail-muted, #5b6660);
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
}
/* When a message is open (any non-empty action), the iframe wrapper is opaque
 * and on top; belt-and-braces in case a stale overlay specificity slips through. */
.task-mail #layout-content > .iframe-wrapper { position: relative; z-index: 1; background: #fff; }

/* ---- message list: card-like rows toward the mock's .mrow ------------
 * Roundcube renders a <table id="messagelist">. We hide the noisy columns
 * (selection/threads/status/size/flag/attachment) and present each <tr> as a
 * grid card: from (bold) / subject / snippet (truncated) / date right.
 *
 * TWO-TONE: the list pane is a CONTINUOUS WHITE surface (sage is reserved for
 * the folder column). Rows separate by a single 1px HAIRLINE in a muted
 * neutral (--comail-hair, a low-opacity ink ~#e6e6de) — a thin, intentional
 * line, NOT the white/cream gap that showed the page background through, and
 * NOT the heavier sage --comail-line. Dividers read as present-but-quiet
 * hairlines so the list is one clean white surface, not a boxed grid. */
#layout-list { background: #fff !important; }
#layout-list > .header,
#messagelist-header {
	background: #fff !important;
	border-bottom: 1px solid var(--comail-line, #b9bd9a) !important;
	/* Even header inset snapped to the scale — matches the row padding rhythm. */
	padding: var(--t-m) 1rem;
}
#messagelist-header .header-title,
#layout-list .header .header-title {
	font-family: var(--comail-font-display) !important;
	font-size: var(--t-l);
}

.messagelist {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
/* Hide columns the mock doesn't show; keep subject (fromto) + date. */
.messagelist th.selection,
.messagelist td.selection,
.messagelist th.threads,
.messagelist td.threads,
.messagelist th.status,
.messagelist td.status,
.messagelist th.size,
.messagelist td.size,
.messagelist th.flag,
.messagelist td.flag,
.messagelist th.attachment,
.messagelist td.attachment { display: none; }

.messagelist th.subject,
.messagelist td.subject { width: auto; }
.messagelist th.date,
.messagelist td.date { width: 92px; text-align: right; }

.messagelist thead { display: none; }
.messagelist tbody tr {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35rem 0.6rem;
	/* Even L/R padding snapped to the t-scale (1rem) — no ragged asymmetry. */
	padding: var(--t-m) 1rem;
	/* Hairline row divider: a single 1px --comail-hair line at the BOTTOM of
	 * each row, so the list reads as one continuous white surface with quiet,
	 * intentional separators (NOT white rows split by a cream gap that showed
	 * the page background through). The last row needs no trailing divider, so
	 * it's removed via :last-child below. */
	border-bottom: 1px solid var(--comail-hair, #e6e6de);
	background: #fff;
	cursor: pointer;
	align-items: start;
}
/* No trailing hairline under the final row — the list ends clean. */
.messagelist tbody tr:last-child { border-bottom: 0; }
.messagelist tbody tr:hover { background: #f7f8ee; }
.messagelist tbody tr.selected,
.messagelist tbody tr.unread.selected {
	background: #f1f3e3;
	box-shadow: inset 3px 0 0 var(--comail-accent);
}
.messagelist tbody td.subject { grid-column: 1; }
.messagelist tbody td.date {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.8125rem;
	color: var(--comail-muted, #5b6660);
	white-space: nowrap;
	text-align: right;
}
.messagelist tbody td.subject .from { display: none; }
.messagelist tbody td.subject .subject a,
.messagelist tbody td.subject .msgicon + a {
	font-family: var(--comail-font-body);
	font-size: 0.9375rem;
	color: var(--comail-ink) !important;
}
.messagelist tbody tr.unread td.subject .subject a,
.messagelist tbody tr.unread td.subject a { font-weight: 700; }
.messagelist tbody tr:not(.unread) td.subject { color: var(--comail-muted, #5b6660); }
.messagelist tbody td.subject .msgicon { display: none; }

/* ---- reading pane ----------------------------------------------------
 * TWO-TONE: the reading pane is plain WHITE so message text is black-on-white
 * (readable, no contrast risk). The header band above the body is white too,
 * with a single hairline divider separating it from the message. */
#layout-content {
	background: #fff !important;
}
#layout-content > .header {
	background: #fff !important;
	border-bottom: 1px solid var(--comail-line, #b9bd9a) !important;
}
/* Even, generous reading-pane content padding snapped to the t-scale. The
 * message header + body share one consistent inset so the reader reads as a
 * single calm column, not a stack of ad-hoc gaps. */
#layout-content .content.frame-content,
#layout-content .content,
#messageheader,
#messagebody {
	padding: var(--t-l) var(--t-xl);
}
#messagebody,
.message-htmlpart,
.message-part {
	font-family: var(--comail-font-body);
	line-height: 1.55;
	max-width: 46rem;
}
#messageheader .subject,
.message-headers .subject {
	font-family: var(--comail-font-display) !important;
	color: var(--comail-ink) !important;
	font-size: var(--t-xl);
	font-weight: 400;
	letter-spacing: -0.01em;
}
#messagebody blockquote { border-left-color: var(--comail-teal); }

/* =====================================================================
 * READING-PANE ACTION TOOLBAR (mock 01-inbox.png reading-pane .toolbar)
 * Icon-ONLY buttons with title= tooltips — NEVER text-under-icons (the
 * forbidden Elastic pattern). Built by js/comail.js from Roundcube's real
 * #toolbar-menu command buttons, so Reply/Reply-all/Forward/Delete drive the
 * SAME verified commands; Archive calls rcmail.command('archive').
 * ===================================================================== */
.comail-reader-toolbar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	/* Even toolbar margin snapped to the scale; sits in the reader's inset. */
	margin: var(--t-m) 0 var(--t-l);
	padding: 0.45rem 0.5rem;
	background: var(--comail-surface, #f5f5e0);
	border: 1px solid var(--comail-line, #b9bd9a);
	border-radius: 0.5rem;
	width: max-content;
}
.comail-reader-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	background: transparent;
	color: var(--comail-ink);
	border: 1px solid transparent;
	border-radius: 0.4rem;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.comail-reader-action:hover,
.comail-reader-action:focus-visible {
	background: var(--comail-accent);
	border-color: var(--comail-accent);
	color: #fff;
	outline: none;
}
.comail-reader-action:focus-visible {
	box-shadow: 0 0 0 2px rgba(63, 161, 192, .35);
}
.comail-reader-action--delete:hover,
.comail-reader-action--delete:focus-visible {
	background: var(--comail-ink);
	border-color: var(--comail-ink);
}
.comail-raicon {
	width: 1.2rem;
	height: 1.2rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
/* The reading-pane toolbar (reply/forward/delete) is restyled-and-kept above,
 * NOT hidden — hiding it left the reader with no actions. The label-suppression
 * + comail tint there makes it read as a clean comail icon toolbar while staying
 * fully functional. (No display:none here on purpose.) */