/* ═══════════════════════════════════════════════════════════════════════════
   Вход и личный кабинет. Поверх общей системы — только то, чего в ней нет.

   Форма входа — самое узкое место всей воронки: разница между десятью полями
   и тремя измеряется втрое. Поэтому здесь три правила соблюдаются буквально:
   подпись у поля видна всегда, ширина поля намекает на длину содержимого,
   а ошибка называет причину и что сделать, а не код.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── лист: узкая колонка по центру ──
   Форма на 1440px, прижатая к левому краю, выглядит как обломок страницы.
   Вход — единственная задача экрана, значит он и стоит в середине. */
.desk{display:flex;justify-content:center}
.sheet{width:100%;max-width:432px;padding:var(--s16) 0 var(--s20)}
.sheet h1{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0 0 var(--s2)}
.sheet .lede{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 var(--s8);max-width:none}
.sheet .fine{margin:var(--s3) 0 0}
.sheet form{margin:0}

/* Аккаунт шире входа: там таблицы и разделы, а не одна форма. */
.desk--wide{display:block}
.desk--wide .sheet{max-width:var(--container);padding-top:var(--s10)}

/* ── поля ── */
.field input,.field select,.field textarea{max-width:none}
.field .hint{color:var(--ink-3)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:420px){.pair{grid-template-columns:1fr}}
.pair .field{margin-bottom:var(--s4);max-width:none}
.field{max-width:none}

/* Поле с приставкой @: рамка одна на всю связку, иначе @ висит отдельной
   деталью и читается как ошибка вёрстки. */
.prefix{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:var(--r);
        background:var(--bg);overflow:hidden}
.prefix:hover{border-color:var(--ink-4)}
.prefix:focus-within{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);border-color:var(--accent)}
.prefix > span{display:flex;align-items:center;padding:0 0 0 var(--s3);
               font-size:16px;color:var(--ink-4);user-select:none}
.prefix input{border:0!important;border-radius:0;background:none;padding-left:2px}
.prefix input:focus-visible{box-shadow:none}
.prefix input:hover{border-color:transparent}

/* ── кнопки-ссылки ──
   Действие второго ряда — не кнопка с рамкой и не голая ссылка браузера.
   Без этого правила «Забыли пароль?» отрисовывался серой системной кнопкой. */
.linkish{font-family:var(--font);font-size:14px;font-weight:600;color:var(--accent);
         background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.linkish:hover{color:var(--accent-ink);text-decoration:underline}
.linkish.quiet{font-weight:500;color:var(--ink-3)}
.linkish.quiet:hover{color:var(--ink)}
.linkish:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent);border-radius:var(--r-sm)}

.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--soft);border-color:var(--ink-4);color:var(--ink)}

/* ── сообщение ──
   Ошибка обязана назвать причину и следующий шаг; цвет — второй признак,
   не единственный. */
.note{font-size:13.5px;line-height:1.5;padding:var(--s3) var(--s4);border-radius:var(--r);
      border-left:2px solid var(--line-2);background:var(--soft);color:var(--ink-2);
      margin:var(--s3) 0;max-width:none}
.note.bad{border-left-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.note.ok{border-left-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.note[hidden]{display:none}

/* ── вход через чужие службы ── */
.brokers{margin:var(--s6) 0 0;padding-top:var(--s5);border-top:1px solid var(--line)}
.brokers .cap{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
              color:var(--ink-4);margin-bottom:var(--s3);text-align:center}
.brokers .row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.brokers .row > *{flex:1 1 120px}

/* ── аккаунт ── */
.deskhead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin:0 0 var(--s6)}
.deskhead .ava,.avatar-edit .ava{width:56px;height:56px;border-radius:50%;object-fit:cover;
                                 background:var(--sunken);flex:0 0 auto}
.deskhead h1{margin:0;font-size:26px}
.deskhead .sub{font-size:13.5px;color:var(--ink-3)}
.tabs{display:flex;flex-wrap:wrap;gap:var(--s4);border-bottom:1px solid var(--line);
      margin:0 0 var(--s8)}
.tab{font-family:var(--font);font-size:14px;font-weight:500;color:var(--ink-2);
     background:none;border:0;padding:var(--s2) 0;cursor:pointer;text-decoration:none}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"],.tab.is-on{color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--accent)}
.panel[hidden]{display:none}
.panel{max-width:var(--reading)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s5) 0 0}
.avatar-edit{display:flex;align-items:center;gap:var(--s4);margin:0 0 var(--s5)}
.avatar-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.saved{font-size:13px;color:var(--ok);font-weight:600}
.rows-plain{list-style:none;margin:0;padding:0;max-width:none}
.rows-plain li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);
               padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:14px}
.rows-plain .who{font-weight:600}
.rows-plain .when{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:auto}
.tagrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0}
.at{color:var(--ink-4)}
.right{margin-left:auto}

/* ── подвал служебных страниц ── */
#foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
      gap:var(--s2) var(--s4);padding:var(--s8) var(--s6);font-size:13px;
      color:rgba(255,255,255,.7)}
#foot a{color:rgba(255,255,255,.8);text-decoration:none}
#foot a:hover{color:#fff;text-decoration:underline}

@media (max-width:640px){
  .sheet{padding-top:var(--s10)}
  .desk{padding-left:var(--s4);padding-right:var(--s4)}
}

/* ── переключаемые метки (рабочие языки) ──
   Кнопки в .tagrow идут без класса — оформление держится на потомке.
   Без этого правила браузер рисует их системными серыми кнопками. */
.tagrow button{font-family:var(--font);font-size:13px;font-weight:500;height:30px;
  padding:0 var(--s3);border-radius:var(--r);cursor:pointer;white-space:nowrap;
  color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);
  transition:background .12s var(--ease),color .12s var(--ease)}
.tagrow button:hover{border-color:var(--ink-4);color:var(--ink);background:var(--soft)}
.tagrow button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-ink);font-weight:600}
.tagrow button.more{border-style:dashed;color:var(--ink-3)}
.tagrow button[hidden]{display:none}

/* Заглушка аватара: буква по центру круга, а не в его верхнем углу. */
.ava.blank{display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:600;color:var(--ink-4);background:var(--sunken);
  line-height:1;user-select:none}