/* Webmail's own layout, composed from the site's tokens in site.css and
   nothing else: no new colour, radius, shadow, or spacing value (WEBMAIL.md
   section 15.1). Daily mail stays plain and dense; the console grammar marks
   sections. Dark only, as the site is. */

.mono { font-family: var(--mono); }
.muted { color: var(--text-dim); }

.mail-who { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.mail-who__address { color: var(--text-mute); font-size: 0.8rem; overflow-wrap: anywhere; }
.mail-inline-form { display: inline; margin: 0; }
.mail-btn--small { min-height: 36px; padding: var(--space-2xs) var(--space-md); font-size: 0.8rem; }
.mail-btn--danger { border-color: var(--bad-line); color: var(--bad); }
.mail-btn--danger:hover { background: var(--bad-wash); border-color: var(--bad); color: var(--bad); }

.mail-layout {
    display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-lg);
    padding-block: var(--space-lg); align-items: start;
}
.mail-rail { position: sticky; top: 88px; }
.mail-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.mail-rail__link { width: 100%; justify-content: space-between; border-bottom: none; border-left: 2px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mail-rail__link.nav__link--active { border-left-color: var(--violet); background: var(--violet-wash); }
.mail-count {
    font-family: var(--mono); font-size: 0.72rem; color: var(--text);
    background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 0 var(--space-xs);
}
.mail-pane { min-width: 0; }
.mail-pane > .console-header { margin-bottom: var(--space-md); }
.mail-section { margin-top: var(--space-xl); }
.mail-note { color: var(--text-dim); font-size: 0.85rem; }
.mail-empty { color: var(--text-mute); padding-block: var(--space-lg); }

.mail-search { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); flex-wrap: wrap; }
.mail-input {
    flex: 1; min-width: 12rem; min-height: var(--tap); padding: var(--space-xs) var(--space-md);
    background: var(--surface-0); color: var(--text); font: inherit;
    border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-base);
}
/* Focus is plain to see (audit D23): the bright violet, all round. */
.mail-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
select.mail-input { flex: 0 1 auto; min-width: 0; }
.mail-label { display: block; font-size: 0.72rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-dim); margin: var(--space-md) 0 var(--space-2xs); }

.mail-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.mail-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.mail-row__link {
    display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto; gap: var(--space-md);
    align-items: baseline; padding: var(--space-sm) var(--space-xs);
    color: var(--text-mute); text-decoration: none;
    transition: background-color var(--transition-fast);
}
.mail-row__link:hover { background: var(--surface-1); color: var(--text); text-decoration: none; }
.mail-row__sender, .mail-row__subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row__date { color: var(--text-dim); font-size: 0.75rem; white-space: nowrap; }
.mail-row--unseen .mail-row__sender, .mail-row--unseen .mail-row__subject { color: var(--text); font-weight: 600; }
.mail-flag { font-family: var(--mono); font-size: 0.72rem; color: var(--warn); }
/* A row's attachment mark, its snippet, and the To of Sent and Drafts: steel,
   never bold, so the sender and subject lead (ADR 0053). */
.mail-mark, .mail-row__to { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--text-dim); }
.mail-row__snippet { margin-left: var(--space-xs); font-weight: 400; color: var(--text-dim); }
.mail-row--unseen .mail-row__snippet { font-weight: 400; color: var(--text-dim); }
.mail-pages { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-md); color: var(--text-dim); font-size: 0.8rem; flex-wrap: wrap; }

.mail-subject { font-size: clamp(1.25rem, 2vw + 0.6rem, 1.7rem); margin-bottom: var(--space-md); overflow-wrap: anywhere; }
.mail-headers { padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); }
.mail-headers__val { white-space: normal; text-align: right; overflow-wrap: anywhere; word-break: normal; }
.mail-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-md); }
.mail-body { padding: var(--space-lg); }
.mail-text {
    margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
    font-family: var(--sans); font-size: 1rem; line-height: 1.7; color: var(--text);
}
.mail-html { margin-top: var(--space-md); }
.mail-html summary { cursor: pointer; color: var(--text-mute); font-size: 0.8rem; padding-block: var(--space-xs); }
.mail-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--text); }
.mail-attachments { padding-left: 1.15em; color: var(--text-mute); font-size: 0.85rem; }
/* A long name or address breaks anywhere rather than widening a phone's page. */
.mail-attachment__link, .mail-text a { overflow-wrap: anywhere; word-break: break-word; }

.mail-secret { margin-bottom: var(--space-md); }
.mail-secret__value { font-size: 1.15rem; color: var(--violet-hi); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.mail-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.mail-table td, .mail-table th { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--line-soft); text-align: left; }

.mail-gate { padding-block: var(--section-gap); }
.mail-gate__panel { padding: var(--panel-pad); }
.mail-gate__title { margin-bottom: var(--space-sm); }
.mail-gate__form { margin-bottom: var(--space-md); }
.mail-gate__form .btn { margin-top: var(--space-md); }
.mail-status { min-height: 1.5em; color: var(--text-mute); font-size: 0.8rem; }

.mail-footer { margin-top: auto; border-top: 1px solid var(--line-soft); padding: var(--space-md) var(--gutter); color: var(--text-dim); font-size: 0.75rem; text-align: center; }
.mail-footer p { margin: 0 auto; }

@media (max-width: 720px) {
    .mail-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); }
    .mail-rail { position: static; }
    /* All six mailboxes in view, two rows of three: sideways, Drafts and
       Trash were off the screen with nothing to say so (ADR 0058). */
    .mail-rail__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mail-rail__link { border-left: none; border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; gap: var(--space-xs); justify-content: center; padding-inline: var(--space-xs); }
    .mail-rail__link.nav__link--active { border-bottom-color: var(--violet); }
    .mail-row__link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sender date" "subject subject"; gap: var(--space-2xs) var(--space-sm); }
    .mail-row__sender { grid-area: sender; }
    .mail-row__date { grid-area: date; }
    .mail-row__subject { grid-area: subject; }
    .mail-who__address { display: none; }
    /* The site's phone rule makes every nav link a full-width row; the
       webmail's header keeps its two commands on one line. */
    .nav { flex-wrap: nowrap; }
    .mail-who { flex-wrap: nowrap; gap: var(--space-xs); }
    .mail-who .nav__link { width: auto; border-left: none; padding-inline: var(--space-sm); }
    .mail-body { padding: var(--space-md); }
    /* The message on the first screen (ADR 0058): each row of the reader's
       commands scrolls sideways instead of wrapping into several, the
       sender's own Date gives way to Received, and every command is a
       full tap target. */
    .mail-pane > .mail-actions, .mail-reader-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--space-2xs); }
    .mail-pane > .mail-actions > *, .mail-reader-nav > * { flex: 0 0 auto; }
    .mail-headers__row--date { display: none; }
    .mail-btn--small { min-height: var(--tap); }
}

/* The composer (ADR 0046). */
.mail-rail__compose { display: block; text-align: center; margin-bottom: var(--space-md); }
.mail-compose .mail-input { display: block; width: 100%; box-sizing: border-box; }
/* Address suggestions (ADR 0065): a list under the field, one person a row. */
.mail-suggest {
    list-style: none; margin: var(--space-2xs) 0 0; padding: var(--space-2xs);
    background: var(--surface-2); border: 1px solid var(--violet-line); border-radius: var(--radius);
    box-shadow: var(--shadow-float); max-height: 18rem; overflow-y: auto;
}
.mail-suggest__item {
    display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline;
    min-height: var(--tap); box-sizing: border-box; padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm); color: var(--text-mute); cursor: pointer;
}
.mail-suggest__item[aria-selected="true"] { background: var(--violet-wash); color: var(--text); box-shadow: inset 2px 0 0 var(--violet); }
.mail-suggest__name { color: var(--text); }
.mail-suggest__address { font-size: 0.85rem; color: var(--text-dim); overflow-wrap: anywhere; }
.mail-textarea { min-height: 18rem; resize: vertical; font-family: var(--font-mono, monospace); line-height: 1.5; }
.mail-compose .mail-actions { margin-top: var(--space-md); }
.mail-notice { padding: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); }
/* A notice with its Undo, the new-mail notice, and the list's tools
   (ADR 0054). */
div.mail-notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.mail-fresh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); }
.mail-fresh[hidden] { display: none; }
.mail-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-xs); }
.mail-bulk .btn:disabled { opacity: 0.45; cursor: default; }
.mail-bulk__end { margin-left: auto; }
.mail-reader-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.mail-bulk__all { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--tap); padding-inline: var(--space-xs); font-size: 0.8rem; color: var(--text-dim); cursor: pointer; }
.mail-row__pick { display: flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); cursor: pointer; }
.mail-row__pick input, .mail-bulk__all input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--text-mute); }
.mail-unsent-offer { margin-bottom: var(--space-md); }
.mail-unsent-offer[hidden], .mail-compose button[hidden] { display: none; }

/* Mail apps (ADR 0047). */
.mail-secret__row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.mail-secret__row .mail-secret__value { margin: 0; }
.mail-settings { margin-top: var(--space-md); }
.mail-device { margin: var(--space-md) 0; }
.mail-device .mail-input { display: block; width: 100%; box-sizing: border-box; }
.mail-device .mail-actions { margin-top: var(--space-md); }

/* Attachments, the editor, and autosave (ADR 0048). */
.mail-attachments { list-style: none; padding: 0; margin: var(--space-xs) 0; }
.mail-attachment { display: flex; gap: var(--space-md); align-items: baseline; padding: var(--space-2xs) 0; flex-wrap: wrap; }
.mail-attachment__link { color: var(--violet-hi); text-decoration: none; }
.mail-attachment__link:hover, .mail-attachment__link:focus { text-decoration: underline; }
.mail-files { margin-top: var(--space-md); }
.mail-file { display: block; margin: var(--space-xs) 0; color: var(--text-dim); }
.mail-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-2xs); }
.mail-tool { background: var(--surface-0); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2xs) var(--space-xs); font: inherit; font-size: 0.85rem; cursor: pointer; min-height: 2rem; }
.mail-tool:hover, .mail-tool:focus { border-color: var(--violet-line); }
.mail-editor { min-height: 18rem; line-height: 1.6; overflow-wrap: anywhere; }
.mail-editor:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
/* A link in the editor looks like one, by more than its colour. */
.mail-editor a { color: var(--violet-hi); text-decoration: underline; }
.mail-editor blockquote { border-left: 2px solid var(--violet-line); margin: var(--space-xs) 0; padding-left: var(--space-md); color: var(--text-dim); }
.mail-editor ul, .mail-editor ol { padding-left: 1.5rem; }
.js-enabled .mail-textarea { display: none; }
.mail-saved { margin-left: auto; align-self: center; }

/* Small screens: a wide table scrolls in its own box, and a long value
   wraps instead of widening the page. */
.mail-table-wrap { overflow-x: auto; max-width: 100%; }
.mail-pane .readout__val { min-width: 0; overflow-wrap: anywhere; }
.mail-secret__value { overflow-wrap: anywhere; }

/* Cc and Bcc folded until asked for, with script. */
.js-enabled .mail-cc--folded { display: none; }
.mail-link-button { background: none; border: none; color: var(--violet-hi); font: inherit; font-size: 0.85rem; padding: var(--space-2xs) 0; cursor: pointer; margin-top: var(--space-xs); }
.mail-link-button:hover, .mail-link-button:focus { text-decoration: underline; }

/* A skip link's landing place takes focus without a ring round the pane. */
.mail-pane:focus { outline: none; }

/* Name and signature (ADR 0068). */
.mail-signature { min-height: 6rem; resize: vertical; line-height: 1.5; }
.mail-settings-form .mail-input { display: block; width: 100%; box-sizing: border-box; }
.mail-notice--bad { border-color: var(--bad-line); color: var(--bad); }