/* Round 15, group D: styles for the mailing screens (editor, preview). Tokens only. */
.mail-filter{display:grid;gap:12px}
.mail-set{border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.mail-set legend{padding:0 6px;font-size:14px;font-weight:600;color:var(--soft)}
.mail-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;padding:10px 0}
.mail-count .v{font-size:24px;font-weight:700}
.mail-send{display:grid;gap:12px}
/* The preview: the e-mail template's order and colours (fog page, white sheet, ink button). */
.mail-prev{background:var(--fog);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 14px;font-size:16px;line-height:1.6;color:var(--ink)}
.mail-subj{font-weight:600;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mail-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700}
.mail-mark{width:40px;height:40px;border-radius:12px;background:#FFE27A;display:inline-flex;align-items:center;justify-content:center;font-size:24px}
.mail-sheet{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:20px 18px;margin-top:14px}
.mail-sheet h3{font-size:22px;line-height:1.35;margin:0 0 14px}
.mail-sheet p{margin:0 0 12px}
.mail-img{width:100%;max-width:520px;height:auto;border-radius:12px;margin:0 0 14px}
.mail-btn{display:inline-block;background:var(--ink);color:var(--white);font-weight:700;padding:10px 20px;border-radius:999px}
.mail-foot{font-size:13px;color:var(--soft);margin-top:12px}
.mail-foot.small{font-size:12px;color:var(--mute);margin-top:4px}
.mail-link{color:var(--tint);text-decoration:underline}