/* Optional error-page layout; visual primitives are shared with GrassWebBlazor. */
.gu-error-page { padding: clamp(2rem, 8vh, 5rem) 1rem; }
.gu-card.gu-error { width: min(36rem, 100%); margin-inline: auto; padding: 3rem 2rem; color: var(--grass-color-text); font-family: var(--grass-font-sans); text-align: center; overflow-wrap: anywhere; }
.gu-error__code { margin: 0 0 1rem; color: var(--grass-color-text-muted); font-size: 2.5rem; font-weight: 600; line-height: 1.2; }
.gu-error .gu-error__title { font-size: 1.5rem; line-height: 1.4; }
.gu-error__title:focus { outline: none; }
.gu-error__description { margin: 1rem 0 0; color: var(--grass-color-text-muted); font-size: .875rem; line-height: 1.7; }
.gu-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.gu-error__actions [hidden] { display: none; }
.gu-error__hint { margin: 1rem 0 0; color: var(--grass-color-text-muted); font-size: .75rem; line-height: 1.7; }
.gu-error__reference { margin: 1rem 0 0; color: var(--grass-color-text-muted); font-size: .75rem; }
.gu-error__reference code { user-select: all; }
.gu-error__footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--grass-color-border); color: var(--grass-color-text-muted); font-size: .75rem; line-height: 1.7; }
.gu-error__footer a { color: var(--grass-color-brand-strong); text-underline-offset: .2em; }
/* Maintain GitHub Primer primary button contrast with white text */
:root[data-theme="dark"] .gu-error .gu-action--primary,
:root[data-bs-theme="dark"] .gu-error .gu-action--primary {
  background: #238636;
  border-color: rgba(240, 246, 252, 0.1);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .gu-error .gu-action--primary:hover:not(:disabled),
:root[data-bs-theme="dark"] .gu-error .gu-action--primary:hover:not(:disabled) {
  background: #2ea043;
  color: #ffffff;
}
@media (max-width: 576px) {
  .gu-card.gu-error { padding: 2rem 1.25rem; }
  .gu-error__actions .gu-action { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gu-error .gu-action { transition: none; }
  .gu-error .gu-action:hover { transform: none; }
}