/* Приложение на рабочем столе: инструкция установки, окно «Открыть на
   рабочем столе», вход по коду и «Устройства» (screens/install.js, login.js,
   devices.js). Цвета — только токенами «Контура»: тёмная тема приезжает
   сама, и контраст считается по тем же парам, что у остального приложения. */

.install { display: flex; flex-direction: column; gap: 12px; }
.install__lead { margin: 0 0 10px; color: var(--text-secondary); }
.install__prompt:empty { display: none; }

.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.install-step {
  display: grid; grid-template-columns: 28px 1fr; gap: 6px 12px; align-items: start;
  padding: 12px; border-radius: 14px; background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}
.install-step__number {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-brand); color: var(--text-inverse); font-weight: 600;
}
.install-step__title { margin: 2px 0 4px; font-size: 16px; line-height: 1.3; color: var(--text-primary); }
.install-step__detail { margin: 0; color: var(--text-secondary); line-height: 1.45; }
.install-step__schema { grid-column: 2; width: 100%; max-width: 240px; height: auto; color: var(--text-secondary); }

.schema__frame { fill: none; stroke: currentColor; stroke-width: 1.5; }
.schema__bar, .schema__icon { fill: var(--border-subtle); }
.schema__line { stroke: currentColor; stroke-width: 1; opacity: .5; }
.schema__dot { fill: currentColor; }
.schema__text { font-size: 7px; fill: var(--text-primary); }
.schema__hit { fill: none; stroke: var(--text-primary); stroke-width: 1.6; }
.schema__hit rect, .schema__hit circle { fill: var(--surface-brand-soft); }

.desktop-link { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.desktop-link__label { margin: 4px 0 0; color: var(--text-secondary); font-size: 14px; }
.desktop-link__code {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 34px; font-weight: 600;
  letter-spacing: .08em; text-align: center; padding: 14px 8px; border-radius: 14px;
  background: var(--surface-brand-soft); color: var(--text-primary); user-select: all;
}
.desktop-link__note { margin: 0; color: var(--text-secondary); line-height: 1.45; font-size: 14px; }
.desktop-link__status { margin: 0; min-height: 1.2em; color: var(--text-primary); font-size: 14px; }

.login__body { display: flex; flex-direction: column; gap: 14px; max-width: 460px; margin: 0 auto; }
.login__lead { margin: 0; color: var(--text-secondary); line-height: 1.45; }
.login__code { font-size: 24px; letter-spacing: .12em; text-transform: uppercase; }
.login__status { margin: 0; min-height: 1.2em; color: var(--text-primary); }

.devices { display: flex; flex-direction: column; gap: 12px; }
.devices__note { margin: 0; color: var(--text-secondary); font-size: 14px; }

@media (min-width: 900px) {
  .install, .devices { max-width: 720px; margin: 0 auto; }
  .install-step { grid-template-columns: 28px 1fr 200px; }
  .install-step__schema { grid-column: 3; grid-row: 1; }
}