/* ATLAS · components/state-blocks.css
 * Canonical empty / error / no-results state blocks (DesignOps U3, v3.16.0).
 * Forensic, hairline-drawn, mono captions — NO emoji, NO generic icons, NO
 * filled accent cards (Visual Constitution Blocklist #2/#3/#4).
 *
 * Used by list/data surfaces: dashboard, all-runs, user-findings, audit-result,
 * scan-evm, scan-cairo, knowledge-app. Pairs with SkeletonScan.css (loading).
 *
 * Markup contract:
 *   <div class="state-block" role="status">                 (empty / neutral)
 *   <div class="state-block state-error" role="alert">       (error)
 *     <span class="state-mark" aria-hidden="true"></span>    (drawn crosshair/slash motif)
 *     <h3 class="state-title">No runs yet</h3>
 *     <p class="state-msg">Paste a contract on New Hunt to begin.</p>
 *     <div class="state-actions"> …optional buttons… </div>
 *   </div>
 */

.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4, 16px);
  text-align: center;
  padding: var(--s-9, 96px) var(--s-5, 24px);
  border: 1px solid var(--line, rgba(234, 238, 245, 0.07));
  border-radius: var(--r-md, 12px);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 11px,
      rgba(234, 238, 245, 0.015) 11px 12px
    );
  color: var(--ash, #8A96AE);
}

/* Drawn motif — a hairline crosshair ring (purpose-drawn, not an icon set) */
.state-mark {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, rgba(234, 238, 245, 0.14));
  position: relative;
  flex: none;
}
.state-mark::before,
.state-mark::after {
  content: "";
  position: absolute;
  background: var(--mute, #606878);
}
.state-mark::before { left: 50%; top: 9px; bottom: 9px; width: 1px; transform: translateX(-0.5px); }
.state-mark::after  { top: 50%; left: 9px; right: 9px; height: 1px; transform: translateY(-0.5px); }

.state-title {
  font-family: var(--f-display, "Space Grotesk", sans-serif);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--bone, #EAEEF5);
  margin: 0;
}

.state-msg {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ash, #8A96AE);
  max-width: 42ch;
  margin: 0;
  text-wrap: pretty;
}

.state-hint {
  font-family: var(--f-mono, "JetBrains Mono", monospace);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute, #606878);
}

.state-actions {
  display: flex;
  gap: var(--s-3, 12px);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s-2, 8px);
}

/* ── Error variant — ember mark, never a filled red panel ───────── */
.state-error .state-mark {
  border-color: color-mix(in oklab, var(--ember, #C0282A) 55%, transparent);
}
.state-error .state-mark::before,
.state-error .state-mark::after {
  background: var(--ember-hi, #E03638);
}
.state-error .state-title { color: var(--bone, #EAEEF5); }
.state-error .state-hint  { color: var(--ember-hi, #E03638); }

/* ── No-results (search/filter) — quieter than empty ────────────── */
.state-quiet {
  padding: var(--s-7, 48px) var(--s-5, 24px);
  background: none;
}

/* ── Reduced motion: nothing animates here by default; safe ─────── */
@media (prefers-reduced-motion: no-preference) {
  .state-block { transition: border-color var(--t-sm, 180ms) var(--ease-out-expo, ease); }
}