/* Живые страницы: то, что нужно работающему продукту сверх общего языка.
   Ничего нового в язык не добавлено — состояния и строки сняты с согласованных
   экранов (62 «Пустые состояния и ошибки», 61 «Вход»), здесь они собраны в одном
   месте, потому что нужны сразу нескольким страницам. */

/* спрятанное спрятано даже там, где у элемента свой display */
[hidden]{display:none!important}

/* ——— состояние: что произошло, что это значит, что делать (экран 62) ——— */
.state-line{display:grid;grid-template-columns:8px minmax(0,1fr);gap:3px 12px}
.state-line > *{grid-column:2}
.state-line i{grid-column:1;grid-row:1;width:8px;height:8px;margin-top:8px}
.state-line[data-sev="attention"] i{background:var(--attention)}
.state-line[data-sev="note"] i{background:var(--amber)}
.state-line[data-sev="quiet"] i{background:var(--dim)}
.state-line .sev{font:700 14px/1.2 var(--text)}
.state-line[data-sev="attention"] .sev{color:var(--attention)}
.state-line[data-sev="note"] .sev{color:var(--amber)}
.state-line[data-sev="quiet"] .sev{color:var(--dim)}
.state-line h3{font:600 17px/1.3 var(--text);color:var(--ink);margin-top:2px}
.state-line p{font:400 14.5px/1.45 var(--text);color:var(--ink-2);margin-top:6px;max-width:66ch}
.state-line .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ——— пустой экран: не извиняется, а показывает первый шаг (экран 62) ——— */
.empty{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--gap);align-items:start;
  padding:22px 0 8px}
.empty h3{font:700 21px/1.25 var(--text);letter-spacing:-.015em;color:var(--ink)}
.empty p{font:400 15px/1.5 var(--text);color:var(--ink-2);margin-top:8px;max-width:64ch}
.empty p.why{color:var(--ink-3);font-size:14.5px;line-height:1.45;margin-top:6px}
.empty .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.empty .side{text-align:right;font:500 14px/1.35 var(--text);color:var(--dim);white-space:nowrap}

/* ——— полосы ожидания, пока идут первые находки (экран 62) ——— */
.skel{display:block;height:14px;
  background:linear-gradient(90deg,var(--line) 0%,var(--line-2) 50%,var(--line) 100%);
  background-size:200% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-rows{display:grid;gap:10px;max-width:520px;margin-top:16px}
.skel-rows .a{width:38%}.skel-rows .b{width:64%}.skel-rows .c{width:52%}

/* ——— проступание новых находок: волнами, без подпрыгивания ——— */
.develops{opacity:0;transform:translateY(8px);animation:develop 320ms var(--ease) forwards}

/* Сигналов бывает больше двух: линия слева — только у второго в паре,
   у следующих рядов — линия сверху. */
@media (min-width:1241px){
  .sigs .sig + .sig{border-left:0;padding-left:0}
  .sigs .sig:nth-child(even){border-left:1px solid var(--line);padding-left:var(--gap)}
  .sigs .sig:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ——— сигнал «в плюс» говорит спокойно: ни красного, ни янтаря ——— */
.sig[data-sev="quiet"] i{background:var(--dim)}
.sig[data-sev="quiet"] .sev{color:var(--dim)}
.sig .said{font:500 14px/1.3 var(--text);color:var(--ink-3);margin-top:7px}
.sig .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.sig .acts .input{flex:1 1 200px;min-width:0;height:34px}

/* ——— поля ввода кода: те же клетки экрана входа, только рабочие ——— */
input.cell{height:52px;width:100%;padding:0;text-align:center;border:1px solid var(--stroke);
  background:var(--sunk);color:var(--ink);font-family:var(--display);font-weight:500;font-size:23px;
  transition:border-color 140ms var(--ease)}
input.cell::placeholder{color:var(--dim)}
input.cell:focus{outline:none;border-color:var(--amber)}
input.cell.is-error{border-color:var(--attention)}
input.cell:disabled{opacity:.45}

/* ——— строка, которую можно скопировать одним движением ——— */
.copy{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.copy .input{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ссылка, которая работает как кнопка или как путь наверх */
a.btn{text-decoration:none}
.crumb a{color:var(--ink-3);text-decoration:none;transition:color 140ms var(--ease)}
.crumb a:hover{color:var(--ink)}

/* выход из продукта живёт в строке навигации, справа от имени */
.top .выход{flex:none;height:52px;font:500 15px/1 var(--text);color:var(--ink-3)}
.top .выход:hover{color:var(--ink)}

/* поле страницы, когда на ней нет двух колонок */
.wrap{padding:0 var(--pad) 40px}

/* подпись только для чтения с экрана: на виду её нет */
.quiet-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}