/*
 * Forma hosted account pages (plan F0-05 C1). Design tokens only (tokens.css): no raw colours,
 * no other font families. Logical properties so ar/ckb mirror without extra rules.
 * The sign-in content itself (43:2, 183:4781) is C3; this file is the page frame and the
 * base form elements every account page shares.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.forma-account {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background: linear-gradient(180deg, var(--forma-surface-page-hi), var(--forma-surface-page-lo));
  color: var(--forma-text-body);
  font-family: var(--forma-font-family-sans);
  font-size: var(--forma-type-body-15-size);
  font-weight: var(--forma-type-body-15-weight);
  line-height: var(--forma-type-body-15-line-height);
}

.forma-account__main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding: var(--forma-spacing-xl) var(--forma-spacing-lg);
}

.forma-account__panel {
  inline-size: 100%;
  max-inline-size: var(--forma-size-drawer);
  padding: var(--forma-spacing-2xl) var(--forma-spacing-xl);
  border: 1px solid var(--forma-border-glass-top);
  border-radius: var(--forma-radius-card-main);
  background: var(--forma-surface-glass-card);
  box-shadow: var(--forma-effect-glass-l2-card-shadow);
  -webkit-backdrop-filter: blur(var(--forma-effect-glass-l2-card-blur));
  backdrop-filter: blur(var(--forma-effect-glass-l2-card-blur));
}

.forma-account h1,
.forma-account h2,
.forma-account h3,
.forma-account h4,
.forma-account h5 {
  margin: 0 0 var(--forma-spacing-sm);
  color: var(--forma-text-heading);
  font-size: var(--forma-type-title-26-size);
  font-weight: var(--forma-type-title-26-weight);
  line-height: var(--forma-type-title-26-line-height);
  letter-spacing: var(--forma-type-title-26-letter-spacing);
}

.forma-account p {
  margin: 0 0 var(--forma-spacing-lg);
  color: var(--forma-text-secondary);
}

.forma-account a {
  color: var(--forma-text-action);
  font-weight: var(--forma-type-body-15-emphasis-weight);
  text-decoration: none;
}

.forma-account a:hover {
  text-decoration: underline;
}

.forma-account label {
  display: block;
  margin-block-end: var(--forma-spacing-xs);
  color: var(--forma-text-heading);
  font-size: var(--forma-type-body-13-size);
  line-height: var(--forma-type-body-13-line-height);
  font-weight: var(--forma-type-body-15-emphasis-weight);
}

.forma-account input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  display: block;
  inline-size: 100%;
  min-block-size: var(--forma-size-row-compact);
  margin-block-end: var(--forma-spacing-lg);
  padding: 0 var(--forma-spacing-md);
  border: 1px solid var(--forma-border-field);
  border-radius: var(--forma-radius-field);
  background: var(--forma-surface-field);
  color: var(--forma-text-heading);
  font: inherit;
}

.forma-account input:focus-visible,
.forma-account button:focus-visible,
.forma-account a:focus-visible {
  outline: 2px solid var(--forma-border-focus);
  outline-offset: 2px;
}

.forma-account button[type="submit"],
.forma-account .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: var(--forma-size-row-compact);
  padding: 0 var(--forma-spacing-lg);
  border: 0;
  border-radius: var(--forma-radius-button-main);
  background: var(--forma-action-primary);
  box-shadow: var(--forma-effect-solid-button-shadow);
  color: var(--forma-action-primary-text);
  font: inherit;
  font-weight: var(--forma-type-body-15-emphasis-weight);
  cursor: pointer;
}

.forma-account .text-danger,
.forma-account .field-validation-error,
.forma-account .validation-summary-errors {
  color: var(--forma-signal-critical-text);
  font-size: var(--forma-type-body-13-size);
  line-height: var(--forma-type-body-13-line-height);
}

/* Page alerts (generic sign-in failure); the error state is not designed (ND-29). */
.forma-account__alert {
  margin-block-end: var(--forma-spacing-xl);
  padding: var(--forma-spacing-md) var(--forma-spacing-lg);
  border-radius: var(--forma-radius-field);
  font-size: var(--forma-type-body-13-size);
  line-height: var(--forma-type-body-13-line-height);
}

.forma-account__alert p {
  margin: 0;
}

.forma-account__alert--danger,
.forma-account__alert--warning {
  background: var(--forma-signal-critical-fill);
  color: var(--forma-signal-critical-text);
}

@media (prefers-reduced-transparency: reduce) {
  .forma-account__panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}