/* ==========================================================================
   .tp-empty-state — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   Three distinct situations share this component, and the distinction matters
   more than the styling:

     default   nothing exists yet          → offer the action that creates one
     --filtered  a filter matched nothing  → offer to clear the filter
     --error     something failed          → say what to do, reveal nothing about why

   The error variant is also what the 400/403/404/500 templates are built from.
   FEAT-004 requires that a 404 for a compartmented record be indistinguishable
   from a 404 for a record that never existed, so the error copy is generic by
   design and this component gives it nowhere to leak detail.

   Variants   --filtered  --error  --compact
   Elements   __illustration  __title  __message  __actions  __detail
   ========================================================================== */

.tp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-space-4);
  padding: var(--tp-space-10) var(--tp-space-6);
  border: var(--tp-border-width-hairline) dashed var(--tp-color-border-subtle);
  border-radius: var(--tp-radius-lg);
  background-color: var(--tp-color-surface-raised);
  text-align: center;
}

/* An inline SVG, aria-hidden. Decoration only: everything it conveys is also
   in the title and the message, so a reader who never sees it loses nothing. */
.tp-empty-state__illustration {
  width: var(--tp-space-9);
  height: var(--tp-space-9);
  color: var(--tp-color-text-muted);
  opacity: var(--tp-opacity-muted);
}

.tp-empty-state__title {
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-xl);
  font-weight: var(--tp-weight-bold);
  line-height: var(--tp-leading-tight);
}

.tp-empty-state__message {
  max-width: var(--tp-space-prose-max);
  color: var(--tp-color-text-secondary);
  line-height: var(--tp-leading-normal);
}

.tp-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  margin-top: var(--tp-space-2);
}

/* The request id, and nothing else. It is the one detail that helps an
   operator correlate a report with the logs, and it discloses nothing about
   the request that produced it. */
.tp-empty-state__detail {
  color: var(--tp-color-text-muted);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-text-xs);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */

.tp-empty-state--filtered .tp-empty-state__illustration {
  color: var(--tp-color-state-info);
}

/* The dashed edge becomes solid for an error, because an error is a state the
   page is in rather than a space waiting to be filled. */
.tp-empty-state--error {
  border-style: solid;
  border-color: var(--tp-color-state-danger);
  background-color: var(--tp-color-surface-raised);
}

.tp-empty-state--error .tp-empty-state__illustration {
  color: var(--tp-color-state-danger);
  opacity: 1;
}

.tp-empty-state--compact {
  padding: var(--tp-space-6) var(--tp-space-4);
  gap: var(--tp-space-3);
}

.tp-empty-state--compact .tp-empty-state__illustration {
  width: var(--tp-space-7);
  height: var(--tp-space-7);
}

.tp-empty-state--compact .tp-empty-state__title {
  font-size: var(--tp-text-lg);
}