/* Postie · Panel — a flat tonal container. It owns the ground context of everything inside it. */
.postie-panel {
  display: flex; flex-direction: column; gap: 12px;
  box-sizing: border-box; padding: 20px 22px; min-width: 0;
  border-radius: var(--postie-radius-panel);
  background: var(--postie-c-raised); color: var(--postie-c-ink);
  font-family: var(--postie-font-ui);
}
.postie-panel--working { background: var(--postie-surface); color: var(--postie-ink); }
.postie-panel--raised  { background: var(--postie-c-raised); color: var(--postie-c-ink); }
/* tone="brand": the class list must include .postie-brand so children read the brand context */
.postie-panel--brand   { background: var(--postie-ground); color: var(--postie-ink-brand); }
/* tone="feature": the landing feature card from ONE markup, resolved by theme (BRIEF §4a) — inside a brand block it is the
   raised-brand step on dark and, on light, a paper tile that re-enters the working context (same declarations as .postie-working) */
.postie-panel--feature { background: var(--postie-c-raised); color: var(--postie-c-ink); }
[data-theme="light"] .postie-panel--feature { background: var(--postie-surface); color: var(--postie-ink);
  --postie-c-ground: var(--postie-surface); --postie-c-raised: var(--postie-raised); --postie-c-ink: var(--postie-ink); --postie-c-body: var(--postie-body); --postie-c-muted: var(--postie-muted); --postie-c-edge: var(--postie-edge); --postie-c-accent-text: var(--postie-accent-text); --postie-c-accent-hover: var(--postie-accent-hover);
  --postie-c-pebble-1: var(--postie-pebble-1); --postie-c-pebble-2: var(--postie-pebble-2); --postie-c-pebble-ink: var(--postie-pebble-ink); --postie-c-selected: var(--postie-selected); --postie-c-select-fill: var(--postie-select-fill); --postie-c-select-ink: var(--postie-select-ink); }
.postie-panel--tight { padding: 14px 16px; gap: 8px; border-radius: var(--postie-radius-row); }
.postie-panel--loose { padding: 28px 32px; gap: 16px; }
.postie-panel__title { margin: 0; font-family: var(--postie-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }
.postie-panel__body  { margin: 0; font-size: 15px; line-height: 1.5; color: var(--postie-c-body); }
.postie-panel__body--sm { font-size: 13px; line-height: 1.45; }
.postie-panel__link { font-size: 13px; font-weight: 700; color: var(--postie-c-accent-text); text-decoration: none; }
.postie-panel__link:hover { color: var(--postie-c-accent-hover); }