/**
 * Вход в консоль. Словарь тот же, что у рабочего стола: блок с левой
 * кромкой, поля `.fld`, кнопка `.btn--primary`. Свой файл, а не `/console.css`:
 * стили стола закрыты сменой, а форма обязана открыться без неё.
 */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.45 var(--font-text); -webkit-font-smoothing: antialiased;
       display: flex; align-items: center; justify-content: center; }

main { padding: 18px 20px; width: 100%; max-width: 28rem; }

.block { border-left: 3px solid var(--desk-line); padding: 0 0 0 14px; }
.block--primary { border-left-color: var(--brand-red); }
.block > h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--eyebrow-size);
              letter-spacing: var(--eyebrow-track); text-transform: uppercase;
              color: var(--desk-mut); margin: 0 0 10px; }

.row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.row > * { flex: 1; }
.row .auto { flex: 0 0 auto; width: auto; }
.row--fields { align-items: flex-end; flex-wrap: wrap; }

.fld { display: flex; flex-direction: column; gap: 4px; min-width: 180px; flex: 1; }
.fld__capline { display: flex; align-items: baseline; gap: 6px; min-height: 16px; }
.fld__cap { font-size: 12px; line-height: 16px; font-weight: 600;
            text-transform: uppercase; letter-spacing: .04em; color: var(--desk-mut); }
.fld input { border-left-width: 3px; }
.fld:focus-within .fld__cap { color: var(--desk-text); }

input { font: inherit; min-height: 40px; padding: 8px 11px; background: var(--desk-bg);
        border: 1px solid var(--desk-line-strong); color: var(--desk-text); width: 100%; }
.btn { font: inherit; min-height: 40px; padding: 9px 16px; cursor: pointer;
       background: var(--desk-surface); border: 1px solid var(--desk-line-strong);
       color: var(--desk-text); white-space: nowrap; transition: background var(--t-fast); }
.btn:hover:not(:disabled) { background: var(--desk-surface-2); }
.btn--primary { background: var(--brand-red); border-color: var(--brand-red); color: #fff; font-weight: 700; }
.btn--primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--brand-red); }

.statusbar { margin: 0 0 12px; padding: 10px 12px; font-weight: 600;
             border: 1px solid transparent; }
.statusbar:empty { display: none; }
.statusbar[data-kind='error'] { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }