/* wave7/errors — page layout only for the v2 error pages inside the frame (errors/html/error_page_v2.php: forbidden,
   not found, system error) and for the public sign-in pages (signin/*_v2.php: sign in, forgot password, new
   password, expired link). Components come from components.css (ds-card, ds-btn, ds-field, ds-callout, ds-auth);
   no colours of its own, no !important, logical properties only. Blocks: ds-err-*, ds-auth (additions). */

/* ------------------------------------------------------------------ error page inside the frame */
.ds-err {
  align-items: center;
  justify-content: center;
  min-block-size: calc(100dvh - 160px);
}

.ds-err__card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  align-items: center;
  inline-size: 100%;
  max-inline-size: var(--ds-size-dialog-sm);
  padding: var(--ds-space-36) var(--ds-space-28);
  text-align: center;
}

.ds-err__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  color: var(--ds-accent-text);
  background: var(--ds-accent-soft);
  border-radius: var(--ds-radius-3xl);
}

.ds-err__icon--forbidden,
.ds-err__icon--error {
  color: var(--ds-on-warn-soft);
  background: var(--ds-warn-soft);
}

.ds-err__code {
  margin: 0;
  font-size: var(--ds-fs-12);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-muted);
  letter-spacing: 0.04em;
}

.ds-err__title {
  margin: 0;
  font-family: var(--ds-font-heading);
  font-size: var(--ds-fs-22);
  font-weight: var(--ds-fw-semibold);
  line-height: var(--ds-lh-tight);
  color: var(--ds-ink);
}

.ds-err__text {
  max-inline-size: 42ch;
  margin: 0;
  font-size: var(--ds-fs-15);
  line-height: var(--ds-lh-loose);
  color: var(--ds-ink-2);
}

.ds-err__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-10);
  justify-content: center;
  margin-block-start: var(--ds-space-8);
}

.ds-err__actions .ds-btn {
  gap: var(--ds-space-8);
}

.ds-err__path {
  max-inline-size: 100%;
  margin: var(--ds-space-4) 0 0;
  overflow-wrap: anywhere;
  font-size: var(--ds-fs-12);
  color: var(--ds-faint);
}

@media (width <= 768px) {
  .ds-err {
    min-block-size: auto;
    padding: var(--ds-space-20) var(--ds-space-16);
  }

  .ds-err__card {
    padding: var(--ds-space-28) var(--ds-space-18);
  }

  .ds-err__actions {
    flex-direction: column;
    align-self: stretch;
  }

  .ds-err__actions .ds-btn {
    justify-content: center;
    min-block-size: var(--ds-size-touch-min);
  }
}

/* ------------------------------------------------------------------ public sign-in pages: additions to ds-auth */
.ds-auth__form .ds-btn,
.ds-auth__form .ds-input {
  min-block-size: var(--ds-size-touch-min);
}

.ds-auth__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ds-size-touch-min);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-accent-text);
}

.ds-auth__brand {
  flex-wrap: wrap;
}

.ds-auth__error {
  display: flex;
  gap: var(--ds-space-8);
  align-items: flex-start;
  font-size: var(--ds-fs-14);
}

.ds-auth__error[hidden] {
  display: none;
}

.ds-auth__state {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-18);
}