/* khs-states.css — shared empty / loading / error state components
 * Use any of these by adding the markup to a screen; styled to match khs-clean.
 */

/* ════════════════════════════════════════════════════════════════════
 * Empty state — when a list has zero items by design
 * ════════════════════════════════════════════════════════════════════ */
.empty-state {
  padding: 56px 28px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--rule-2);
  border-radius: 8px;
  margin: 24px 28px;
}
.empty-state .glyph {
  display: inline-flex;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  align-items: center; justify-content: center;
  font-size: 22px; color: var(--ink-3); margin-bottom: 16px;
  font-family: "Inter", sans-serif; font-weight: 300;
}
.empty-state h3 {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink);
}
.empty-state p {
  font-size: 13.5px; color: var(--ink-3);
  line-height: 1.55; margin: 0 auto 18px; max-width: 380px;
}
.empty-state .actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
 * Loading skeletons — content shimmers in
 * ════════════════════════════════════════════════════════════════════ */
@keyframes khs-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skel {
  display: inline-block;
  background: var(--surface-2);
  background-image: linear-gradient(90deg, var(--surface-2) 0px, var(--surface-3) 40px, var(--surface-2) 80px);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 3px;
  animation: khs-shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  user-select: none;
}
.skel-line { height: 12px; width: 100%; display: block; margin: 4px 0; }
.skel-line.short { width: 60%; }
.skel-line.medium { width: 80%; }
.skel-circle { border-radius: 50%; }
.skel-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 12px; padding: 12px 14px; align-items: center;
  border-bottom: 1px solid var(--rule);
}

/* ════════════════════════════════════════════════════════════════════
 * Error state — connection failed, server error, etc.
 * ════════════════════════════════════════════════════════════════════ */
.error-state {
  padding: 32px 28px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--coral);
  border-radius: 8px;
  margin: 24px 28px;
  position: relative;
}
.error-state::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--coral); border-radius: 8px 8px 0 0;
}
.error-state .glyph {
  display: inline-flex;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral);
  border: 1px solid var(--coral);
  align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; margin-bottom: 14px;
}
.error-state h3 {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em; margin: 0 0 6px; color: var(--coral);
}
.error-state p {
  font-size: 13px; color: var(--ink-2);
  line-height: 1.55; margin: 0 auto 14px; max-width: 460px;
}
.error-state .err-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--rule);
  padding: 4px 10px; border-radius: 4px;
  display: inline-block; margin-bottom: 14px;
}
.error-state .actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
 * Inline banner — non-blocking notice
 * ════════════════════════════════════════════════════════════════════ */
.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 13px; color: var(--ink-2);
  margin: 16px 28px;
}
.banner .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3); margin-top: 7px; flex-shrink: 0;
}
.banner.crit { border-color: var(--coral); background: var(--coral-soft); color: var(--ink); }
.banner.crit .dot { background: var(--coral); }
.banner.warn { border-color: var(--amber); background: var(--amber-soft); color: var(--ink); }
.banner.warn .dot { background: var(--amber); }
.banner.info { border-color: var(--ocean); background: var(--ocean-soft); color: var(--ink); }
.banner.info .dot { background: var(--ocean); }
.banner.ok { border-color: var(--sage); background: var(--sage-tint); color: var(--ink); }
.banner.ok .dot { background: var(--sage); }
.banner .body { flex: 1; }
.banner .body strong { display: block; margin-bottom: 2px; }
.banner .actions { flex-shrink: 0; }
.banner .close { background: transparent; border: 0; color: var(--ink-3); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 14px; }
.banner .close:hover { background: rgba(0,0,0,.05); color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════
 * Offline indicator (mobile)
 * ════════════════════════════════════════════════════════════════════ */
.offline-bar {
  background: var(--amber); color: #fff;
  text-align: center; padding: 6px 14px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em;
  font-family: "JetBrains Mono", monospace; text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
 * Toast / live feedback
 * ════════════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 999; pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
  animation: khs-toast-in .3s ease-out;
}
@keyframes khs-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.toast .ok { color: var(--sage); }
.toast .crit { color: var(--coral); }