/* ============================================================================
   POOOL — emails.css (Layer 4: emails page only)
   Layout/rhythm for the email-template reference page (rail + stage grid,
   iframe sizing, intro type). The email specimens themselves are e-mail-safe
   HTML strings (emails-data.js) rendered in a sandboxed iframe — this file
   never styles INSIDE the previews, and never restyles shared components.
   Tokens only.
   ============================================================================ */

body { background: var(--bg-page); }

.em-main { max-width: var(--page-max-width); margin: 0 auto; padding: 40px var(--page-padding-x) 96px; }
.em-intro h1 { font-size: var(--fs-5xl); font-weight: var(--fw-xbold); letter-spacing: -.03em; color: var(--fg-heading-2); margin: 0 0 10px; }
.em-intro p { font-size: var(--fs-md); color: var(--fg-secondary); line-height: 1.6; max-width: 78ch; margin: 0 0 8px; }
.em-backrow { margin: 4px 0 0; }

/* Rail + stage — the rail is the shared section nav (set-nav + __group);
   only the grid column and sticky offset are page rhythm */
.em-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; margin-top: 30px; align-items: start; }
.em-rail.set-nav { top: 24px; }

.em-stage { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.em-meta__v { white-space: normal; text-align: right; }
.em-brandrow { display: grid; grid-template-columns: 130px 1fr 1.4fr; gap: 0 18px; align-items: start; }

/* The preview frame — page bg chrome around the email's own canvas */
.em-frame-wrap { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-card-lg); padding: 10px; }
.em-frame { display: block; width: 100%; height: 760px; border: 0; border-radius: var(--radius-input); background: var(--bg-page); margin: 0 auto; }
.em-frame-wrap--mobile .em-frame { width: 360px; max-width: 100%; }

@media (max-width: 900px) {
  .em-grid { grid-template-columns: 1fr; }
  .em-brandrow { grid-template-columns: 1fr; }
}