/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-auth, mk-auth__
 */
/* Component: mk_auth */
.mk-auth {
  min-height: calc(100vh - var(--mk-bar-height));
  padding: clamp(42px, 6vw, 76px) clamp(18px, 4vw, 48px);
  background:
    linear-gradient(135deg, rgb(var(--mk-dark-deep-rgb) / .04), transparent 34%),
    var(--mk-color-bg-public);
  overflow-x: clip;
}

.mk-auth,
.mk-auth * {
  box-sizing: border-box;
  min-width: 0;
}

.mk-auth__grid {
  min-height: calc(100vh - 216px);
  width: min(var(--mk-public-width), 100%);
  max-width: 100%;
  margin-inline: auto;
}

.mk-auth__copy {
  width: 100%;
  max-width: 760px;
}

.mk-auth__title {
  margin: 0 0 var(--mk-space-8);
  color: var(--mk-color-text);
  font-size: clamp(46px, 5vw, 72px);
  line-height: .98;
  font-weight: 740;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.mk-auth__lead {
  max-width: 650px;
  margin: 0;
  color: var(--mk-color-muted);
  font-size: var(--mk-font-size-md);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.mk-auth__list {
  display: grid;
  gap: var(--mk-space-2);
  margin: var(--mk-space-10) 0 0;
  padding: 0;
  list-style: none;
}

.mk-auth__list-item {
  position: relative;
  padding-left: 26px;
  color: var(--mk-color-text);
  line-height: 1.45;
}

.mk-auth__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mk-color-accent);
  box-shadow: 0 0 0 5px rgb(var(--mk-accent-rgb) / .10);
}

.mk-auth__mini {
  width: min(520px, 100%);
  max-width: 100%;
  margin-top: var(--mk-space-12);
  padding: var(--mk-space-7);
  border: 1px solid rgb(var(--mk-accent-rgb) / .18);
  border-radius: var(--mk-card-radius);
  background: var(--mk-color-dark-deep);
  color: var(--mk-color-light);
  box-shadow: var(--mk-shadow-dark-window);
}

.mk-auth__mini-bar {
  display: flex;
  gap: 7px;
  margin-bottom: var(--mk-space-7);
}

.mk-auth__mini-bar::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--mk-light-rgb) / .28);
  box-shadow:
    16px 0 0 rgb(var(--mk-light-rgb) / .28),
    32px 0 0 rgb(var(--mk-light-rgb) / .28);
}

.mk-auth__mini-title,
.mk-auth__mini-code {
  display: block;
}

.mk-auth__mini-title {
  margin-bottom: var(--mk-space-1);
  font-size: var(--mk-font-size-sm);
}

.mk-auth__mini-code {
  color: rgb(var(--mk-light-rgb) / .68);
  white-space: normal;
  overflow-wrap: anywhere;
}

.mk-auth__form-head {
  display: grid;
  gap: var(--mk-space-1);
  margin-bottom: var(--mk-space-2);
  max-width: 100%;
}

.mk-auth__form-title {
  margin: 0;
  color: var(--mk-color-text);
  font-size: var(--mk-font-size-md);
  line-height: 1.08;
  font-weight: 740;
}

.mk-auth__form-text,
.mk-auth__switch {
  color: var(--mk-color-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mk-auth__form-text {
  margin: 0;
}

.mk-auth__switch {
  margin: var(--mk-space-6) 0 0;
  text-align: center;
  font-size: var(--mk-font-size-sm);
}

.mk-auth__switch-link {
  color: var(--mk-color-text);
  font-weight: 700;
  text-decoration: none;
}

.mk-auth__switch-link:hover,
.mk-auth__switch-link:focus {
  color: var(--mk-color-accent);
}

@media (max-width: 991.98px) {
  .mk-auth__grid {
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  .mk-auth {
    min-height: auto;
    padding: var(--mk-space-9) var(--mk-space-6) var(--mk-space-14);
  }

  .mk-auth__title {
    font-size: var(--mk-font-size-md);
  }

  .mk-auth__lead {
    font-size: var(--mk-font-size-base);
  }
}