/* Экран входа. Единственное место в продукте, где есть анимация: дальше
   работа, и мельтешение в ней мешает.

   Порядок такой. Бордовая шторка закрывает экран слева направо, на ней
   проступает знак, держится около секунды, шторка уходит вправо и открывает
   уже готовый экран. Ничего не дорисовывается после её ухода: форма стоит на
   месте с самого начала и не анимируется.

   Раскладка — две половины: слева сцена, справа форма. Ниже 900px сцена
   убирается целиком: на узком экране она отобрала бы место у формы, ради
   которой сюда и пришли. */
html,body{height:100%}
body{overflow:hidden}
.login{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);background:var(--paper)}
@media (max-width:900px){.login{grid-template-columns:minmax(0,1fr)}.stage{display:none}}

/* ── левая половина: сцена ──
   Сцена и подпись разведены по разным блокам flex-колонки, а не наложены:
   при абсолютной подписи прочерк «не смог проверить» на некоторых пропорциях
   окна ложился прямо на текст. */
.stage{position:relative;overflow:hidden;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column}
.art{position:relative;flex:1;min-height:0;overflow:hidden}
.art svg{position:absolute;inset:0;width:100%;height:100%}
.rule-line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.rule-line.acc{stroke:var(--accent-line)}
.mark-line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.mark-fill{fill:var(--accent)}
.tick{fill:none;stroke-width:2.4;stroke-linecap:square;vector-effect:non-scaling-stroke}
.tick.ok{stroke:var(--ok)}
.tick.bad{stroke:var(--bad)}
.tick.nd{stroke:var(--nd)}
.wordmark{position:relative;flex:0 0 auto;padding:0 56px 52px;max-width:520px}
.wordmark h1{font-size:34px;letter-spacing:-.03em;line-height:1.05}
.wordmark p{font-size:13.5px;color:var(--ink-2);margin-top:10px;max-width:44ch}
.wordmark .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}

/* ── шторка и знак: два слоя, а не один ──
   Знак вынесен из шторки намеренно. Внутри неё `scaleX` сжал бы его вместе с
   фоном, и на середине закрытия логотип превратился бы в вертикальную
   полоску. Оба слоя — поверх всей страницы, а не внутри половин: шторка
   закрывает экран целиком, включая форму. */
.curtain{position:fixed;inset:0;background:var(--accent);transform-origin:100% 50%;z-index:50;pointer-events:none}
.curtain::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--on-accent);opacity:.5}
.splash{position:fixed;inset:0;z-index:51;display:grid;place-items:center;pointer-events:none;opacity:0}
.cmark{display:flex;align-items:center;gap:18px;color:var(--on-accent)}
.cmark svg{width:52px;height:70px;fill:none;stroke:var(--on-accent);stroke-width:2.4;flex:0 0 auto}
.cmark .ct{line-height:1.15}
.cmark .ct b{display:block;font-size:34px;font-weight:600;letter-spacing:-.03em}
.cmark .ct i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-top:6px}

/* ── правая половина: форма ── */
.pane{display:flex;flex-direction:column;justify-content:center;padding:48px 56px;min-width:0;position:relative}
@media (max-width:520px){.pane{padding:32px 22px}}
.pane .top{display:flex;align-items:center;gap:10px;position:absolute;top:26px;left:56px;right:56px}
.pane .top .mark{width:22px;height:22px;border:1.5px solid var(--accent);border-radius:3px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--accent)}
.pane .top b{font-size:15px;letter-spacing:-.02em}
.form{max-width:340px;width:100%}
.form h2{font-size:21px;margin-bottom:5px}
.form .sub{font-size:13px;color:var(--ink-2);margin-bottom:24px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form .alt{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3)}
/* Ошибка входа — под полями, там же, где на неё смотрят. */
.form .err{margin-top:10px}
.foot{position:absolute;bottom:26px;left:56px;right:56px;display:flex;gap:14px;align-items:center;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
@media (max-width:520px){.pane .top,.foot{left:22px;right:22px}}