/* Shared preview card scaffold — used by every card in /preview */
@import url('../colors_and_type.css');

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-ui);
  overflow: hidden;
}

.card {
  padding: 20px 24px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-grid { display: grid; gap: 10px; }
.col       { display: flex; flex-direction: column; gap: 6px; }
.spacer    { flex: 1; }