/* mail.css — the Email panel, and one message in the centre.
 *
 * Follows the Workspace panel's shape: a head with actions, a card beneath.
 * Nothing here is new furniture; it is the same furniture, holding mail. */

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

.mail-card {
	display: flex; flex-direction: column;
	flex: 1; min-height: 0;
	overflow: hidden;
}

.mail-state {
	display: flex; flex-direction: column; gap: 8px;
	padding: 10px;
	flex: none;
}

/* The unlock, shown only while the account does not hold the tool. */
.mail-pitch {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-secondary);
	padding: 12px;
}
.mail-pitch p { margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.5; }
.mail-fine { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); }
.mail-pitch .mail-fine { margin-bottom: 10px; }
.mail-unlock {
	width: 100%;
	background: var(--accent); color: var(--on-fill, #fff);
	border: 1px solid var(--accent); border-radius: var(--radius-sm);
	padding: 9px 16px; font-size: var(--fs-base);
}
.mail-unlock:hover { filter: brightness(1.08); }
.mail-unlock:disabled { opacity: 0.6; cursor: default; }

.mail-note, .mail-err {
	font-size: var(--fs-xs); line-height: 1.45;
	padding: 7px 9px; border-radius: var(--radius-sm);
}
.mail-note { color: var(--text-secondary); background: var(--bg-tertiary); }
.mail-err  { color: var(--accent-text);   background: var(--accent-soft); }

/* ── The mailboxes ───────────────────────────────────────────── */

.mail-accounts {
	display: flex; flex-direction: column; gap: 2px;
	padding: 0 6px 6px;
	flex: none;
}
.mail-accounts .mail-fine { padding: 4px 4px 0; }

/* One control for all of mail, and the one manual refresh, above the list.
   Deliberately not dressed as a section heading: the rail found that a row led
   by a light and set in small caps reads as a section that has lost its
   alignment (app.css:207). Sentence case, a rule under it, the light leading. */
.mail-globals {
	display: flex; align-items: center; gap: 6px;
	padding: 4px 2px 6px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--border);
}
.mail-globals-label {
	flex: 1; min-width: 0;
	font-size: var(--fs-sm); font-weight: 500;
	color: var(--text-secondary);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The one manual refresh, at the end of that row. It is a '⟳' rather than a
   drawn icon, and the rule for it used to live down in the folders block where
   it was born, sized at the folder head's 13px -- so beside the 20px pause and
   play it read as a stray character rather than the third control on the row.
   A 20px box, the same one `.pptw-act` wears two places to the left, and 18px
   of type in it: the glyph is drawn inside its em box, so the same nominal size
   as the verbs beside it would still come out smaller than them. */
.mail-refresh {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; padding: 0;
	border: 0; border-radius: var(--radius-sm); background: none;
	color: var(--text-muted);
	font-size: var(--fs-2xl); line-height: 1;
	cursor: pointer;
}
.mail-refresh:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-hover); }
.mail-refresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mail-refresh:disabled { opacity: 0.5; cursor: default; }
.mail-acct {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: var(--fs-sm);
}
.mail-acct:hover { background: var(--bg-hover); }
.mail-acct.on {
	background: var(--bg-tertiary);
	box-shadow: inset 2px 0 0 var(--accent);
}
.mail-addr {
	flex: 1; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-when { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }
.mail-del {
	border: 0; background: none; color: var(--text-muted);
	font-size: var(--fs-lg); line-height: 1; padding: 0 2px;
	opacity: 0;
}
.mail-acct:hover .mail-del { opacity: 1; }
.mail-del:hover { color: var(--danger); }

/* The gear stays visible. `.mail-del` above appears on hover, which on a phone
   means never; a control the user has been told to press must not be one they
   cannot find. Muted until hovered, so it does not compete with the address. */
.mail-gear {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; padding: 0;
	border: 0; background: none; color: var(--text-muted);
	cursor: pointer;
}
/* 16px, which is what a Diamond tile's cog and the rail status header's cog are
   drawn at. It is the same path from the same place, and the app was drawing it
   at three sizes in three panels; 14 in a 20px box also left more air round it
   than round anything else on the row. */
.mail-gear .ic { width: 16px; height: 16px; }
.mail-gear:hover { color: var(--text-primary); }
.mail-gear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%; }

/* ── The messages ────────────────────────────────────────────── */

.mail-list {
	flex: 1; min-height: 0; overflow-y: auto;
	border-top: 1px solid var(--border);
}
.mail-list .mail-fine { padding: 10px; }

/* The foot of the list: what the cap held back, and the way to go and get it.
 * It sits below the last message and belongs to the list, not to the messages,
 * so it is set apart rather than looking like one more row. */
.mail-more {
	display: flex; flex-direction: column; gap: 8px;
	padding: 12px 10px 14px;
	border-top: 1px solid var(--border);
	background: var(--bg-tertiary);
}
.mail-more .mail-fine { padding: 0; }
.mail-more-btns { display: flex; gap: 8px; }
.mail-more-btns > button { flex: 1; }
.mail-stop {
	background: var(--accent-soft); color: var(--accent-text);
	border: 1px solid var(--accent); border-radius: var(--radius-sm);
	padding: 8px 14px; font-size: var(--fs-sm);
}
.mail-all {
	background: var(--bg-secondary); color: var(--text-secondary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	padding: 8px 14px; font-size: var(--fs-sm);
}
.mail-all:hover { color: var(--text-primary); }
.mail-all:disabled { opacity: 0.5; cursor: default; }
.mail-older {
	align-self: stretch;
	background: var(--bg-secondary);
	color: var(--text-primary);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 8px 14px;
	font-size: var(--fs-sm);
}
.mail-older:hover { border-color: var(--accent); color: var(--accent-text); }
.mail-older:disabled { opacity: 0.5; cursor: default; }
.mail-older:disabled:hover { border-color: var(--border-strong); color: var(--text-primary); }
.mail-msg {
	padding: 8px 10px;
	cursor: pointer;
	border-bottom: 1px solid var(--border);
}
.mail-msg:hover { background: var(--bg-hover); }
.mail-from {
	font-size: var(--fs-xs); color: var(--text-secondary);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-subj {
	font-size: var(--fs-sm); margin: 2px 0;
	color: var(--text-primary);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-msg.unread .mail-subj { font-weight: 600; }
.mail-date {
	font-size: var(--fs-2xs); color: var(--text-muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── One message, in the centre ──────────────────────────────── */

/* The message is a STAGE panel: it opens beside the chat, not in place of it,
   so a message can be read and asked about at the same time. */
/* ── One message ─────────────────────────────────────────────────
 * A header you can read the sender out of at a glance, then the body. HTML mail
 * is a stranger's markup, so it is rendered inside a sandboxed frame with its
 * own white page — not styled into ours, and never able to touch it. */
.msg-head {
	flex: none;
	padding: 12px 16px 10px;
	border-bottom: 1px solid var(--border);
}
.msg-subject { font-size: var(--fs-xl-2xl); font-weight: 600; line-height: 1.35; margin-bottom: 8px; }

.msg-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.msg-name { font-size: var(--fs-sm-base); font-weight: 600; color: var(--text-primary); }
.msg-addr { font-size: var(--fs-xs-sm); color: var(--text-muted); font-family: var(--font-mono); }
.msg-date { font-size: var(--fs-xs-sm); color: var(--text-muted); margin-left: auto; white-space: nowrap; }

.msg-line { display: flex; gap: 8px; font-size: var(--fs-xs-sm); line-height: 1.5; }
.msg-lbl { flex: none; width: 58px; color: var(--text-muted); }
.msg-val { color: var(--text-secondary); word-break: break-word; }

/* The files that came with the message. Clicking one writes it into the workspace,
 * which is the only place a file ever lands. */
.msg-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.msg-att {
	max-width: 100%;
	background: var(--bg-tertiary);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	color: var(--text-secondary);
	padding: 5px 10px; font-size: var(--fs-xs);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-att:hover { border-color: var(--accent); color: var(--text-primary); }
.msg-att.done { border-color: var(--ok); color: var(--ok); }
.msg-att:disabled { cursor: default; }

.msg-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }

/* Plain-text mail: the newlines are the layout, so keep them. */
.msg-text {
	padding: 14px 16px 16px;
	white-space: pre-wrap; word-break: break-word;
	font-size: var(--fs-base); line-height: 1.6;
	color: var(--text-primary);
}

/* HTML mail, in its own document. */
.msg-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
.msg-blocked {
	flex: none;
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px;
	background: var(--bg-tertiary);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-xs); line-height: 1.45;
	color: var(--text-secondary);
}
.msg-blocked span { flex: 1; }
.msg-blocked button {
	flex: none;
	background: var(--bg-secondary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	color: var(--text-primary);
	padding: 5px 10px; font-size: var(--fs-xs);
}
.msg-blocked button:hover { border-color: var(--accent); color: var(--accent-text); }

/* The verbs, on the message. They sit under the addresses and above the
 * attachments — after you know who sent it and before you know what came with it,
 * which is where the decision to answer is actually made. */
.msg-acts { display: flex; gap: 6px; margin-top: 10px; }
.msg-act {
	background: var(--bg-secondary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	color: var(--text-primary);
	padding: 5px 12px; font-size: var(--fs-xs-sm);
}
.msg-act:hover { border-color: var(--accent); color: var(--accent-text); }

/* ── Drafts ──────────────────────────────────────────────────────
 * Above the inbox, because a draft is the only thing in the panel waiting on the
 * user — and because a draft the daimon wrote for them to check would otherwise
 * sit in a folder nobody opens. */
.mail-drafts { border-bottom: 1px solid var(--border-2); background: var(--bg-tertiary); }
.mail-drafts-head {
	padding: 6px 10px;
	font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--text-muted);
}
.mail-draft {
	padding: 7px 10px;
	cursor: pointer;
	border-top: 1px solid var(--border);
}
.mail-draft:hover { background: var(--bg-hover); }
.mail-draft .mail-subj { font-weight: 600; }

/* ── Writing one ─────────────────────────────────────────────────
 * A stage panel, so the daimon stays beside the draft while it is written. The
 * body takes every pixel the head and the foot do not: a message is mostly the
 * thing you are typing into it. */
.compose-head {
	flex: none;
	padding: 10px 14px 6px;
	border-bottom: 1px solid var(--border);
}
.compose-row {
	display: flex; align-items: center; gap: 8px;
	padding: 3px 0;
}
.compose-row > span {
	flex: none; width: 58px;
	font-size: var(--fs-xs-sm); color: var(--text-muted);
}
.compose-row > input, .compose-row > select {
	flex: 1; min-width: 0;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	color: var(--text-primary);
	padding: 6px 9px; font-size: var(--fs-sm);
}
/* THE OLD INDICATOR, MISSED BY THE SWEEP THAT REPLACED THE OTHER TWENTY-ONE.
   `outline: none; border-color: var(--accent)` makes the focus mark the resting
   border recoloured, and these rows rest on `--border-strong` -- so the two
   colours the reader has to tell apart are `--accent` and `--border-strong`,
   which measure 1.11 (Midnight) to 1.81 (Light) across the eleven palettes.
   WCAG 2.2 SC 2.4.11 asks 3.0 of a focus indicator. dev/contrast_report.md §5
   records why every other field in the app was moved to a real outline drawn
   OUTSIDE the control, where what it contrasts with is the surface: that
   measures 3.87-6.75 here. The To/Subject row is the same control and gets the
   same answer.
   The select half takes `:focus-visible` -- see the note at `.settings-select`
   in app.css; the input half is `:focus`, which resolves identically. */
.compose-row > input:focus {
	outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.compose-row > select:focus-visible {
	outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.compose-text {
	flex: 1; min-height: 0;
	width: 100%;
	resize: none;
	background: transparent;
	border: 0; outline: none;
	color: var(--text-primary);
	padding: 14px 16px;
	/* Was `font: 14px/1.6 inherit` -- the one hard pixel size left in the app, so
	   the reading control moved every word on screen EXCEPT the message being
	   written, and the shorthand took "inherit" as a family name besides. */
	font-size: var(--fs-base);
	line-height: 1.6;
}
.compose-atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.compose-atts:not(:empty) { padding: 8px 14px 2px; }
.compose-att {
	max-width: 100%;
	background: var(--bg-tertiary);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	color: var(--text-secondary);
	padding: 5px 10px; font-size: var(--fs-xs);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compose-att:hover { border-color: var(--danger); color: var(--danger); }

/* Wraps, because at 380px it did not: the row ran 22px past the panel and cut
   "Discard" in half, so the one control that undoes the message was the one the
   phone hid. A second row of buttons is the right answer here rather than a
   horizontal scroll — a control a person has to find by swiping is one they will
   not find. `nowrap` on the buttons themselves stops "Save draft" folding to two
   lines while its neighbours stay at one, which left the row visibly ragged. */
.compose-foot {
	flex: none;
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid var(--border);
}
.compose-send, .compose-btn { white-space: nowrap; }
.compose-send {
	background: var(--accent); color: var(--on-fill, #fff);
	border: 1px solid var(--accent); border-radius: var(--radius-sm);
	padding: 8px 18px; font-size: var(--fs-sm);
}
.compose-send:hover { filter: brightness(1.08); }
.compose-btn {
	background: var(--bg-secondary); color: var(--text-secondary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	padding: 8px 12px; font-size: var(--fs-sm);
}
.compose-btn:hover { color: var(--text-primary); }
.compose-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.compose-send:disabled, .compose-btn:disabled { opacity: 0.5; cursor: default; }
.compose-note {
	margin-left: auto;
	font-size: var(--fs-xs); color: var(--text-secondary);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compose-note.err { color: var(--accent-text); }

/* The form dialog's guidance line, under the fields. */
.dlg-note { font-size: var(--fs-xs); line-height: 1.45; color: var(--text-secondary); margin-top: 8px; }
.dlg-note.err { color: var(--accent-text); }
/* The negative bottom margin this was written against has gone: the shared label
 * now spaces itself 12/6 and only the BYOK form compensates for its flex gap
 * (app.css). What is left is the extra 2px of top margin, kept deliberately --
 * a form asking for a credential is read more slowly than a settings row. It
 * does mean the same built form is 2px looser in the modal than in the rail
 * drawer, which is the only place the two hosts differ. */
.dlg-card .cfg-fieldlabel { margin-top: 14px; margin-bottom: 6px; }

/* ── The folder picker ─────────────────────────────────────────
   One level below the mailbox list: a folder is the same kind of choice as
   a mailbox, so `.mail-folder` borrows `.mail-acct`'s shape and `.on`; only
   what differs is stated here. Nesting depth arrives as a CSS variable so
   the indent needs no inline style. */
.mail-folders { flex: none; padding: 0 6px 6px; }
.mail-folders-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px 4px;
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}
/* `.mail-refresh` was declared here, next to the folder head it once sat in.
   It moved to the globals row above and its rule went with it. */
.mail-folder-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 168px;
	overflow-y: auto;
}
.mail-folder { padding-left: calc(8px + var(--folder-depth, 0) * 10px); }
.mail-folder[aria-disabled="true"] { opacity: 0.55; cursor: default; }

/* How much is in a folder. Tabular figures so a column of counts lines up on
   its units rather than wandering with the width of a 1; muted, because the
   folder's name is what the eye is looking for and the number is the answer to
   a question it has not asked yet. */
.mail-count {
	flex: none;
	min-width: 3ch; text-align: right;
	font-size: var(--fs-2xs);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
	white-space: nowrap;
}
/* A figure that can no longer be trusted on its own. Dimmed rather than
   coloured: it is not a warning, it is an old number, and the age sits beside
   it saying how old. */
.mail-count.stale { color: var(--text-muted); }

/* ── A mailbox's settings ──────────────────────────────────────
   One tile per folder: its pause control, its name, what it holds, and how
   often it goes and looks. The tiles are the dialog's whole body — the Delete
   that belongs at the foot of it is phase C's and is not here yet. */
.mail-cfg { display: flex; flex-direction: column; gap: 6px; }
.mail-cfg > .mail-fine { margin-bottom: 4px; }
.mail-tile {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-tertiary);
}
/* The mailbox's own switch governs every tile under it, so it is set apart
   from them rather than being read as one more folder. */
.mail-tile-self { background: var(--bg-secondary); border-color: var(--border-strong); }
.mail-tile-self .mail-fine { flex: none; }
.mail-tile-name {
	flex: 1; min-width: 0;
	font-size: var(--fs-sm);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-every {
	flex: none; max-width: 46%;
	background: var(--bg-secondary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	color: var(--text-primary);
	padding: 4px 6px; font-size: var(--fs-xs);
}
/* A pulldown, so `:focus-visible` -- see the note at `.settings-select`. */
.mail-every:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* At a phone's width a tile cannot hold four things on one line: the folder
   name ellipsised to nothing so that a pulldown could keep its full width.
   The pulldown drops to a second line and takes the whole of it. */
@media (max-width: 460px) {
	.mail-tile { flex-wrap: wrap; }
	.mail-every { max-width: none; width: 100%; }
}