/* ==========================================================================
   COMPONENTS · EMAIL — the transactional dispatch as a printed leaf. One shell
   serves every type (receipt / welcome / renewal / cancellation / dunning): a
   ~600px sheet, a small-caps masthead under the single sacred rubric rule, a
   serif lede, a mono receipt, an optional banded verdict panel, a solid-INK
   block CTA (never the rubric), and a deckle footer with the honest note.

   ── PRODUCTION INLINING (real email clients) ───────────────────────────────
   These .op-email* rules style the IN-BROWSER PREVIEW (the showcase and the
   in-app "view in browser" page) with var() tokens so it stays coherent here.
   REAL transactional mail CANNOT use this file: Gmail/Outlook strip <link>, do
   NOT support CSS custom properties, and need TABLE layout with INLINE styles.
   So the production build must inline the RESOLVED HEX and web-safe fonts:
     paper #F6F1E7 · leaf #FBF8F1 · deckle #EDE6D7 · ink #211C18 ·
     ink-secondary #6B6358 · hairline #D8CFBE · rubric #9B2D38 ·
     good/myrtle #46604E · moderate/ochre-ink #7A592B · poor/brick #AA3B2A.
   Web-safe email font stacks (no self-hosted faces in mail):
     serif     -> Georgia, 'Times New Roman', serif
     furniture -> -apple-system, 'Segoe UI', Arial, sans-serif
     mono      -> 'IBM Plex Mono', Menlo, Consolas, monospace
   Constrain to ~600px, lay the sheet out as nested <table> for Outlook, keep
   the ONE sacred rubric rule, and ship the CTA as a bulletproof VML button.
   ========================================================================== */

/* The ground the sheet is dropped onto (the client viewport) */
.op-email {
  background: var(--surface);
  padding: var(--space-md) var(--space-sm);
  color: var(--text);
  font-family: var(--font-reading);
  line-height: var(--leading-relaxed);
}

/* The ~600px leaf, centred, a hairline lift off the ground */
.op-email__sheet {
  max-inline-size: 37.5rem;
  margin-inline: auto;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-raised);
  padding: var(--space-lg) var(--space-md);
}

/* In-body links: ink with a rubric underline, never blue */
.op-email a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.16em; }
.op-email a:hover { color: var(--link-hover); text-decoration-color: var(--link-hover); }

/* — Masthead: the wordmark in tracked small-caps furniture — */
.op-email__masthead {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text);
}
/* THE single sacred rubric hairline — the one spot of oxblood */
.op-email__rule { height: 0; border: 0; border-top: 2px solid var(--accent); margin-block: var(--space-2xs) var(--space-md); }

/* Preview text pulled into the inbox snippet, hidden in the body */
.op-email__preheader {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.op-email__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-sm);
}
.op-email__lede {
  font-size: var(--text-base);
  color: var(--text);
  margin: 0 0 var(--space-md);
  max-inline-size: var(--measure-narrow);
}

/* — Receipt: line items, serif description left, mono amount right — */
.op-email__receipt {
  margin: var(--space-md) 0;
  border-top: 1px solid var(--rule);
}
.op-email__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rule-faint);
}
.op-email__line-title { font-family: var(--font-reading); font-size: var(--text-sm); color: var(--text); }
.op-email__line-note {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-email__line-note [data-numeric] { font-family: var(--font-data); font-variant-numeric: tabular-nums lining-nums; }
.op-email__amount {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  white-space: nowrap;
}
/* The ruled total row — a strong ledger rule, emphatic figure */
.op-email__line--total {
  border-bottom: 0;
  border-top: 1.5px solid var(--rule-strong);
  margin-top: var(--space-3xs);
  padding-top: var(--space-sm);
}
.op-email__line--total .op-email__line-title {
  font-family: var(--font-furniture);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.op-email__line--total .op-email__amount { font-size: var(--text-md); font-weight: var(--weight-semibold); }

/* — Panel: a banded inset (report-ready verdict). Reads --bk-* from data-band — */
.op-email__panel {
  margin: var(--space-md) 0;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bk-line, var(--rule-strong));
  padding: var(--space-md);
}
.op-email__panel-label {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-2xs);
}
.op-email__verdict {
  font-family: var(--font-data);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bk-ink, var(--text));
}
.op-email__verdict-max { font-size: var(--text-md); color: var(--text-muted); }
.op-email__band {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bk-ink, var(--text));
  margin-inline-start: var(--space-xs);
}

/* — CTA: solid INK block link, leaf type, square corners (never the rubric) — */
.op-email__cta {
  display: inline-block;
  margin: var(--space-sm) 0 var(--space-md);
  padding: 0.75em 1.6em;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border: 1px solid var(--surface-inverse);
  border-radius: var(--radius-xs);
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-align: center;
}
.op-email__cta:hover { background: var(--surface-inverse-hover); color: var(--text-inverse); }
.op-email__cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* — Footer: a sunken deckle well of furniture fine print — */
.op-email__footer {
  background: var(--surface-sunken);
  border-top: 1px solid var(--rule);
  margin: var(--space-md) calc(-1 * var(--space-md)) calc(-1 * var(--space-lg));
  padding: var(--space-md);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.op-email__footer a { color: var(--text-secondary); }
.op-email__note { font-style: italic; margin: 0 0 var(--space-2xs); max-inline-size: 52ch; }
.op-email__imprint {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  margin: var(--space-2xs) 0 0;
}