/* Yolt v11 — empty states
 * Source: _DESIGN_HANDOFF/_DESIGN_BATCH_4a_redesigns-empty-loading.html (Section B)
 * 5 patterns: no-data · no-matches · coming-soon · tier-locked · error
 */

/* ════════ §B EMPTY STATES ════════ */
.empty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.empty-state {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px;
  padding: 32px 24px; min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px;
}
.empty-state .illus { color: var(--ink-3); }
.empty-state h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-0); letter-spacing: -0.01em; }
.empty-state p { margin: 0; font-size: 12.5px; color: var(--ink-2); max-width: 320px; }
.empty-state .actions { display: flex; gap: 8px; margin-top: 6px; }
.empty-state .btn-primary, .empty-state .btn-secondary, .empty-state .btn-ghost {
  font: inherit; font-size: 12px; padding: 7px 14px; border-radius: 6px; cursor: pointer;
}
.empty-state .btn-primary { background: var(--ink-0); color: var(--bg-0); border: 0; font-weight: 600; }
.empty-state .btn-secondary { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-1); }
.empty-state .btn-ghost { background: transparent; border: 0; color: var(--brand); }

.empty-state-tier-locked {
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in oklch, var(--brand) 12%, transparent) 0%, transparent 60%),
    var(--bg-1);
  border-color: color-mix(in oklch, var(--brand) 22%, var(--line));
}
.empty-state-tier-locked h4 .badge {
  display: inline-block; margin-left: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px;
  padding: 2px 6px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(135deg, var(--brand) 0%, var(--info) 100%); color: var(--bg-0);
}
.empty-state-tier-locked .btn-primary { background: linear-gradient(135deg, var(--brand) 0%, var(--info) 100%); color: var(--bg-0); }

.empty-state-error { border-color: color-mix(in oklch, var(--bad) 22%, var(--line)); }
.empty-state-error .illus { color: var(--bad); }

.illus-svg {
  width: 96px; height: 96px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.illus-svg .accent-fill { fill: currentColor; stroke: none; opacity: 0.18; }