/* ==========================================================================
   Error Page — the full-screen takeover for a failed request (404/403/422/500)

   Shares the auth screens' backdrop deliberately: both are the application
   speaking for itself, outside the shell. Kept free of any dependency on the
   layout tokens the dashboard sets up, since the page has to render when the
   rest of the app could not.
   ========================================================================== */
.error-page-body {
  overflow-y: auto;
}

.error-page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6);
  overflow-y: auto;
  background:
    radial-gradient(ellipse at top right, var(--tint-green-16), transparent 55%),
    radial-gradient(ellipse at bottom left, var(--tint-white-10), transparent 60%),
    linear-gradient(160deg, var(--color-primary-dark), var(--color-secondary-dark));
}

/* == card == */
.error-page__card {
  width: 100%;
  max-width: 520px;
  padding: var(--space-8);
  text-align: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* == icon == */
.error-page__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-5);
  color: var(--color-danger);
  background-color: var(--tint-danger-10);
  border-radius: var(--radius-full);
}

.error-page__icon svg {
  width: 26px;
  height: 26px;
}

/* == copy == */
.error-page__status {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.error-page__title {
  font-size: var(--font-size-xxlarge);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}

.error-page__message {
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.error-page__advice {
  font-size: var(--font-size-medium);
  color: var(--color-text);
  line-height: 1.6;
}

/* == reference == */
.error-page__reference {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.error-page__reference-label {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.error-page__reference-code {
  display: block;
  /* The id is a long unbroken string; let it wrap rather than widen the card. */
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: var(--font-size-small);
  color: var(--color-primary-dark);
  user-select: all;
}

.error-page__reference-hint {
  margin-top: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-faint);
  line-height: 1.5;
}

/* == actions == */
.error-page__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.error-page__action {
  text-decoration: none;
}

/* == footer == */
.error-page__footer {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--tint-white-24);
}