/* ============================================================================
   login.css — экран входа «След Йети · Стройка».

   Дизайн-система и палитра — 1:1 с sled-yeti/wash (docs брендбука «След
   Йети», см. память reference_sled_yeti_brand.md): четыре фирменных тона,
   бренд-мотив (три силуэта, canon §7.0), нулевая анимация после загрузки,
   волосяная рамка вместо карточки с тенью.

   Страница автономна: не наследует общий design-system.css, поэтому
   @font-face и все переменные объявлены здесь же.
   ========================================================================== */

@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: normal; font-display: swap; src: url('/stroy/assets/brand/sled-yeti/fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('/stroy/assets/brand/sled-yeti/fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('/stroy/assets/brand/sled-yeti/fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: normal; font-display: swap; src: url('/stroy/assets/brand/sled-yeti/fonts/montserrat-800.woff2') format('woff2'); }

/* ── Четвёрка брендбука. Пятого тона нет: всё ниже — их смеси. ─────────── */
:root{
  --yeti-cold:#88B9C9; --yeti-dark:#2A3237;
  --yeti-warm:#E65D08; --yeti-light:#E2EFF9;
  --h1-sm:23px;
  --r:3px;

  --cold:var(--yeti-cold); --ink:var(--yeti-dark); --warm:var(--yeti-warm); --light:var(--yeti-light);

  --sky-hi:color-mix(in srgb, var(--yeti-cold) 3%, #fff);
  --sky-lo:color-mix(in srgb, var(--yeti-cold) 14%, #fff);
  --paper:color-mix(in srgb, var(--yeti-cold) 4%, #fff);
  --i1:var(--yeti-dark); --i2:color-mix(in srgb, var(--yeti-dark) 78%, var(--paper)); --i3:color-mix(in srgb, var(--yeti-dark) 72%, var(--paper));
  --line:color-mix(in srgb, var(--yeti-dark) 12%, var(--paper)); --line2:color-mix(in srgb, var(--yeti-dark) 22%, var(--paper));
  --field:#fff;
  --rim:var(--yeti-warm);
  --warm-ink:color-mix(in srgb, var(--yeti-dark) 14%, var(--yeti-warm));

  --m-light:var(--light); --m-cold:var(--cold); --m-ink:var(--ink);

  --glow:color-mix(in srgb, var(--warm) 22%, transparent);
}
[data-t=night]{
    --sky-hi:color-mix(in srgb, var(--yeti-dark) 72%, #000);
    --sky-lo:color-mix(in srgb, var(--yeti-cold) 14%, var(--yeti-dark));
    --paper:color-mix(in srgb, var(--yeti-dark) 86%, #000);
    --i1:color-mix(in srgb, var(--yeti-cold) 18%, #fff); --i2:color-mix(in srgb, var(--yeti-dark) 31%, var(--i1)); --i3:color-mix(in srgb, var(--yeti-dark) 16%, var(--i2));
    --line:color-mix(in srgb, var(--yeti-light) 24%, #000); --line2:color-mix(in srgb, var(--yeti-light) 35%, #000);
    --field:color-mix(in srgb, var(--yeti-cold) 3%, var(--paper));
    --rim:var(--yeti-warm);
    --warm-ink:var(--warm);
    --m-light:color-mix(in srgb, var(--i2) 33%, var(--field)); --m-cold:color-mix(in srgb, var(--yeti-cold) 18%, var(--sky-hi)); --m-ink:color-mix(in srgb, var(--yeti-dark) 55%, #000);
    --glow:color-mix(in srgb, var(--warm) 34%, transparent);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:500 15px/1.5 Montserrat,system-ui,sans-serif;
  color:var(--i1);
  background:linear-gradient(180deg, var(--sky-hi) 0%, var(--sky-lo) 100%);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;
  min-height:100vh;
  overflow-x:hidden;
}

.dawn{position:fixed;left:50%;bottom:23vh;width:230vw;height:56vh;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(52% 100% at 68% 100%,
    var(--glow) 0%, color-mix(in srgb, var(--glow) 52%, transparent) 34%,
    transparent 72%);
  animation:dawnUp .25s ease-out both}
@keyframes dawnUp{from{opacity:0;transform:translateX(-50%) translateY(14px)}
  to{opacity:1;transform:translateX(-50%)}}

.scene{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.range{position:absolute;left:50%;transform:translateX(-50%);width:min(104%,210vh);bottom:-12vh}
.range svg{width:100%;height:auto;display:block}
.m-light{fill:var(--m-light)}
.m-cold{fill:var(--m-cold)}
.m-ink{fill:var(--m-ink)}
.range{animation:rise .24s ease-out both}
@keyframes rise{from{opacity:0;transform:translateX(-50%) translateY(20px)}
  to{opacity:1;transform:translateX(-50%)}}

.wrap{position:relative;z-index:2;min-height:100vh;display:flex;
  align-items:center;justify-content:center;padding:40px 24px}
.panel{width:100%;max-width:388px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:34px 32px 30px;
  animation:panelUp .24s 140ms ease-out both}
@keyframes panelUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.lock{display:flex;align-items:center;gap:13px;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.lock svg{height:20px;width:auto;display:block;color:var(--i1);flex:0 0 auto}
.lock .sp{flex:1}
.tg{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line2);border-radius:var(--r);background:none;
  color:var(--i2);cursor:pointer;transition:color .13s ease,border-color .13s ease}
.tg:hover{color:var(--i1);border-color:var(--i3)}
.tg svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.tg svg[hidden]{display:none}
.lock span{position:relative;padding-left:14px;font:600 10px/1 Montserrat;
  letter-spacing:.15em;text-transform:uppercase;color:var(--i3);white-space:nowrap}
.lock span::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:14px;background:var(--line2)}

h1{font:800 26px/1.15 Montserrat;letter-spacing:-.014em;color:var(--i1)}
.lead{margin-top:9px;font:500 13.5px/1.5 Montserrat;color:var(--i2)}

form{margin-top:24px}
label{display:block;font:800 9.5px Montserrat;letter-spacing:.17em;text-transform:uppercase;
  color:var(--i3);margin-bottom:8px}
.field{display:flex;align-items:stretch;border:1px solid var(--line2);
  border-radius:var(--r);background:var(--field);overflow:hidden}
.field:focus-within{border-color:var(--warm-ink);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--warm) 18%, transparent)}
input[type=password],input[type=text]{flex:1;min-width:0;height:46px;
  padding:0 14px;border:0;background:none;font:500 15px Montserrat;color:var(--i1);
  letter-spacing:.02em}
input:focus{outline:none}
input::placeholder{color:var(--i3)}
.rv{flex:0 0 auto;min-width:88px;height:46px;padding:0 14px;border:0;
  border-left:1px solid var(--line2);background:none;cursor:pointer;
  font:700 12px Montserrat;letter-spacing:.01em;color:var(--i2)}
.rv:hover{color:var(--i1)}

/* Зона нажатия строки — по высоте самой строки, а не чекбокса: клик по подписи
   переключает его же. Замер браузерным аудитом дал 320×15 — ширина есть, а
   высоты нет, и попасть пальцем в 15px невозможно. 26px — минимум WCAG 2.5.8
   для мыши (24px) с запасом; на тач-ширинах ниже поднято до 44px. */
.remember{display:flex;align-items:center;gap:8px;margin-top:14px;min-height:26px;
  font:600 12px Montserrat;color:var(--i2);cursor:pointer;user-select:none}
.remember input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer;flex:0 0 auto}

.go{margin-top:18px;width:100%;height:48px;border:0;border-radius:var(--r);
  background:var(--ink);color:var(--light);cursor:pointer;
  font:700 14px Montserrat;letter-spacing:.02em;
  transition:background-color .13s ease}
.go:hover{background:color-mix(in srgb, var(--ink) 86%, var(--cold))}
[data-t=night] .go{background:var(--light);color:var(--ink)}
[data-t=night] .go:hover{background:color-mix(in srgb, var(--light) 88%, var(--cold))}

.err{margin-top:18px;padding:1px 0 1px 13px;border-left:3px solid var(--warm-ink);
  font:600 12.5px/1.45 Montserrat;color:var(--i1)}

.slogan{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font:500 11.5px/1.5 Montserrat;color:var(--i3)}

:focus-visible{outline:2px solid var(--warm-ink);outline-offset:2px}

@media (max-width:600px){
  .wrap{align-items:flex-start;padding:34px 18px 42vh}
  .panel{max-width:none;padding:26px 20px 24px}
  h1{font-size:var(--h1-sm)}
  .lock{margin-bottom:22px;padding-bottom:18px}
  .tg{width:44px;height:44px}
  input[type=password],input[type=text],.rv{height:50px}
  .remember{min-height:44px}
  .go{height:52px}
  .range{width:min(150%,210vh);bottom:-8vh}
  .dawn{bottom:18vh;height:40vh;width:320vw}
}
@media (max-height:620px) and (min-width:601px){
  .wrap{align-items:flex-start;padding-top:28px}
}

@media (max-width:400px){
  .panel{padding:22px 16px 22px}
  .rv{min-width:76px;padding:0 11px}
  .lock{gap:9px}
  .lock svg{height:17px}
  .lock span:not(.sp){padding-left:11px;font-size:9px;letter-spacing:.10em}
}

@media (prefers-reduced-motion:reduce){
  .dawn,.range,.panel{animation:none}
  *{transition:none!important}
}