/* СОБРАНО scripts/redesign/build-doors-css.mjs — руками не править. Двери сайта без @layer, под .nm-door (план сайта С17).
   Источники: design/css/naminori-ui.css (подмножество), src/components/doors/doors.css. */

.nm-door {
  font-family: var(--nm-font-ui);
  font-size: var(--nm-type-body-size);
  font-weight: var(--nm-weight-regular);
  line-height: var(--nm-leading-ui);
  letter-spacing: var(--nm-tracking);
  color: var(--nm-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

:where(.nm-door), :where(.nm-door) *, :where(.nm-door) *::before, :where(.nm-door) *::after {
  box-sizing: border-box;
}
:where(.nm-door) :where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

:where(.nm-door) :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

:where(.nm-door) :where(a) {
  color: inherit;
  text-decoration: none;
}
:where(.nm-door) [hidden] {
  display: none !important;
}

.nm-door .nm-title-screen {
  margin: 0;
  font: var(--nm-type-title-screen);
  color: var(--nm-text-1);
}

.nm-door .nm-title-sub {
  margin: 0;
  font: var(--nm-type-title-sub);
  color: var(--nm-text-1);
}
.nm-door .nm-caps {
  margin: 0;
  font: var(--nm-type-caption-caps);
  letter-spacing: var(--nm-type-caption-caps-tracking);
  text-transform: uppercase;
  color: var(--nm-text-3);
}
.nm-door .nm-body-l {
  margin: 0;
  font: var(--nm-type-body-l);
}

.nm-door .nm-body {
  margin: 0;
  font: var(--nm-type-body);
}

.nm-door .nm-body-s {
  margin: 0;
  font: var(--nm-type-body-s);
}

.nm-door .nm-label {
  margin: 0;
  font: var(--nm-type-label);
}

.nm-door .nm-caption {
  margin: 0;
  font: var(--nm-type-caption);
  color: var(--nm-text-3);
}
.nm-door .nm-w-400 {
  font-weight: var(--nm-weight-regular);
}

.nm-door .nm-w-500 {
  font-weight: var(--nm-weight-medium);
}

.nm-door .nm-w-600 {
  font-weight: var(--nm-weight-semibold);
}

.nm-door .nm-w-700 {
  font-weight: var(--nm-weight-bold);
}

.nm-door .nm-w-800 {
  font-weight: var(--nm-weight-extrabold);
}
.nm-door {
  --nm-hairline: 1px;
}

/* compat-ok: Safari до 16 — запасной -webkit-min-device-pixel-ratio в том же @media (заявка ХФ №2) */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .nm-door {
    --nm-hairline: 0.6667px;
  }
}

/* compat-ok: Safari до 16 — запасной -webkit-min-device-pixel-ratio в том же @media (заявка ХФ №2) */
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  .nm-door {
    --nm-hairline: 0.5px;
  }
}

/* compat-ok: Safari до 16 — запасной -webkit-min-device-pixel-ratio в том же @media (заявка ХФ №2) */
@media (min-resolution: 3dppx), (-webkit-min-device-pixel-ratio: 3) {
  .nm-door {
    --nm-hairline: 0.3334px;
  }
}

/* compat-ok: Safari до 16 — запасной -webkit-min-device-pixel-ratio в том же @media (заявка ХФ №2) */
@media (min-resolution: 4dppx), (-webkit-min-device-pixel-ratio: 4) {
  .nm-door {
    --nm-hairline: 0.25px;
  }
}
.nm-door .nm-icon {
  flex: none;
  display: inline-block;
  width: var(--nm-icon-w, var(--nm-icon-size, 24px));
  height: var(--nm-icon-h, var(--nm-icon-size, 24px));
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: max(var(--nm-icon-stroke, calc(var(--nm-icon-size, 24px) / 12)), var(--nm-hairline));
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.nm-door .nm-icon--inline {
  --nm-icon-size: 1em;
  --nm-icon-stroke: 0.09em;
  margin-inline: calc(-1 * var(--nm-space-2));
  vertical-align: -0.16em;
}
.nm-door .nm-hit {
  position: relative;
}

.nm-door .nm-hit::after,
.nm-door .nm-btn--icon::after,
.nm-door .nm-field__clear::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--nm-hit-size, var(--nm-size-touch-min)));
  height: max(100%, var(--nm-hit-size, var(--nm-size-touch-min)));
  transform: translate(-50%, -50%);
}
.nm-door .nm-btn--sm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: max(100%, var(--nm-hit-size, var(--nm-size-touch-min)));
  transform: translateY(-50%);
}
.nm-door .nm-btn {
  --nm-btn-h: var(--nm-button-height);
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--nm-button-gap);
  height: var(--nm-btn-h);
  padding: 0 var(--nm-button-pad-x);
  border: var(--nm-stroke-outline) solid transparent;
  border-radius: var(--nm-radius-button);
  font: var(--nm-type-button);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  transition:
    background-color var(--nm-motion-press-duration) ease-out,
    border-color var(--nm-motion-press-duration) ease-out,
    color var(--nm-motion-press-duration) ease-out,
    transform var(--nm-motion-press-duration) ease-out;
}

.nm-door .nm-btn:active {
  transform: scale(var(--nm-button-press-scale));
}

.nm-door .nm-btn:focus-visible {
  outline: var(--nm-space-2) solid var(--nm-text-1);
  outline-offset: var(--nm-space-2);
}

.nm-door .nm-btn--lg {
  --nm-btn-h: var(--nm-size-button-primary-height);
}
.nm-door .nm-btn--sm {
  --nm-btn-h: var(--nm-button-sm-height);
  gap: var(--nm-button-sm-gap);
  height: auto;
  min-height: var(--nm-btn-h);
  padding: var(--nm-button-sm-pad-top) var(--nm-button-sm-pad-x) var(--nm-button-sm-pad-bottom);
  font: var(--nm-type-body-s);
  font-weight: var(--nm-weight-medium);
  line-height: 1.14286;
  white-space: normal;
}

.nm-door .nm-btn--sm > .nm-icon {
  margin-top: var(--nm-space-2);
}
.nm-door .nm-btn--md {
  --nm-btn-h: var(--nm-button-md-height);
  gap: var(--nm-button-md-gap);
  min-width: 0;
  font-size: var(--nm-fs-15);
  line-height: var(--nm-button-md-line);
}

.nm-door .nm-btn--block {
  display: flex;
  width: 100%;
}
.nm-door .nm-btn__sep {
  flex: none;
  width: var(--nm-space-6);
  height: var(--nm-space-6);
  margin-inline: var(--nm-space-2);
  border-radius: var(--nm-radius-full);
  background: currentColor;
  font-size: 0;
  opacity: 0.55;
}

.nm-door .nm-btn__note {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--nm-weight-regular);
  text-overflow: ellipsis;
}
.nm-door .nm-btn__tail {
  display: inline-flex;
  align-items: center;
  gap: var(--nm-space-10);
  min-width: 0;
  max-width: 100%;
}

.nm-door .nm-btn.nm-btn--tail {
  flex-wrap: wrap;
  row-gap: 0;
  height: auto;
  min-height: var(--nm-btn-h);
  padding-block: var(--nm-space-8);
}

@supports selector(:has(a)) {
  .nm-door .nm-btn:has(> .nm-btn__tail) {
    flex-wrap: wrap;
    row-gap: 0;
    height: auto;
    min-height: var(--nm-btn-h);
    padding-block: var(--nm-space-8);
  }
}
.nm-door .nm-btn--stack {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  column-gap: var(--nm-space-10);
  row-gap: 0;
}

.nm-door .nm-btn--stack > .nm-icon {
  grid-area: 1 / 1;
}

.nm-door .nm-btn__label {
  grid-area: 1 / 2;
}

.nm-door .nm-btn__sub {
  grid-area: 2 / 2;
  font-size: var(--nm-type-caption-size);
  font-weight: var(--nm-card-weight-400);
  line-height: var(--nm-type-caption-line);
  font-variant-numeric: tabular-nums;
}

.nm-door .nm-btn--trail > .nm-icon {
  grid-area: 1 / 2;
}

.nm-door .nm-btn--trail > .nm-btn__label {
  grid-area: 1 / 1;
}

.nm-door .nm-btn--trail > .nm-btn__sub {
  grid-area: 2 / 1;
}

.nm-door .nm-btn--stack[data-sub] {
  height: auto;
  min-height: var(--nm-btn-h);
  padding-block: var(--nm-space-2);
}
.nm-door .nm-btn--primary {
  background: var(--nm-accent);
  color: var(--nm-text-on-accent);
}

.nm-door .nm-btn--primary:active {
  background: var(--nm-accent-pressed);
}
.nm-door .nm-btn--secondary {
  background: var(--nm-surface-control);
  color: var(--nm-text-def);
  --nm-icon-size: var(--nm-button-glyph-secondary);
}

.nm-door .nm-btn--secondary:active {
  background: var(--nm-surface-off);
}
.nm-door .nm-btn--tone,
.nm-door .nm-btn--tone-success,
.nm-door .nm-btn--tone-danger {
  font-weight: var(--nm-weight-medium);
  --nm-icon-size: var(--nm-button-glyph-tone);
}

.nm-door .nm-btn--tone {
  border-color: var(--nm-accent-line);
  background: var(--nm-accent-weak);
  color: var(--nm-accent);
}

.nm-door .nm-btn--tone:active {
  background: var(--nm-accent-tone);
}

.nm-door .nm-btn--tone-success {
  border-color: var(--nm-success-line);
  background: var(--nm-success-weak);
  color: var(--nm-success);
}

.nm-door .nm-btn--tone-success:active {
  background: var(--nm-success-tone);
}

.nm-door .nm-btn--tone-danger {
  border-color: var(--nm-danger-line);
  background: var(--nm-danger-weak);
  color: var(--nm-danger);
}

.nm-door .nm-btn--tone-danger:active {
  background: var(--nm-danger-tone);
}
.nm-door .nm-btn--danger {
  background: var(--nm-surface-control);
  color: var(--nm-danger);
}

.nm-door .nm-btn--danger:active {
  background: var(--nm-surface-off);
}

.nm-door .nm-btn--ghost,
.nm-door .nm-btn--ghost:active {
  background: transparent;
}

.nm-door .nm-btn--ghost {
  font: var(--nm-type-body-s);
  font-weight: var(--nm-weight-medium);
}

.nm-door .nm-btn--ghost:not(.nm-btn--danger) {
  color: var(--nm-text-2);
}

.nm-door .nm-btn--ghost:active {
  opacity: 0.6;
}
.nm-door .nm-btn--icon {
  --nm-btn-size: var(--nm-size-button-round);
  --nm-icon-size: var(--nm-button-round-glyph);
  width: var(--nm-btn-size);
  height: var(--nm-btn-size);
  padding: 0;
  border: 0;
  border-radius: var(--nm-radius-full);
  background: var(--nm-surface-control);
  color: var(--nm-text-2);
}

.nm-door .nm-btn--icon:active {
  background: var(--nm-surface-off);
  transform: scale(var(--nm-button-round-press-scale));
}

.nm-door .nm-btn--header {
  --nm-btn-size: var(--nm-size-button-round-header);
}
.nm-door .nm-btn--topbar {
  --nm-btn-size: var(--nm-button-round-topbar-size);
  --nm-icon-size: var(--nm-button-round-topbar-glyph);
}

.nm-door .nm-btn--topbar > .nm-icon {
  margin-bottom: var(--nm-space-2);
}
.nm-door .nm-btn--sm {
  --nm-icon-size: var(--nm-button-sm-glyph);
}

.nm-door .nm-btn--md {
  --nm-icon-size: var(--nm-button-md-glyph);
}

.nm-door .nm-btn--md.nm-btn--secondary {
  color: var(--nm-text-1);
}
.nm-door .nm-btn--on-art,
.nm-door .nm-btn--on-art:active {
  background: var(--nm-glass-on-art);
  color: var(--nm-on-art-text);
}
.nm-door .nm-btn--on-media,
.nm-door .nm-btn--on-media:active {
  background: var(--nm-scrim-media);
  color: var(--nm-on-media-def);
}
@media (hover: hover) and (pointer: fine) {
  .nm-door .nm-btn--primary:hover:not(:active) {
    background: var(--nm-accent-hover);
  }

  .nm-door .nm-btn--secondary:hover:not(:active),
  .nm-door .nm-btn--icon:hover:not(:active, .nm-btn--on-art, .nm-btn--on-media) {
    background: var(--nm-surface-media);
  }
  .nm-door .nm-btn--danger:hover:not(:active) {
    background: var(--nm-danger-weak);
  }

  .nm-door .nm-btn--tone:hover:not(:active) {
    border-color: var(--nm-accent);
  }

  .nm-door .nm-btn--tone-success:hover:not(:active) {
    border-color: var(--nm-success);
  }

  .nm-door .nm-btn--tone-danger:hover:not(:active) {
    border-color: var(--nm-danger);
  }

  .nm-door .nm-btn--ghost:hover:not(:active) {
    background: transparent;
    opacity: 0.8;
  }
}
.nm-door .nm-btn:is(:disabled, [aria-disabled="true"]) {
  cursor: default;
  pointer-events: none;
  transform: none;
}

.nm-door .nm-btn--secondary:is(:disabled, [aria-disabled="true"]), .nm-door .nm-btn--icon:is(:disabled, [aria-disabled="true"]) {
  color: var(--nm-text-3);
}
.nm-door .nm-btn--primary:is(:disabled, [aria-disabled="true"]) {
  opacity: 0.4;
}

.nm-door .nm-btn--tone:is(:disabled, [aria-disabled="true"]), .nm-door .nm-btn--tone-success:is(:disabled, [aria-disabled="true"]), .nm-door .nm-btn--tone-danger:is(:disabled, [aria-disabled="true"]), .nm-door .nm-btn--danger:is(:disabled, [aria-disabled="true"]) {
  border-color: transparent;
  background: var(--nm-surface-control);
  color: var(--nm-text-4);
}

.nm-door .nm-btn--ghost:is(:disabled, [aria-disabled="true"]) {
  background: transparent;
  color: var(--nm-text-4);
}
.nm-door .nm-field {
  display: flex;
  align-items: center;
  gap: var(--nm-input-gap);
  height: var(--nm-input-height);
  padding: 0 calc(var(--nm-input-pad-x) - var(--nm-stroke-outline));
  border: var(--nm-stroke-outline) solid var(--nm-line-strong);
  border-radius: var(--nm-input-radius);
  background: var(--nm-surface-control);
  color: var(--nm-text-3);
  cursor: text;
  transition: border-color var(--nm-motion-press-duration) ease-out;
  --nm-icon-size: var(--nm-input-glyph);
}

.nm-door .nm-field:focus-within {
  border-color: var(--nm-accent);
}

.nm-door .nm-field--plain {
  border-color: transparent;
}

.nm-door .nm-field--sm {
  position: relative;
  isolation: isolate;
  height: var(--nm-input-sm-height);
  padding: 0 var(--nm-space-12);
}
.nm-door .nm-field--sm::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: 100%;
  height: max(100%, var(--nm-hit-size, var(--nm-size-touch-min)));
  transform: translateY(-50%);
}

.nm-door .nm-field__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nm-text-1);
  font: var(--nm-type-input);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.nm-door .nm-field__input::placeholder {
  color: var(--nm-text-3);
  opacity: 1;
}

.nm-door .nm-field__input::-webkit-search-cancel-button {
  display: none;
}

@supports selector(:has(a)) {
  .nm-door .nm-field:has(.nm-field__input:disabled) {
    cursor: default;
  }
}

.nm-door .nm-field__input:disabled {
  color: var(--nm-text-4);
}

.nm-door .nm-field__input:disabled::placeholder {
  color: var(--nm-text-4);
}
.nm-door .nm-field__clear {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--nm-radius-full);
  background: transparent;
  color: var(--nm-text-3);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.nm-door .nm-field__input:placeholder-shown ~ .nm-field__clear,
.nm-door .nm-field__input:disabled ~ .nm-field__clear {
  display: none;
}

.nm-door .nm-field__clear:active {
  color: var(--nm-text-2);
}

.nm-door .nm-field__clear:focus-visible {
  outline: var(--nm-space-2) solid var(--nm-text-1);
  outline-offset: var(--nm-space-2);
}

@media (hover: hover) and (pointer: fine) {
  .nm-door .nm-field__clear:hover {
    color: var(--nm-text-2);
  }
}
.nm-door .nm-field--answer .nm-field__input {
  font-size: var(--nm-type-jp-sentence-size);
  font-weight: var(--nm-card-weight-400);
  text-align: center;
}

.nm-door .nm-field[data-state="correct"] {
  border-color: var(--nm-success);
}

.nm-door .nm-field[data-state="wrong"] {
  border-color: var(--nm-danger);
}
.nm-door .nm-field-label {
  display: block;
  margin-bottom: var(--nm-input-label-gap);
  color: var(--nm-text-3);
  font: var(--nm-type-caption);
}

.nm-door .nm-field + .nm-field-label {
  margin-top: var(--nm-space-12);
}
.nm-door .nm-card {
  padding: 0 var(--nm-card-padding);
  border-radius: var(--nm-radius-card-group);
  background: var(--nm-surface-card);
}

.nm-door .nm-card--pad {
  padding: var(--nm-card-padding);
}
:where(.nm-door) ruby {
  /*
    compat-ok: Chrome до 128 и Safari до 18.2 свойства не знают. Чтение короче
    слова там держит по центру text-align у rt (ниже). Слово короче чтения
    (交流 こうりゅう) там раздвинуто по ширине чтения: основу старый движок
    выравнивает по ширине всегда, css этого не меняет.
  */
  ruby-align: center;
  -webkit-ruby-position: before;
  ruby-position: over;
}

:where(.nm-door) rt {
  text-align: center;
  font-size: 50%;
  font-weight: var(--nm-weight-regular);
  line-height: 1;
  letter-spacing: 0;
  -webkit-user-select: none;
  user-select: none;
}
.nm-door .nm-link {
  color: var(--nm-accent);
  font-weight: var(--nm-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@keyframes nm-skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

@keyframes nm-skeleton {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.45;
  }
}
.nm-door .nm-field--area {
  align-items: flex-start;
  height: auto;
  min-height: var(--nm-input-height);
  padding-block: 13px;
}

.nm-door .nm-field--area > textarea {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 96px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nm-text-1);
  font: var(--nm-type-input);
  line-height: 24px;
  resize: none;
  outline: none;
}

.nm-door .nm-field--area > textarea:lang(ja) {
  font-family: var(--nm-font-jp);
}

.nm-door .nm-field--area > textarea::placeholder {
  color: var(--nm-text-3);
}
.nm-door .nm-field__prefix {
  flex: none;
  color: var(--nm-text-3);
  font-size: var(--nm-fs-15);
}

.nm-door .nm-field__prefix + .nm-field__input {
  margin-left: calc(-1 * var(--nm-space-6));
}
.nm-door .nm-field[data-state="almost"] {
  border-color: var(--nm-warning);
}

.nm-door .nm-field[data-state="error"] {
  border-color: var(--nm-danger);
}
.nm-door .nm-btn__dot {
  position: absolute;
  top: var(--nm-button-dot-inset);
  right: var(--nm-button-dot-inset);
  width: var(--nm-button-dot-size);
  height: var(--nm-button-dot-size);
  border-radius: var(--nm-radius-full);
  background: var(--nm-accent);
  box-shadow: 0 0 0 var(--nm-space-2) var(--nm-surface-control);
}
.nm-door .nm-c-1 {
  color: var(--nm-text-1);
}

.nm-door .nm-c-2 {
  color: var(--nm-text-2);
}

.nm-door .nm-c-3 {
  color: var(--nm-text-3);
}

.nm-door .nm-c-4 {
  color: var(--nm-text-4);
}

.nm-door .nm-c-accent {
  color: var(--nm-accent);
}

.nm-door .nm-c-success {
  color: var(--nm-success);
}

.nm-door .nm-c-warning {
  color: var(--nm-warning);
}

.nm-door .nm-c-danger {
  color: var(--nm-danger);
}

@media (prefers-reduced-motion: reduce) {

  .nm-door .nm-btn,
  .nm-door .nm-btn:active,
  .nm-door .nm-btn--icon:active {
    transform: none;
  }
}

/* ── своя раскладка дверей ── */

/*
  Корень: страница без каркаса. На телефоне колонка начинается сверху — знак на 32 от верха окна (как на «Входе»
  телефона от строки состояния: у браузера её место — строка адреса), кнопки под пальцем, а не посреди пустоты;
  шире 600 — по центру окна. Высота окна — vh: dvh у Chrome 108+.
  Фон — подложка art.backing во всё окно, без полей и скругления, как экран телефона над артом (.nm-art-host
  .nm-screen эскиза): у палитр с артом она полупрозрачна над Фудзи и сакурой, у остальных — сплошной bg. Лист Р8
  globals.css дверь не трогает (его поля 16 и радиус 24 давали прокрутку 32 и знак на 48 — находка S16-1).
*/
.nm-door {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 100vh;
  padding: var(--nm-space-32) var(--nm-space-16);
  background: var(--nm-art-backing);
}

@media (min-width: 600px) {
  .nm-door {
    justify-content: center;
  }
}

/* Колонка шириной экрана телефона (412): знак, заголовок и карточка — как на «Входе» телефона. */
.nm-door .sk-door {
  width: 100%;
  max-width: 412px;
}

/* Знак сверху: 48 и «Naminori» 22 / 700 (межстрочный — корня, 1.172), зазор 12, до заголовка 20 (s2-hero-mark). */
.nm-door .sk-door__mark {
  display: flex;
  align-items: center;
  gap: var(--nm-space-12);
  width: max-content;
  margin-bottom: var(--nm-space-20);
  color: var(--nm-text-1);
}

.nm-door .sk-door__logo {
  flex: none;
  width: 48px;
  height: 48px;
}

.nm-door .sk-door__name {
  font-size: var(--nm-fs-22);
  font-weight: var(--nm-weight-bold);
}

.nm-door .sk-door__title {
  overflow-wrap: anywhere;
}

/* Пояснение под заголовком: 15 / 21 text.3 (s2-wz-text); выделенное — text.1. */
.nm-door .sk-door__text {
  margin: var(--nm-space-10) 0 0;
  color: var(--nm-text-3);
  font: var(--nm-type-body);
  line-height: 21px;
}

.nm-door .sk-door__text b,
.nm-door .sk-door__note b {
  color: var(--nm-text-1);
  font-weight: var(--nm-weight-semibold);
}

/* Карточка с полями (s2-manual): 16 под пояснением, поля 14, кнопка через 14 от последнего поля. */
.nm-door .sk-door__card {
  display: flex;
  flex-direction: column;
  margin-top: var(--nm-space-16);
}

.nm-door .sk-door__card > .nm-btn {
  margin-top: var(--nm-space-14);
}

/* «Отмена» под основной кнопкой — по центру, как «Войти по токену вручную…» телефона. */
.nm-door .sk-door__card > .nm-btn--ghost {
  align-self: center;
  margin-top: var(--nm-space-4);
}

/* Код очков: крупно, по центру, разрядкой — его переписывают с дисплея. */
.nm-door .sk-door__code {
  font-size: var(--nm-fs-24);
  font-weight: var(--nm-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

/* Действия под пояснением или карточкой: столбцом, основное — первым. */
.nm-door .sk-door__actions {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-8);
  margin-top: var(--nm-space-24);
}

/* Строка сообщения (s2-login-msg): ожидание — text.3, ошибка — danger, успех — success. */
.nm-door .sk-door__msg {
  margin: var(--nm-space-12) 0 0;
  color: var(--nm-text-3);
  font: var(--nm-type-body-s);
  line-height: 20px;
}

.nm-door .sk-door__msg[data-tone="bad"] {
  color: var(--nm-danger);
}

/* Плашка-сведение (s2-note--card): причина сорвавшегося входа через Google. */
.nm-door .sk-door__alert {
  margin: var(--nm-space-16) 0 0;
  padding: var(--nm-space-12) var(--nm-card-padding);
  border-radius: var(--nm-radius-card-group);
  background: var(--nm-surface-card);
  color: var(--nm-danger);
  font: var(--nm-type-body-s);
  line-height: 20px;
}

/* «Готово»: значок 20 и строка цветом успеха, 17 / 600. */
.nm-door .sk-door__done {
  display: flex;
  align-items: center;
  gap: var(--nm-space-8);
  margin: var(--nm-space-24) 0 0;
  color: var(--nm-success);
  font: var(--nm-type-body);
  font-size: var(--nm-fs-17);
  font-weight: var(--nm-weight-semibold);
}

/* Мелкий текст внизу: ссылки «Зарегистрироваться», «Не тот аккаунт?», «Это не я». */
.nm-door .sk-door__note {
  margin: var(--nm-space-16) 0 0;
  color: var(--nm-text-3);
  font: var(--nm-type-body-s);
  line-height: 20px;
}

.nm-door .sk-door__note--center {
  text-align: center;
}

/* Кнопка-ссылка в строке («Выйти и войти в другой»): вид .nm-link; поля и подложку кнопки снимает сброс фундамента. */
.nm-door .sk-door__link-btn {
  display: inline;
  text-align: inherit;
}

/* Фокус ссылок и кнопок-ссылок: фундамент даёт его только .nm-btn и полям. */
.nm-door a:focus-visible,
.nm-door .sk-door__link-btn:focus-visible {
  border-radius: var(--nm-space-4);
  outline: var(--nm-space-2) solid var(--nm-text-1);
  outline-offset: var(--nm-space-2);
}