/* Экран входа и согласия — на токенах тренажёра (индиго + шафран). */
#auth{height:100%}
.auth{overflow-y:auto;gap:14px;padding-block:24px calc(24px + env(safe-area-inset-bottom,0px))}
.auth > :first-child{margin-top:auto} .auth > :last-child{margin-bottom:auto}   /* по центру, но без обрезки сверху на низких экранах */
.auth > .auth-foot{margin:auto 0 0;padding-top:28px}   /* политика и правила — внизу экрана, а не под кнопкой */
.auth-hero{gap:14px;padding:22px 20px 20px}
.auth-hero .brand{font-size:38px}
/* плитки собирают фразу (auth-demo.js): в одну строку, шрифт уменьшается под длинную фразу через --tf */
.auth-demo{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-height:46px}
.auth-demo .t{flex:none;font-size:var(--tf,19px);line-height:1.25;border-radius:.63em;padding:.37em .68em;white-space:nowrap;
  background:var(--on-brand-line);font-weight:600;color:var(--on-brand);transition:rotate .38s ease,background-color .25s,border-color .25s,color .25s}
.auth-demo.bad .t{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad)}
.auth-demo.ok .t{border-color:var(--good-line);background:var(--good-soft);color:var(--good)}
.ok-mark{flex:none;display:block;width:1.7em;height:1.7em;font-size:var(--tf,19px);margin-left:2px}
.ok-mark svg{display:block;width:100%;height:100%}
.ok-mark circle{fill:var(--good-line)}
.ok-mark path{fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;animation:okDraw .4s .15s ease-out backwards}
@keyframes okDraw{from{stroke-dashoffset:20}}
@media (prefers-reduced-motion: reduce){ .ok-mark path{animation:none} .auth-demo .t{transition:none} }
.auth-ru{margin:0;min-height:1.3em;font-family:var(--f-book);font-size:17px;color:var(--on-brand-2)}

.auth-card{padding:18px 16px 16px;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.fld input{width:100%;font:500 17px var(--f-ui);padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--sheet);color:var(--ink)}
.fld input:focus{border-color:var(--pen);outline:none}
.pw{position:relative;display:block}
.pw input{padding-right:52px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--ink-3);display:grid;place-items:center}
.pw-eye svg{width:22px;height:22px}
.pw-eye[aria-pressed="true"]{color:var(--pen)}
.auth-err{margin:0;color:var(--bad);font-size:14px;font-weight:600}
.auth-foot{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:13px}
.auth-foot a,.consent a{color:var(--pen)}
.btn:disabled{opacity:.45;cursor:default}

.consent{padding:20px 18px 14px;gap:12px}
.consent h2{margin:0;font-size:21px;line-height:1.25}
.consent p{margin:0}
.who{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.who legend{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:0;margin-bottom:8px}
.radio{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer}
.radio:has(input:checked){border-color:var(--pen);background:var(--pen-soft)}
.radio input,.check input{accent-color:var(--pen);width:20px;height:20px;margin:1px 0 0;flex:none}
.radio b{display:block;font-weight:600}
.radio small{display:block;color:var(--ink-2);font-size:13px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.auth-out{align-self:center}

/* для тренажёра на сервере */
a.chip{color:inherit;text-decoration:none}
.foot{gap:18px;flex-wrap:wrap}
a.linkbtn{text-decoration:none}
.sf-net{position:fixed;z-index:40;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);
  background:var(--ink);color:var(--paper);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:var(--shadow);text-align:center}

/* направление A (25.10): вход без карточек — название, собирающаяся фраза (решение 23.10 и 25.10, вариант А), поля с контуром 3:1, «Войти» на всю ширину */
.auth{gap:16px}
.auth-hero{background:none;border:0;border-radius:0;padding:0 0 8px;gap:12px}
.auth-hero .brand{font-size:36px;line-height:42px;color:var(--ink)}
.auth-demo .t{background:var(--tile-bg);border:1.5px solid var(--tile-line);box-shadow:0 2px 0 var(--tile-line);border-radius:10px;color:var(--ink);font-weight:800}
.auth-demo.bad .t{border-color:var(--bad-line);box-shadow:0 2px 0 var(--bad-line);background:var(--tile-bg);color:var(--bad)}
.auth-demo.ok .t{border-color:var(--good-line);box-shadow:0 2px 0 var(--good-line);background:var(--good-soft);color:var(--good)}
.auth-ru{font:400 16px/24px var(--f-read);color:var(--ink-2)}
.auth-card{background:none;border:0;border-radius:0;padding:0;gap:16px}
.fld{font:700 14px/20px var(--f-ui);color:var(--ink-2)}
.fld input{height:52px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--sheet);font:600 17px var(--f-ui);color:var(--ink)}
.fld input:focus{border-color:var(--pen);box-shadow:0 0 0 1px var(--pen)}
.pw-eye{width:44px;height:44px;right:4px}
.auth .btn.wide{min-height:52px;margin-top:4px}
.auth-foot{gap:8px 20px;font:600 14px/20px var(--f-ui)}
.auth-foot a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:700px){ .auth{max-width:440px} }
.consent{border-radius:16px;padding:20px 16px 16px;gap:12px}
.consent h2{font:800 22px/28px var(--f-ui)}
.consent p{font:400 16px/24px var(--f-read)}
.consent .muted{font:var(--t-cap)}
.who legend{font:var(--t-label);font-weight:800;text-transform:none;color:var(--ink-2)}
.radio{border:1.5px solid var(--line-strong);border-radius:12px;min-height:56px}
.radio:has(input:checked){border:2px solid var(--pen);background:var(--pen-soft)}
.radio b{font-weight:800}
.radio small{font:400 14px/20px var(--f-read)}
.check{font:var(--t-body)}