/* Email templates: the 600 px letter on the one template, and the notes beside it. Tokens only: every color
   has a dark value, so the Dark theme shows the letter as a dark mail client renders it. */

.em-group { margin: var(--space-12) 0 var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-default); }
.em-group p { color: var(--color-muted); max-width: 70ch; margin-top: var(--space-1); }

.em-row { display: grid; grid-template-columns: minmax(0, 600px) minmax(260px, 1fr); gap: var(--space-8); align-items: start; margin-bottom: var(--space-8); }
.em-col { min-width: 0; }
.em-col > .mail { margin: 0; box-shadow: var(--shadow-card); }
.em-notes { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1240px) { .em-row { grid-template-columns: minmax(0, 1fr); } .em-col > .mail { margin: 0 auto; } }

/* ── The letter ── */
.em-letter { background: var(--color-surface); color: var(--color-foreground); font-size: var(--text-md); line-height: var(--leading-md); }

/* 1 Brand band */
.em-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 56px; padding: 0 var(--space-8); background: var(--color-primary-strong); color: var(--color-primary-soft); }
.em-band__brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.em-mark { display: inline-flex; color: var(--color-primary-soft); }
.em-mark svg { height: 24px; width: auto; }
.em-band__name { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.em-band__kind { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); opacity: 0.8; }

/* 2 Picture plate */
.em-plate { position: relative; display: flex; justify-content: center; margin: var(--space-6) var(--space-6) 0; padding: var(--space-8); border-radius: var(--radius-card); background: var(--color-primary-soft); }
.em-plate--warn { background: var(--color-warning-soft); }
.em-plate .ill { flex: none; }

.em-main { padding: var(--space-8) var(--space-8) var(--space-8); display: flex; flex-direction: column; }
.em-main > * { position: relative; }

/* 3 Heading, 4 Summary */
.em-eyebrow { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); }
.em-title h3 { margin: var(--space-2) 0 0; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-foreground); }
.em-sum { margin-top: var(--space-2); }
.em-sum p { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); color: var(--color-muted); }

/* 5 Fact card */
.em-factcard { margin-top: var(--space-6); }
.em-card { border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; }
.em-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.em-card__id { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.em-card__code, .em-item__code { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); letter-spacing: 0.02em; }
.em-card__over { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.em-card__name { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); }
.em-chip { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.em-chip--stage { background: var(--color-stage-tint); color: var(--color-stage-text); }
.em-chip--warn { background: var(--color-warning-soft); color: var(--color-warning-text); }
.em-chip--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.em-chip--ok { background: var(--color-success-soft); color: var(--color-success-text); }
.em-chip--plain { background: var(--color-surface-muted); color: var(--color-muted); }

.em-card__figs { display: grid; margin: 0; border-top: 1px solid var(--color-default); background: var(--color-surface-muted); }
.em-card__figs--1 { grid-template-columns: minmax(0, 1fr); }
.em-card__figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.em-card__figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.em-fig { padding: var(--space-3) var(--space-5); min-width: 0; }
.em-fig + .em-fig { border-left: 1px solid var(--color-default); }
.em-fig dt { font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-subtle); }
.em-fig dd { margin: var(--space-1) 0 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); overflow-wrap: break-word; }
.em-fig--warn dd { color: var(--color-warning-text); }
.em-fig--danger dd { color: var(--color-danger-text); }
.em-fig--ok dd { color: var(--color-success-text); }

.em-card__items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-default); }
.em-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); }
.em-item + .em-item { border-top: 1px solid var(--color-default); }
.em-item__body { display: flex; flex-direction: column; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); min-width: 0; }
.em-item__body strong { color: var(--color-foreground); font-weight: var(--weight-semibold); }

.em-card__rows { margin: 0; padding: var(--space-2) var(--space-5); border-top: 1px solid var(--color-default); }
.em-row-line { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; }
.em-row-line dt { font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-subtle); }
.em-row-line dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }

/* 6 Message */
.em-msg { margin-top: var(--space-6); }
.em-msg p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }
.em-sign { margin-top: var(--space-4); display: flex; flex-direction: column; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }
.em-sign strong { color: var(--color-foreground); font-weight: var(--weight-semibold); }

/* 7 Actions */
.em-act { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.em-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-control); background: var(--color-primary); color: var(--color-primary-foreground); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.em-link { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-primary-accent); text-underline-offset: 3px; }

/* 8 Footer */
.em-foot { position: relative; padding: var(--space-6) var(--space-8); background: var(--color-surface-muted); border-top: 1px solid var(--color-default); display: flex; flex-direction: column; gap: var(--space-2); }
.em-foot p { margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.em-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.em-foot__link, .em-foot .em-optout { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.em-foot .em-foot__from { color: var(--color-subtle); }

/* Images off: the alt text stands in the picture's place */
.em-alt { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-muted); font-size: var(--text-label); line-height: var(--leading-label); }
.em-letter--off .em-plate { padding: var(--space-5); justify-content: flex-start; background: var(--color-surface-muted); }

/* The part numbers of the Template */
.em-pin { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--color-surface-inverted); color: var(--color-inverted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); }
.em-pin--inline { position: static; }
[data-part] { outline: 1px dashed var(--color-primary-accent); outline-offset: 2px; }
.em-band[data-part], .em-foot[data-part] { outline-offset: -3px; }
.em-band[data-part] .em-pin { top: 18px; left: var(--space-1); }
.em-main [data-part] .em-pin { top: 0; left: calc(-1 * var(--space-6) - var(--space-1)); }

/* The notes beside a letter */
.em-fact { padding: var(--space-4); }
.em-fact__title { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-medium); }
.em-fact__text { margin-top: var(--space-2); }
.sc-grid-3.em-facts { margin: var(--space-6) 0; }
.em-row--off { margin-top: var(--space-6); }
.em-facts-list { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.em-facts-list dt { font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-subtle); }
.em-facts-list dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.em-facts-list code { font-family: var(--font-mono); font-size: var(--text-xs); }