/* Postie · ProductPreview — the working-surface inbox card embedded in the brand hero: ground-role-split shown in one frame.
   It re-enters the working context (.postie-working) so every child reads working roles inside the charcoal.
   The card itself paints NOTHING: each part paints its own ground and the two end parts carry the card's corner radius, so no
   paper is ever painted under the charcoal chrome (the antialiased overflow clip would leak it as a crescent at the top corners). */
.postie-preview {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--postie-radius-panel); overflow: hidden;
  background: transparent; color: var(--postie-ink);
  font-family: var(--postie-font-ui); font-variant-numeric: tabular-nums;
}
.postie-preview.postie-working { background-color: transparent; }
.postie-preview__chrome { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; height: 44px; padding: 0 16px; border-radius: var(--postie-radius-panel) var(--postie-radius-panel) 0 0; background: var(--postie-ground); color: var(--postie-ink-brand); flex-shrink: 0; }
.postie-preview__mark { font-family: var(--postie-font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.postie-preview__meta { font-size: 12px; font-weight: 600; color: var(--postie-body-brand); }
.postie-preview__band { flex-shrink: 0; }
.postie-preview__list { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; background: var(--postie-surface); }
.postie-preview__foot { display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 12px 16px; border-radius: 0 0 var(--postie-radius-panel) var(--postie-radius-panel); background: var(--postie-raised); color: var(--postie-body); font-size: 13px; flex-shrink: 0; }
.postie-preview__footicon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--postie-ground); flex-shrink: 0; }
.postie-preview__footicon svg { width: 14px; height: 14px; fill: none; stroke: var(--postie-accent-text-brand); stroke-width: 2; stroke-linecap: round; }
.postie-preview--fixed { height: 560px; }