/* 08-pages/_mail.css — the transactional e-mail, rendered in the showcase with the system's CSS.
   The real mailer template inlines the literal values (e-mail clients do not read custom properties);
   the mapping is documented in verification.md. */
.mail { max-width: 36rem; margin-inline: auto; background: var(--surface); border: var(--stroke) solid var(--rule); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-base); }
.mail__head { padding: var(--space-md) var(--space-lg); background-color: var(--plank-b); background-image: var(--pattern-grain), linear-gradient(100deg, var(--plank-a), var(--plank-b)); background-size: var(--pattern-grain-size), auto; color: var(--plank-ink); border-bottom: var(--stroke) solid var(--rule); display: flex; align-items: center; gap: var(--space-sm); }
.mail__head .c-topbar__word, .mail__head .c-topbar__module { color: var(--plank-ink); }
.mail__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.mail__body p { color: var(--ink); }
.mail__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-md); font-size: var(--text-md); }
.mail__facts dt { color: var(--ink-faint); }
.mail__facts dd { font-family: var(--font-mono); }
.mail__foot { padding: var(--space-sm) var(--space-lg); border-top: var(--stroke) solid var(--rule); font-size: var(--text-xs); color: var(--ink-faint); }