/* Sign-in, first password and service connection («Чертёжный лист», DESIGN.md):
   one sheet laid on the desk, with the notes gathered in a ruled strip at its foot. */
[hidden]{display:none!important}
.login-body{min-height:100dvh;margin:0;background:var(--sunken);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5}
.login-shell{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:48px 20px}
.login-brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:24px;font-weight:600;font-stretch:var(--narrow);line-height:1}
.login-brand .brand-mark{width:24px;height:24px;min-width:24px}
.login-brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
.login-card{width:min(440px,100%);background:var(--bg);border:1px solid var(--line);border-top:2px solid var(--text-2);border-radius:4px;padding:30px 32px 32px}
.login-card .eyebrow{display:block;color:var(--text-3);font-size:13px}
.login-card h1{font-size:26px;font-weight:600;font-stretch:var(--narrow);line-height:1.2;margin:6px 0 10px;white-space:normal;max-width:none;overflow:visible;overflow-wrap:anywhere;color:var(--text)}
.login-lead{font-size:14px;line-height:1.6;color:var(--text-2);margin:0 0 6px;overflow-wrap:anywhere}
.login-card form{display:flex;flex-direction:column}
.login-card label{font-size:13px;font-weight:500;color:var(--text-2);margin:16px 0 6px}
.login-card input[type=text],.login-card input[type=password]{font:inherit;font-size:15px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-field);border-radius:4px;background:var(--sunken);color:var(--text)}
/* The login is shown, not typed: it lies on the card. The id outweighs design.css's shared field rule. */
.login-card #setup-login[readonly]{color:var(--text-2);background:var(--surface);border-color:var(--line)}
/* «Показать пароль» is the one control for this; Edge's own eye would duplicate it. */
.login-card input[type=password]::-ms-reveal{display:none}
.login-card .login-check{display:flex;align-items:center;gap:9px;font-weight:400;font-size:13px;color:var(--text-2);margin:14px 0 0;cursor:pointer}
.login-check input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
/* Messages are slips: a frame in the state's line colour and a square before the words. */
.login-error{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--text)}
.login-error:empty{margin:0}
.login-error:not(:empty),.login-note,.login-invalid p[role=alert]{position:relative;padding:9px 14px 9px 31px;border:1px solid var(--danger-line);border-radius:4px;background:var(--surface);color:var(--text);font-size:13px;line-height:1.5}
.login-error:not(:empty):before,.login-note:before,.login-invalid p[role=alert]:before{content:'';position:absolute;left:14px;top:15px;width:7px;height:7px;background:var(--danger)}
.login-note{border-color:var(--warn-line);margin:12px 0 4px}
.login-note:before{background:var(--warn)}
.login-primary{display:flex;align-items:center;justify-content:center;min-height:42px;margin-top:22px;border:0;border-radius:4px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:15px;font-weight:600;padding:0 16px}
.login-primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 90%,var(--shadow))}
.login-primary:focus-visible{outline:2px solid var(--text);outline-offset:2px}
/* The title block of the sheet: a ruled strip along its bottom edge. */
.login-hint{margin:26px -32px -32px;padding:12px 32px 13px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--text-2)}
.login-rules{margin:10px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--text-3)}
.login-rules li+li{margin-top:2px}
.login-length{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-2);margin:8px 0 0}
.login-length:before{content:'';width:7px;height:7px;flex-shrink:0;background:var(--warn)}
.login-length.ok:before{background:var(--ok)}
.login-invalid{font-size:14px;line-height:1.6;color:var(--text-2)}
.login-invalid p{margin:12px 0}
.login-secondary{display:inline-block;margin-top:2px;color:var(--accent-text);font-size:14px}
.login-card>a{color:var(--accent-text);font-size:14px}
.login-loading{font-size:14px;color:var(--text-3);margin:0}
.login-foot{max-width:440px;margin:0;text-align:center;font-size:13px;line-height:1.6;color:var(--text-3)}
@media(max-width:480px){
  .login-shell{justify-content:flex-start;gap:18px;padding:28px 14px}
  .login-brand{font-size:22px}
  .login-card{padding:24px 20px 24px}
  .login-card h1{font-size:23px}
  .login-card input[type=text],.login-card input[type=password]{font-size:16px}
  .login-hint{margin:22px -20px -24px;padding:12px 20px}
}