/* ============================================================
   Datamart — DS.EmptyState — universal empty / zero state.
   DS rule: one short line + one action. Calm, quiet, sentence
   case, muted Tabler icon in a soft tile. No illustrations.
     DS.EmptyState({ icon, title, subtitle, actions, size, drop })
   Sizes: default (region / full surface) · "sm" (column / inline).
   Requires window.Icon. Load after colors_and_type.css.
   ============================================================ */
.es { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-1); padding: 28px var(--sp-6); }
.es-ic { display: grid; place-items: center; color: var(--fg-muted); margin-bottom: var(--sp-2); }
.es-ic .ti { font-size: 26px; }
.es-t { font: 600 14px var(--font-display); color: var(--ink-900); letter-spacing: -0.01em; }
.es-s { font: 400 13px/1.5 var(--font-sans); color: var(--fg-secondary); max-width: 280px; }
.es-act { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }

/* compact — empty column / inline section */
.es.sm { padding: var(--sp-5) var(--sp-4); gap: 3px; }
.es.sm .es-ic { margin-bottom: var(--sp-1); }
.es.sm .es-ic .ti { font-size: 22px; }
.es.sm .es-t { font-size: 13px; }
.es.sm .es-s { font-size: 12px; max-width: 220px; }
.es.sm .es-act { margin-top: var(--sp-3); }

/* drop-zone variant — empty kanban column (a drag target) */
.es.drop { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: transparent; }

/* actions (self-contained so the component carries its own buttons) */
.es-btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-4); border-radius: var(--radius-md); font: 600 12px var(--font-display); cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface-100); color: var(--ink-900); box-shadow: var(--shadow-xs); }
.es-btn .ti { font-size: 15px; color: var(--fg-secondary); }
.es-btn:hover { background: var(--surface-75); }
.es-btn.primary { background: var(--accent); border-color: var(--accent-press); color: #fff; }
.es-btn.primary .ti { color: #fff; }
.es-btn.primary:hover { background: var(--accent-press); }
.es-btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--accent); height: 28px; padding: 0 var(--sp-3); }
.es-btn.ghost .ti { color: var(--accent); }
.es-btn.ghost:hover { background: var(--accent-tint); }
.es.sm .es-btn { height: 28px; padding: 0 var(--sp-3); font-size: 12px; }