/* Yandex Passport / Яндекс ID (pwl-yandex) — visual match for awareness drill.
   Fonts and color tokens mirror passport.yandex.ru; background bundled locally. */

@font-face {
  font-family: 'YS Text';
  src: url('https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff2') format('woff2'),
       url('https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'YS Text';
  src: url('https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff2') format('woff2'),
       url('https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --id-color-text-primary: #262633;
  --id-color-text-secondary: #85889e;
  --id-color-text-tertiary: #b3b8cc;
  --id-color-brand-bg-base: #292933;
  --id-color-brand-bg-hovered: #1b1b26;
  --id-color-brand-bg-pressed: #0a0a19;
  --id-color-brand-border: #292933;
  --id-color-brand-text-on: #fff;
  --id-color-default-bg-base: rgba(180, 184, 204, 0.14);
  --id-color-default-bg-hovered: rgba(180, 184, 204, 0.2);
  --id-color-default-bg-pressed: rgba(180, 184, 204, 0.26);
  --id-color-default-border: rgba(180, 184, 204, 0.26);
  --id-color-surface-elevated-0: #fff;
  --id-color-surface-submerged: #f0f1f5;
  --id-color-link-normal: #37948c;
  --id-color-link-normal-hovered: #2c6b69;
  --id-logo-yandex-color: var(--id-color-text-primary);
  --id-logo-brand-color: var(--id-color-text-primary);
  --pwl-layout-padding: 2rem;
  --pwl-section-margin: 2rem;
  --pwl-content-margin: 1rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font: normal 400 18px/22px 'YS Text', 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'liga', 'kern', 'pnum', 'lnum';
  color: var(--id-color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.fixed-height { position: relative; }

#app { height: 100%; }

/* Background photo + darken overlay (passp-bg_8) */
.passp-bg {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  inset: 0;
  z-index: -1;
}
.passp-bg:before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.passp-bg_8 {
  background-image: url('/static/assets/passp-bg-8.jpg');
}

/* Layout shell */
.auth-layout-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.auth-layout-wrapper.with-footer {
  flex-direction: column;
  min-height: 100%;
  position: relative;
}
.auth-layout-wrapper.with-footer:not(.is-mobile) .auth-layout-container {
  margin: 75px 0;
}
.auth-layout-container { display: contents; position: relative; }

.auth-layout {
  background: var(--id-color-surface-elevated-0);
  border-radius: 2.75rem;
  display: grid;
  grid-template-rows: minmax(36%, auto) 1fr;
  justify-content: center;
  min-height: 600px;
  max-height: 600px;
  min-width: 300px;
  width: 376px;
  padding: var(--pwl-layout-padding);
  padding-bottom: 2rem;
  position: relative;
}

.flex .auth-layout {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  max-height: 600px;
}

.layout-up { box-sizing: border-box; min-height: 100px; }
.layout-down,
.layout-up {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  align-items: stretch;
  justify-content: space-between;
}

/* Header + logo */
.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--pwl-section-margin);
  position: relative;
}
.auth-header-logo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.5rem;
}
.auth-logo {
  --id-logo-height: 24px;
  --id-logo-width: 127px;
  height: var(--id-logo-height);
  width: var(--id-logo-width);
}
.header-info-container {
  position: absolute;
  right: 0;
  top: 0;
  min-height: 2.5rem;
}

/* Titles (SplitAddUser) */
.description-block.SplitAddUser-title { margin-bottom: 1.5rem; }
.page-header-text { margin-bottom: 0.375rem; text-align: left; }
.page-header-text h1 {
  margin: 0;
  font: normal 500 32px/34px 'YS Text', Arial, sans-serif;
  letter-spacing: -0.01em;
}
.page-main-description {
  margin-bottom: 0;
  text-align: left;
}
.page-main-description p {
  margin: 0;
  font: normal 400 16px/20px 'YS Text', Arial, sans-serif;
}

.text-primary { color: var(--id-color-text-primary); }

/* Field stack */
.field-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.body-auth { width: 100%; }

/* Outlined text field (pwl-yandex) */
.text-field { display: inline-flex; flex-direction: column; gap: 8px; width: 100%; }
.text-field-box {
  display: block;
  height: 56px;
  padding: 0 20px;
  border-radius: 20px;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--id-color-default-border);
  transition: background-color 0.1s ease-in-out, box-shadow 0.15s ease-in-out;
  position: relative;
}
.text-field-box:hover { background: var(--id-color-default-bg-hovered); }
.text-field-box:focus-within {
  background: var(--id-color-surface-elevated-0);
  box-shadow: inset 0 0 0 2px var(--id-color-brand-border);
}
.text-field-label {
  position: absolute;
  left: 20px;
  top: 17px;
  transform: translateY(0);
  transform-origin: left top;
  color: var(--id-color-text-secondary);
  font: normal 400 16px/22px 'YS Text', Arial, sans-serif;
  pointer-events: none;
  transition: transform 0.15s ease-in-out;
}
.text-field-input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--id-color-text-primary);
  font: normal 400 18px/22px 'YS Text', Arial, sans-serif;
  height: 56px;
  padding: 22px 0 0;
  caret-color: var(--id-color-text-primary);
}
.text-field-box:focus-within .text-field-label,
.text-field-input:not(:placeholder-shown) + .text-field-label {
  transform: translateY(-7px) scale(0.875);
}
.text-field-input::placeholder { color: transparent; }

.full-width { width: 100%; }

/* Account chip (password step) */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  max-width: 100%;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: var(--id-color-default-bg-base);
  font: normal 400 16px/20px 'YS Text', Arial, sans-serif;
  margin-bottom: 8px;
}
.account-chip-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffce6b, #ff9e6b);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 15px;
  flex: 0 0 auto;
}
.account-chip-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 56px;
  min-width: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  font: normal 500 16px/20px 'YS Text', Arial, sans-serif;
  font-feature-settings: 'pnum' on, 'lnum' on;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.34, 0.8, 0.34, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn-action {
  background: var(--id-color-brand-bg-base);
  color: var(--id-color-brand-text-on);
}
.btn-action:hover { background: var(--id-color-brand-bg-hovered); }
.btn-action:active { background: var(--id-color-brand-bg-pressed); }
.btn-outline {
  background: transparent;
  color: var(--id-color-text-primary);
  box-shadow: inset 0 0 0 2px var(--id-color-default-border);
}
.btn-outline:hover { background: var(--id-color-default-bg-hovered); }
.btn-outline:active { background: var(--id-color-default-bg-pressed); }
.btn-webauthn { margin: 1rem 0 0.5rem; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.full-width-button { width: 100%; }

/* Footer controls */
.auth-footer { margin-top: 8px; }
.footer-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.auth-footer-links { text-align: center; padding-top: 8px; }
.text-link {
  color: var(--id-color-link-normal);
  text-decoration: none;
  font: normal 400 16px/20px 'YS Text', Arial, sans-serif;
}
.text-link:hover {
  color: var(--id-color-link-normal-hovered);
  text-decoration: underline;
}

/* Promo below card */
.AuthPromo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 15px 0;
  z-index: 1;
}
.AuthPromo-text {
  font: normal 400 16px/20px 'YS Text', Arial, sans-serif;
  text-align: center;
  color: #fff;
}
.AuthPromo-link {
  font: normal 500 16px/20px 'YS Text', Arial, sans-serif;
  color: #fff;
  text-decoration: none;
}
.AuthPromo-link:hover { text-decoration: underline; }

/* Debrief page — centered like login cards */
.debrief-wrapper {
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  min-height: 100%;
  box-sizing: border-box;
}
.debrief-wrapper .auth-layout-container {
  margin: 75px 0;
  display: block;
  width: 100%;
  max-width: 560px;
}

.flex .auth-layout.debrief-layout {
  max-height: none;
  min-height: 0;
  height: auto;
  width: 100%;
  max-width: 560px;
  display: block;
  overflow: visible;
  grid-template-rows: none;
}

.debrief-layout .layout-up {
  min-height: 0;
}

.debrief-layout .auth-header {
  margin-bottom: 1.25rem;
}

.debrief-layout .layout-down {
  flex: none;
  height: auto;
}

.debrief-body {
  padding-top: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.debrief-banner {
  background: #fff5f2;
  border: 1px solid #ffded9;
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font: normal 400 15px/21px 'YS Text', Arial, sans-serif;
  color: var(--id-color-text-primary);
}
.debrief-banner strong { display: block; margin-bottom: 6px; font-weight: 500; }
.debrief-title {
  margin: 0 0 10px;
  font: normal 500 22px/26px 'YS Text', Arial, sans-serif;
}
.debrief-subtitle {
  margin: 18px 0 8px;
  font: normal 500 17px/21px 'YS Text', Arial, sans-serif;
}
.debrief-text {
  margin: 0 0 10px;
  font: normal 400 15px/21px 'YS Text', Arial, sans-serif;
  color: var(--id-color-text-primary);
}
.debrief-list {
  margin: 0;
  padding-left: 18px;
  font: normal 400 15px/21px 'YS Text', Arial, sans-serif;
}
.debrief-list li { margin-bottom: 5px; }
.debrief-list li:last-child { margin-bottom: 0; }

/* Mobile: full-screen card like passport.yandex.ru */
@media only screen and (max-width: 451px) {
  body { background: var(--id-color-surface-elevated-0); min-height: 100vh; }
  body.fixed-height { height: auto; }

  .auth-layout-wrapper {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .auth-layout-wrapper.with-footer:not(.is-mobile) .auth-layout-container {
    margin: 0;
  }

  .auth-layout {
    width: 100%;
    max-height: none;
    min-height: 300px;
    border-radius: 0;
    padding-top: calc(2rem + env(safe-area-inset-top));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .flex .auth-layout:not(.debrief-layout) {
    max-height: 100%;
    width: 100%;
  }

  .flex .auth-layout.debrief-layout {
    max-height: none;
    overflow-y: visible;
  }

  .debrief-wrapper {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
  }

  .debrief-wrapper .auth-layout-container {
    margin: 0;
  }

  .AuthPromo {
    position: relative;
    top: auto;
    padding: 50px 0 30px;
    color: var(--id-color-text-primary);
  }
  .AuthPromo-text,
  .AuthPromo-link {
    color: var(--id-color-text-primary);
  }

  .passp-bg { display: none; }
}

@media only screen and (max-width: 360px) {
  :root {
    --pwl-layout-padding: 1rem;
    --pwl-section-margin: 1.5rem;
  }
}