/* The email gallery, and the emails themselves. In the product each email
   is table layout with inline styles and system fonts (Outfit and
   JetBrains Mono fall back to Helvetica and Menlo); these classes are the
   design those inline styles copy. Paper and ink only, so a client that
   inverts colours still reads it. */
body.em-page { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.5 var(--font-ui); }
.em-app { display: grid; grid-template-columns: 22rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100vh; }
.em-top { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; height: var(--topbar); padding: 0 var(--s-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.em-top b { font-weight: 600; }
.em-rail { overflow-y: auto; padding: var(--s-4) var(--s-3); background: var(--surface); border-right: 1px solid var(--line); display: grid; align-content: start; gap: 2px; }
.em-rail h2 { margin: var(--s-4) .625rem .375rem; font: 600 var(--t-small) var(--font-ui); color: var(--ink-3); }
.em-rail h2:first-child { margin-top: 0; }
.em-item { display: grid; gap: .0625rem; padding: .5rem .625rem; border: 0; border-radius: var(--r-2); background: none; text-align: left; font: inherit; cursor: pointer; }
.em-item b { font-weight: 500; font-size: var(--t-small); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-item span { font-size: .75rem; color: var(--ink-3); }
.em-item:hover { background: var(--surface-2); }
.em-item[aria-pressed="true"] { background: var(--accent-ground); }
.em-item[aria-pressed="true"] b { color: var(--accent-ink); font-weight: 600; }
.em-stage { overflow-y: auto; padding: var(--s-6) var(--s-5) var(--s-8); background: var(--ground-2); }
.em-pane { max-width: 46rem; margin: 0 auto; }
.em-meta { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .25rem .75rem; margin: 0 0 var(--s-4); padding: .875rem 1rem; border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-small); }
.em-meta dt { color: var(--ink-3); } .em-meta dd { margin: 0; overflow-wrap: anywhere; } .em-meta b { font-weight: 600; }
.em-text { margin: 0; padding: 1.25rem 1.5rem; border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); font: 400 .8125rem/1.6 var(--font-data); white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none; }
.em-stage.is-narrow .em-paper { max-width: 390px; }

/* ---- The email. ------------------------------------------------------- */
.em-paper { max-width: 600px; margin: 0 auto; padding: 28px 0 8px; background: #F4F1E8; border-radius: 12px; transition: max-width var(--d-base) var(--ease); }
.em-card { margin: 0 20px; background: #FFFFFF; border: 1px solid #E4E0D6; border-radius: 12px; color: #121315; }
.em-head { display: flex; align-items: center; gap: 8px; padding: 20px 28px 0; }
.em-mark svg { width: 24px; height: 9px; fill: #121315; display: block; }
.em-word { font: 700 17px/1 "Space Grotesk", Helvetica, Arial, sans-serif; letter-spacing: -.02em; color: #121315; }
.em-logo { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #15508F; color: #FFFFFF; font: 700 11px "Space Grotesk", Helvetica, sans-serif; }
.em-word--page { font-size: 15px; }
.em-body { padding: 18px 28px 26px; font: 400 15px/1.55 Outfit, Helvetica, Arial, sans-serif; }
.em-body > :first-child { margin-top: 0; }
.em-p { margin: 0 0 14px; }
.em-muted { margin: 0 0 14px; font-size: 13px; color: #5C5A55; }
.em-h1 { margin: 2px 0 16px; font: 600 24px/1.2 "Space Grotesk", Helvetica, Arial, sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.em-state { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 12px/1 "JetBrains Mono", Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; }
.em-state span { width: 8px; height: 8px; border-radius: 50%; }
.em-state--down { color: #B82C18; } .em-state--down span { background: #E8462F; border-radius: 1px; transform: rotate(45deg); }
.em-state--up { color: #147A4B; } .em-state--up span { background: #2E9E68; }
.em-state--degraded { color: #955800; } .em-state--degraded span { background: #D6972B; }
.em-state--pending { color: #3F6286; } .em-state--pending span { border: 2px solid #3F6286; width: 6px; height: 6px; }
.em-code { margin: 4px 0 18px; padding: 18px; border-radius: 10px; background: #F0EDE4; text-align: center; font: 600 36px/1 "JetBrains Mono", Menlo, monospace; letter-spacing: .12em; }
.em-facts { width: 100%; margin: 0 0 16px; border-collapse: collapse; border-radius: 10px; background: #FAF8F3; font: 400 13px/1.45 "JetBrains Mono", Menlo, monospace; }
.em-facts th { width: 32%; padding: 8px 12px; text-align: left; vertical-align: top; font: 500 12px/1.45 Outfit, Helvetica, sans-serif; color: #5C5A55; border-bottom: 1px solid #ECE8DD; }
.em-facts td { padding: 8px 12px; border-bottom: 1px solid #ECE8DD; overflow-wrap: anywhere; }
.em-facts tr:last-child th, .em-facts tr:last-child td { border-bottom: 0; }
.em-explain { margin: 0 0 16px; padding: 14px 16px 2px; border-radius: 10px; background: #EFEDFC; }
.em-explain__l { margin: 0 0 6px; font: 600 12px/1.3 Outfit, Helvetica, sans-serif; color: #5B4BE0; }
.em-quote { margin: 0 0 16px; padding: 14px 16px 2px; border-radius: 10px; background: #FAF8F3; border: 1px solid #ECE8DD; }
.em-quote__l { margin: 0 0 6px; font: 600 12px/1.3 Outfit, Helvetica, sans-serif; color: #5C5A55; }
.em-btnrow { margin: 18px 0 6px; }
.em-btn { display: inline-block; padding: 12px 20px; border-radius: 10px; background: #1F3FE5; color: #FFFFFF !important; font: 600 15px/1 Outfit, Helvetica, sans-serif; text-decoration: none; }
.em-btn--brand { background: #15508F; }
.em-raw { margin: 0 0 14px; font: 400 11px/1.4 "JetBrains Mono", Menlo, monospace; color: #6B6860; overflow-wrap: anywhere; }
.em-link { margin: 14px 0 4px; } .em-link a { color: #1733C4; font-weight: 600; }
.em-ok { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #E3F3EA; color: #147A4B; font-weight: 600; font-size: 14px; }
.em-foot { margin: 14px 28px 0; font: 400 11px/1.5 "JetBrains Mono", Menlo, monospace; color: #6B6860; overflow-wrap: anywhere; }
.em-foot + .em-foot { margin-top: 4px; } .em-foot:last-child { margin-bottom: 18px; }
.em-stage.is-narrow .em-card { margin: 0 8px; } .em-stage.is-narrow .em-body, .em-stage.is-narrow .em-head { padding-left: 20px; padding-right: 20px; }
.em-stage.is-narrow .em-code { font-size: 30px; }
@media (max-width: 56.25em) { .em-app { grid-template-columns: 1fr; height: auto; } .em-rail { max-height: 16rem; border-right: 0; border-bottom: 1px solid var(--line); } .em-top .d-meta { display: none; } .em-top { flex-wrap: wrap; height: auto; padding-block: var(--s-2); row-gap: var(--s-2); } .em-top [data-em-version] { margin-left: 0 !important; } .em-stage { padding: var(--s-4) var(--gutter-phone); } }