/* Shared card chrome for preview/*.html — kept tiny so the cards bleed full-bleed */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--sebel-blanc-casse); }
body {
  font-family: var(--font-sans);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
}
.card {
  width: 100%;
  height: 100vh;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--sebel-blanc-casse);
}
.card.tight  { padding: 18px 22px; gap: 10px; }
.card.dark   { background: var(--sebel-noir); color: var(--sebel-blanc-casse); }
.card.green  { background: var(--sebel-vert); color: var(--sebel-blanc-casse); }
.card.sage   { background: var(--sebel-vert-clair); color: var(--sebel-noir); }
.row { display: flex; gap: 10px; align-items: stretch; }
.col { display: flex; flex-direction: column; gap: 8px; }
.meta { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
        color: var(--color-fg-muted); font-weight: 500; }
.label { font-size: 11px; color: var(--color-fg-muted); }
.value { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg); }