/* ===== авторизация ===== */

html:has(body.login-page),
body.login-page{
  width:100%;
  height:100%;
  margin:0;

  overflow:hidden;
  overscroll-behavior:none;

  background:var(--bg);
}

.auth-gate{
  position:fixed;
  inset:0;
  z-index:200;

  display:grid;
  place-items:center;

  padding:
    calc(24px + env(safe-area-inset-top))
    20px
    calc(24px + env(safe-area-inset-bottom));

  overflow:hidden;

  background:var(--bg);
}

.auth-card{
  position:fixed;

  left:50%;
  top:35%;

  width:min(
    calc(100% - 40px),
    390px
  );

  padding:28px 24px 24px;

  border:1px solid var(--line);
  border-radius:24px;

  background:var(--surf);
  box-shadow:var(--shadow);

  transform:
    translate3d(
      -50%,
      -50%,
      0
    );

  transition:none;

  animation:
    auth-card-in
    .34s
    cubic-bezier(.22,.72,.22,1)
    both;

  will-change:auto;
}

@keyframes auth-card-in{
  from{
    opacity:0;

    transform:
      translate3d(
        -50%,
        calc(-50% + 10px),
        0
      )
      scale(.985);
  }

  to{
    opacity:1;

    transform:
      translate3d(
        -50%,
        -50%,
        0
      )
      scale(1);
  }
}

.auth-brand{
  color:var(--gold);

  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.auth-title{
  margin:
    10px
    0
    0;

  color:var(--ink);

  font-size:28px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.5px;
}

.auth-subtitle{
  margin-top:7px;

  color:var(--ink2);

  font-size:14px;
  line-height:1.4;
}

.auth-form{
  margin-top:24px;

  display:grid;
  gap:14px;
}

.auth-field{
  display:grid;
  gap:7px;

  color:var(--ink2);

  font-size:12px;
  font-weight:500;

  pointer-events:none;
}

.auth-field input{
  pointer-events:auto;

  --auth-input-bg:
    color-mix(
      in srgb,
      var(--surf) 95.5%,
      var(--ink) 4.5%
    );

  width:100%;
  height:48px;

  padding:0 14px;

  border:1px solid var(--line2);
  border-radius:14px;
  outline:0;

  background:var(--auth-input-bg);
  color:var(--ink);

  direction:ltr;
  text-align:left;

  font-size:16px;
  line-height:1;

  appearance:none;
  -webkit-appearance:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

body.login-page.auth-focus-enabled
.auth-field input:focus{
  border-color:var(--gold-line);

  box-shadow:
    0 0 0 3px
    var(--gold-soft);
}

body.login-page:not(.auth-focus-enabled)
.auth-field input{
  caret-color:transparent;
}

.auth-field input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);

  -webkit-box-shadow:
    0 0 0 1000px
    var(--auth-input-bg)
    inset;

  box-shadow:
    0 0 0 1000px
    var(--auth-input-bg)
    inset;

  transition:
    background-color
    9999s
    ease-out
    0s;
}

body.login-page.auth-focus-enabled
.auth-field input:-webkit-autofill:focus{
  -webkit-box-shadow:
    0 0 0 1000px
    var(--auth-input-bg)
    inset,
    0 0 0 3px
    var(--gold-soft);

  box-shadow:
    0 0 0 1000px
    var(--auth-input-bg)
    inset,
    0 0 0 3px
    var(--gold-soft);
}

.auth-error{
  color:var(--rust);

  font-size:12px;
  line-height:1.4;
}

.auth-submit{
  width:100%;
  height:48px;

  margin-top:2px;

  border:1px solid var(--gold-line);
  border-radius:14px;
  outline:0;

  background:var(--gold-soft);
  color:var(--gold);

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  transition:
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease,
    box-shadow .18s ease;
}

.auth-submit:active:not([aria-disabled="true"]):not(.press-cancelled){
  box-shadow:
    inset 0 0 0 999px
    var(--gold-soft);
}

.auth-submit:focus-visible{
  box-shadow:
    0 0 0 3px
    var(--gold-soft);
}

.auth-submit[aria-disabled="true"]{
  color:var(--gold-d);
  pointer-events:none;
  box-shadow:none;
}

body.auth-signing-out{
  pointer-events:none;
}

body.auth-signing-out::after{
  content:"";

  position:fixed;
  inset:0;
  z-index:10000;

  background:var(--bg);

  opacity:0;

  animation:
    auth-page-out
    .24s
    ease
    forwards;
}

@media (display-mode:standalone){
  body.auth-signing-out::after{
    background:
      radial-gradient(
        130% 55% at 50% -10%,
        var(--glow) 0%,
        var(--glow0) 60%
      ),
      var(--bg);
  }
}

@keyframes auth-page-out{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@media (prefers-reduced-motion:reduce){
  body.login-page .auth-card{
    animation:none;
  }

  body.auth-signing-out::after{
    animation:none;
    opacity:1;
  }
}