/* ============================================================
   Datamart — DS.ErrorState — failed-to-load state (THE RULE).
   Sibling of DS.EmptyState, critical tone. Inline: a small
   critical icon next to the title (no icon tile), one short line,
   one primary action (Zkusit znovu). Calm, sentence-case.
   Pairs with _ds/error-state.js. Load AFTER colors_and_type.css.
   ============================================================ */
.est { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-2); padding: 28px var(--sp-6); }
.est-head { display: inline-flex; align-items: center; gap: var(--sp-2); }
.est-head .ti { font-size: 18px; color: var(--critical-ink); flex: none; }
.est-t { font: 600 14px var(--font-display); color: var(--ink-900); letter-spacing: -0.01em; }
.est-s { font: 400 13px/1.5 var(--font-sans); color: var(--fg-secondary); max-width: 300px; }
.est-act { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }

/* compact — column / inline section */
.est.sm { padding: var(--sp-5) var(--sp-4); gap: var(--sp-1); }
.est.sm .est-head .ti { font-size: 16px; }
.est.sm .est-t { font-size: 13px; }
.est.sm .est-s { font-size: 12px; max-width: 240px; }
.est.sm .est-act { margin-top: var(--sp-3); }

/* actions (component carries its own buttons) */
.est-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); }
.est-btn .ti { font-size: 15px; color: var(--fg-secondary); }
.est-btn:hover { background: var(--surface-75); }
.est-btn.primary { background: var(--accent); border-color: var(--accent-press); color: #fff; }
.est-btn.primary .ti { color: #fff; }
.est-btn.primary:hover { background: var(--accent-press); }
.est-btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--accent); height: 28px; padding: 0 var(--sp-3); }
.est-btn.ghost .ti { color: var(--accent); }
.est-btn.ghost:hover { background: var(--accent-tint); }
.est.sm .est-btn { height: 28px; padding: 0 var(--sp-3); }