.auth-layout {
  --auth-card-width: calc(var(--nova-space-8) * 7);
  --auth-card-width-wide: calc(var(--nova-space-8) * 8);
  --auth-card-width-legal: calc(var(--nova-space-8) * 11);
  --auth-page-min-height: 100dvh;
  --auth-check-offset: calc(var(--nova-space-1) / 2);
  min-height: var(--auth-page-min-height);
  background: var(--nova-color-canvas);
  background-image: none;
  color: var(--nova-color-ink);
}

.auth-page {
  flex: 1 0 auto;
  width: min(100% - 2 * var(--nova-space-5), var(--auth-card-width));
  margin: 0 auto;
  padding: var(--nova-space-7) 0;
}

.auth-layout .nova-base-header {
  position: static;
  border-bottom: 0;
  background: transparent;
}

@media (min-width: 900px) {
  .auth-layout:not(.legal-document-body) {
    --auth-spine: clamp(20rem, 38vw, 34rem);
    padding-inline-start: var(--auth-spine);
  }

  .auth-layout:not(.legal-document-body)::before {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--auth-spine);
    background: url("../../img/auth-scene.e9bf98c05649.jpg") center / cover var(--nova-color-scene);
    content: "";
  }

  html[data-theme="dark"] .auth-layout:not(.legal-document-body)::before {
    background-color: var(--nova-color-ink-muted);
    background-blend-mode: multiply;
  }

  .auth-layout:not(.legal-document-body) .nova-base-header {
    position: fixed;
    inset: var(--nova-space-3) auto auto 0;
    width: var(--auth-spine);
    background: transparent;
    color: var(--nova-color-scene-ink);
  }

  .auth-layout:not(.legal-document-body) .nova-base-header__wordmark,
  .auth-layout:not(.legal-document-body) .nova-beta-label {
    color: var(--nova-color-scene-ink);
  }

  .auth-layout:not(.legal-document-body) .auth-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.auth-page:focus {
  outline: none;
}

.auth-layout--form-wide .auth-page {
  width: min(100% - 2 * var(--nova-space-5), var(--auth-card-width-wide));
}

.legal-document-body .auth-page {
  width: min(100% - 2 * var(--nova-space-5), var(--auth-card-width-legal));
}

.auth-messages {
  display: grid;
  gap: var(--nova-space-2);
  margin-bottom: var(--nova-space-4);
}

.auth-message {
  margin: 0;
  padding: var(--nova-space-3) var(--nova-space-4);
  border: var(--nova-border-width-quiet) solid var(--nova-color-border-quiet);
  border-radius: var(--nova-radius-control);
  background: var(--nova-color-surface-paper);
  color: var(--nova-color-ink);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-type-leading-meta);
}

.auth-message[data-level="error"] {
  border-color: var(--nova-color-status-danger);
  background: var(--nova-color-status-danger-soft);
  color: var(--nova-color-status-danger-ink);
}

.auth-message[data-level="success"] {
  background: var(--nova-color-accent-soft);
}

.auth-card {
  color: var(--nova-color-ink);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-default);
}

.auth-layout .auth-card h1 {
  margin: 0;
  color: var(--nova-color-ink);
  font: var(--nova-type-page-title);
  font-feature-settings: inherit;
  font-size: var(--nova-font-size-display-card);
  letter-spacing: var(--nova-letter-spacing-display-tight);
}

.auth-lede,
.auth-layout .auth-card .auth-folio__lede {
  max-width: none;
  margin: var(--nova-space-2) 0 0;
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-default);
  line-height: var(--nova-type-leading-meta);
}

.auth-card > h1 + :not(.auth-lede),
.auth-card > .auth-lede + *,
.auth-layout .auth-card .auth-folio__header {
  margin-top: var(--nova-space-5);
}

.auth-layout .auth-card .auth-folio__header:first-child {
  margin-top: 0;
}

.auth-layout .auth-card .auth-folio__header {
  margin-bottom: var(--nova-space-5);
}

.auth-layout main a:not(.workspace-action) {
  color: var(--nova-color-accent-ink);
  text-decoration-line: underline;
  text-decoration-thickness: var(--nova-border-width-quiet);
  text-underline-offset: var(--nova-ui-underline-offset);
}

.auth-after {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nova-space-2) var(--nova-space-5);
  margin: var(--nova-space-4) 0 0;
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-type-leading-meta);
}

.auth-note {
  margin: 0;
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-small);
  line-height: var(--nova-type-leading-meta);
}

.auth-card > .auth-note {
  margin-top: var(--nova-space-4);
}

.auth-form {
  display: grid;
  gap: var(--nova-space-4);
}

.auth-field {
  display: grid;
  gap: var(--nova-space-2);
}

.auth-field .form-label,
.auth-layout .auth-field > label:first-child:not(.auth-check-row) {
  margin: 0;
  color: var(--nova-color-ink);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  font-weight: var(--nova-font-weight-display);
  line-height: var(--nova-line-height-ui);
}

.auth-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nova-space-3);
}

.auth-field__label-row a {
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
}

.auth-layout .auth-form .form-control {
  min-height: var(--nova-control-height-comfortable);
  padding: 0 var(--nova-space-3);
  border: var(--nova-border-width-quiet) solid var(--nova-color-border-control);
  border-radius: var(--nova-radius-control);
  background: var(--nova-color-surface-raised);
  color: var(--nova-color-ink);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-default);
  box-shadow: none;
  transition: border-color var(--motion-control) var(--ease-control);
}

@media (hover: hover) and (pointer: fine) {
  .auth-layout .auth-form .form-control:hover {
    border-color: var(--nova-color-border-strong);
  }
}

.auth-layout .auth-form .form-control:focus-visible {
  border-color: var(--nova-focus-ring-color);
  box-shadow: var(--nova-edge-focus);
}

.auth-layout .auth-form .form-control[aria-invalid="true"] {
  border-color: var(--nova-color-status-danger);
}

.auth-layout .auth-form .form-control:disabled {
  cursor: default;
  opacity: var(--nova-opacity-disabled);
}

.auth-field__help {
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-type-leading-meta);
}

.auth-field__help :is(ul, p) {
  margin-block: 0;
}

.auth-field__help ul {
  display: grid;
  gap: var(--nova-space-1);
  padding-left: var(--nova-space-4);
}

.auth-layout--form-wide .auth-field__help--list ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--nova-space-4);
}

.auth-field .invalid-feedback,
.auth-field__error,
.auth-form__errors {
  margin: 0;
  color: var(--nova-color-status-danger-ink);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-type-leading-meta);
}

.auth-field .invalid-feedback p,
.auth-form__errors :is(ul, p) {
  margin: 0;
}

.auth-form__errors ul {
  padding-left: var(--nova-space-4);
}

.auth-check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nova-space-3);
  align-items: start;
  margin: 0;
  color: var(--nova-color-ink);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  font-weight: normal;
  letter-spacing: normal;
  line-height: var(--nova-type-leading-meta);
  cursor: pointer;
}

.auth-layout .auth-form input[type="checkbox"],
.auth-check-row input[type="checkbox"] {
  flex: none;
  border: revert;
  border-radius: revert;
  background: revert;
  box-shadow: none;
  appearance: auto;
  width: var(--nova-icon-size-small);
  height: var(--nova-icon-size-small);
  min-height: 0;
  margin: var(--auth-check-offset) 0 0;
  padding: 0;
  accent-color: var(--nova-color-accent-ink);
}

.auth-layout .auth-form input[type="checkbox"]:focus-visible,
.auth-check-row input[type="checkbox"]:focus-visible {
  box-shadow: var(--nova-focus-ring);
}

.auth-check-row > span {
  display: block;
}

.auth-check-row strong {
  font-weight: inherit;
}

.auth-check-row small {
  display: block;
  margin-block-start: var(--nova-space-1);
  color: var(--nova-color-ink-muted);
  font-size: var(--nova-font-size-ui-small);
  line-height: var(--nova-type-leading-meta);
}

.auth-form--plain > p:not(.auth-note) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--nova-space-3);
  margin: 0;
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-type-leading-meta);
}

.auth-form--plain .errorlist {
  margin: 0;
  padding: 0;
  color: var(--nova-color-status-danger-ink);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  list-style: none;
}

.auth-submit,
.auth-google-button {
  width: 100%;
  min-height: var(--nova-control-height-comfortable);
  font-size: var(--nova-font-size-ui-default);
}

.auth-google-button {
  gap: var(--nova-space-3);
}

.auth-google-button::before {
  width: var(--nova-icon-size-default);
  height: var(--nova-icon-size-default);
  flex: 0 0 auto;
  background: url("../../img/google-g.0a9bf10113e8.svg") center / contain no-repeat;
  content: "";
}

.auth-method-divider {
  display: flex;
  align-items: center;
  gap: var(--nova-space-3);
  margin-block: var(--nova-space-4);
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  white-space: nowrap;
}

.auth-method-divider::before,
.auth-method-divider::after {
  height: var(--nova-border-width-quiet);
  flex: 1;
  background: var(--nova-color-border-quiet);
  content: "";
}

.auth-card > .auth-method-divider {
  margin-top: var(--nova-space-4);
}

.auth-form__switch,
.auth-form__terms {
  margin: var(--nova-space-4) 0 0;
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-type-leading-meta);
  text-align: center;
}

@media (max-width: 35.999rem) {
  .auth-page {
    width: min(100% - 2 * var(--nova-space-4), var(--auth-card-width));
    padding-top: var(--nova-space-6);
  }

  .auth-layout--form-wide .auth-page,
  .legal-document-body .auth-page {
    width: calc(100% - 2 * var(--nova-space-4));
  }

  .auth-layout--form-wide .auth-field__help--list ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

.legal-document-body .legal-folio {
  --legal-heading-size: 20px;
  --legal-measure: 68ch;
  opacity: 1;
  transform: none;
}

.auth-layout .auth-card .legal-folio {
  margin-top: var(--nova-space-4);
}

.legal-copy {
  color: var(--nova-color-ink);
  font-family: var(--nova-font-reading);
  font-size: var(--nova-font-size-reading-default);
  line-height: var(--nova-line-height-reading);
}

.legal-copy > * {
  max-width: var(--legal-measure);
}

.legal-copy__date {
  margin: 0 0 var(--nova-space-5);
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-type-leading-meta);
}

.legal-document-body .legal-copy h2 {
  margin: var(--nova-space-6) 0 var(--nova-space-2);
  color: var(--nova-color-ink);
  font-family: var(--nova-font-reading);
  font-size: var(--legal-heading-size);
  font-weight: var(--nova-type-weight-display);
  letter-spacing: var(--nova-letter-spacing-display-tight);
  line-height: var(--nova-type-leading-control);
}

.legal-copy p,
.legal-copy ul,
.legal-copy__form {
  margin-top: 0;
  margin-bottom: var(--nova-space-4);
}

.legal-copy ul {
  display: grid;
  gap: var(--nova-space-2);
  padding-left: var(--nova-space-5);
}

.legal-copy li::marker {
  color: var(--nova-color-accent-ink);
}

.legal-document-body .legal-copy a:not(.workspace-action) {
  color: var(--nova-color-accent-ink);
  text-decoration-line: underline;
  text-decoration-thickness: var(--nova-border-width-quiet);
  text-underline-offset: var(--nova-ui-underline-offset);
}

.legal-copy .table {
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-type-leading-meta);
}

@media (max-width: 560px) {
  .legal-copy .table thead {
    display: none;
  }

  .legal-copy .table :is(tbody, tr, th, td) {
    display: block;
  }

  .legal-copy .table tr {
    padding-block: var(--nova-space-2);
    border-bottom: var(--nova-border-width-quiet) solid var(--nova-color-border-quiet);
  }

  .legal-copy .table :is(th, td) {
    padding: 0;
    border: 0;
  }

  .legal-copy .table td:last-child {
    color: var(--nova-color-ink-muted);
  }
}

.auth-password-field {
  position: relative;
  display: block;
}

.auth-password-field input {
  padding-inline-end: var(--nova-control-height-comfortable);
}

.auth-password-reveal {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  min-width: var(--nova-touch-target);
  padding-inline: var(--nova-space-3);
  border: 0;
  background: transparent;
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  font-weight: var(--nova-font-weight-action);
  cursor: pointer;
}

.auth-password-reveal:focus-visible {
  border-radius: var(--nova-radius-control);
  outline: none;
  box-shadow: var(--nova-focus-ring-inset);
}

.legal-contents {
  margin-block-end: var(--nova-space-5);
  font-family: var(--nova-font-ui);
}

.legal-contents summary::before {
  flex: none;
  width: var(--nova-space-2);
  height: var(--nova-space-2);
  margin-inline-end: var(--nova-space-2);
  border: solid currentcolor;
  border-width: var(--nova-border-width-strong) var(--nova-border-width-strong) 0 0;
  transform: rotate(45deg);
  transition: transform var(--motion-control) var(--ease-control);
  content: "";
}

.legal-contents[open] summary::before {
  transform: rotate(135deg);
}

.legal-contents summary {
  display: flex;
  align-items: center;
  list-style: none;
  min-height: var(--nova-touch-target);
  color: var(--nova-color-ink);
  font-size: var(--nova-font-size-ui-default);
  font-weight: var(--nova-ui-medium-weight);
  cursor: pointer;
}

.legal-contents ul {
  columns: 2;
  margin: var(--nova-space-2) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
}

.legal-contents li {
  break-inside: avoid;
  padding-block: var(--nova-space-1);
}

@media (max-width: 700px) {
  .legal-contents ul {
    columns: 1;
  }
}

@media (min-width: 1280px) {
  .legal-contents {
    position: fixed;
    inset-block: calc(var(--nova-space-8) * 2) var(--nova-space-8);
    inset-inline-start: var(--nova-space-6);
    width: calc((var(--nova-layout-viewport-width) - var(--nova-layout-page-measure)) / 2);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .legal-contents summary {
    min-height: 0;
    color: var(--nova-color-ink-muted);
    pointer-events: none;
  }

  .legal-contents summary::before {
    display: none;
  }

  .legal-contents ul {
    columns: 1;
  }

  .legal-contents a {
    color: var(--nova-color-ink-muted);
    text-decoration: none;
  }
}

@media (max-width: 899.98px) {
  .auth-layout:not(.legal-document-body) .nova-base-footer {
    flex-wrap: wrap;
    padding-inline: 0;
  }

  .auth-layout:not(.legal-document-body) .nova-base-footer::before {
    flex: 0 0 100%;
    height: clamp(calc(var(--nova-space-8) * 2.25), calc(var(--nova-layout-viewport-height) * 0.26), calc(var(--nova-space-8) * 3.75));
    background: url("../../img/auth-scene.e9bf98c05649.jpg") center 85% / cover;
    mask-image: linear-gradient(to bottom, transparent, black 45%, black 82%, transparent);
    content: "";
  }

  html[data-theme="dark"] .auth-layout:not(.legal-document-body) .nova-base-footer::before {
    filter: brightness(0.62);
  }
}
