body {
  background-color: var(--background-body);
  color: var(--color-primary);
  font-family: 'Noto Sans', sans-serif;
  font-size: 1.125rem;
}

.vertical-center {
  align-items: center;
  display: flex;
  min-height: 80%;
}

@supports (height: 80vh) {
  .vertical-center {
  min-height: 80vh; /* Override with 80vh if supported */
  }
}

.auth-container {
  align-items: center;
  display: flex;
  height: 80%;
  justify-content: center;
  width: 100%;
}

.auth-card {
  background: var(--background-medium-light);
  border-radius: var(--radius-md);
  border: solid 1px var(--border-medium-dark);
  padding: 1.25rem 1rem 1.5rem;
  width: 31.25rem;
}

/* The visual title is the wordmark (::before below); the site handle stays
   in the DOM as the accessible name, wrapped in .visually-hidden. */
.auth-title {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Brand — the wordmark itself (display cut, the sparkle after the word), drawn as a mask filled
   with the theme's brand gradient so it matches the sidebar in every theme (a
   background image can't take currentColor, and the inverted favicon badge
   belongs to the taskbar, not the card). Two layers, as in the sidebar
   cuts: one gradient across the word and one on the diagonal across the
   sparkle, which sits in the last 13.4% of the mask's width; both are held
   to the ink's height (the mask is 5.2984:1, centred in the taller box).
   Fallback only: when the firm has an uploaded logo, auth-brand.html adds
   has-logo and the image replaces the wordmark. NOTE: a CSS url can't ride
   static_v — bump the literal ?v below whenever the SVG is regenerated. */
.auth-title:not(.has-logo)::before {
  --wordmark-ink-height: calc(12rem / 5.2984);
  background:
    linear-gradient(135deg, var(--brand-grad-from) 15%, var(--brand-grad-to) 62%)
      right center / 13.4% var(--wordmark-ink-height) no-repeat,
    linear-gradient(100deg, var(--brand-grad-from) 10%, var(--brand-grad-to) 90%)
      left center / 86.6% var(--wordmark-ink-height) no-repeat;
  content: "";
  display: inline-block;
  height: 3.8rem;
  mask: url("../../images/brand/kosmos-wordmark-inline.svg?v=6") center / contain no-repeat;
  -webkit-mask: url("../../images/brand/kosmos-wordmark-inline.svg?v=6") center / contain no-repeat;
  width: 12rem;
}

/* The firm's uploaded logo (any aspect ratio), held to the wordmark's
   visual scale. */
.auth-logo {
  max-height: 3.75rem;
  max-width: 100%;
}

/* Standard screen-reader-only clip pattern. */
.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.auth-subtitle {
  font-size: 1em;
  margin-bottom: 2rem;
  text-align: center;
}

.auth-info {
  color: var(--color-primary);
  /* font-size: 1rem; */
  margin: 2rem 0;
  text-align: center;
}

.auth-error {
  background: var(--error-background);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-sm);
  color: var(--error);
  font-size: 0.9em;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  text-align: center;
}

.prompt {
  margin-bottom: 2rem;
}

.reset-confirm p {
  margin-bottom: 1.25rem;
}

.account-form p {
  margin: 2rem 0 0;
  padding: 0;
}

.account-form label {
  display: block;
  font-weight: normal;
}

.account-form input {
  background: var(--input-background);
  border: solid 1px var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  display: block;
  font-size: inherit;
  margin-top: 0.25rem;
  padding: 0.5rem;
  width: 100%;
}

.account-form input::placeholder {
  color: var(--input-placeholder);
}

.account-form ul {
  padding-left: 0.25rem;
}

.account-form ul li {
  color: var(--urgent);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.account-form button:not(.btn) {
  background: var(--link);
  border: solid 1px var(--link);
  border-radius: var(--radius-sm);
  color: var(--background-subnav);
  font-size: 1em;
  margin-top: 2.5rem;
  padding: 0.5rem 0.75rem;
}

input {
  filter: none;
}

input:focus {
  outline: none;
}

.login-bottom {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.login-bottom-right {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.reset-confirm {
  margin-top: 2rem;
}

.reset-complete {
  text-align: center;
}

.spam-folder {
  color: var(--urgent);
  font-weight: 600;
}

.auth-buttons {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.auth-buttons.justify-between {
  justify-content: space-between;
}

/* The eye button that shows the password. The field keeps the form's
   input styling; the button sits inside its right edge. */
.password-field {
  display: block;
  position: relative;
}

.password-field input {
  padding-right: 2.75rem;
}

/* Outranks .account-form button:not(.btn) above, which would otherwise
   give this the submit button's fill and top margin. */
.account-form .password-field button.password-toggle {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
}

.account-form .password-field button.password-toggle:hover,
.account-form .password-field button.password-toggle:focus-visible {
  color: var(--link);
}