/* ==========================================================================
   GATE PASS — Placeholder / Empty-State styling (Phase 1)
   Visual scaffolding for empty screens until real components arrive.
   ========================================================================== */

.placeholder__card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.placeholder__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.placeholder__blurb {
  color: var(--text-secondary);
  max-width: 60ch;
  margin-bottom: var(--space-4);
}

.placeholder__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--accent);
  background: var(--color-brand-50);
  border-radius: var(--radius-full);
}

.placeholder__tile {
  height: 120px;
  background: var(--surface-sunken);
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius-md);
}