/* Cards, section headings and the failure-state block. Shared by every screen. */

.card {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card__head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 16px 12px;
}
.card__head--bare { padding: 0 0 12px; align-items: baseline; }
.card__title { font-size: 14.5px; font-weight: 600; margin: 0; }
.card__sub { font-size: 11.5px; color: var(--p-ink-3); margin-top: 2px; }
.card__actions {
  display: flex; align-items: center; gap: 8px;
  margin-inline-start: auto; flex-wrap: wrap;
}

/* Eyebrow (§3) */
.eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--p-ink-3);
}

/* ---- Failure states. Each one is a screen, not a toast. ---- */
.state {
  max-width: 460px; margin: 64px auto; text-align: center;
}
.state__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px;
}
.state__body { font-size: 13px; color: var(--p-ink-2); margin: 0 0 20px; line-height: 1.55; }

.loading { font-size: 13px; color: var(--p-ink-3); padding: 32px 0; }