/* ============================================================================
   Страница входа: две колонки (рассказ + рисунок | карточка с формами),
   рисунок моста Master–Slave, поле пароля с кнопкой «показать».
   Цвета только через токены (tokens.css). Анимации гасит общее правило
   prefers-reduced-motion из app.css.
   ========================================================================== */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 56px;
  align-items: center;
  align-content: center;
  min-height: 100dvh;
}

.auth__intro { display: grid; gap: 14px; min-width: 0; }
.auth__intro .lede { max-width: 54ch; }

.auth__side { display: grid; gap: 14px; min-width: 0; }
.auth__card { padding: 22px; display: grid; gap: 18px; }
.auth__panel { display: grid; gap: 16px; }
.auth__panel[hidden] { display: none; }

.auth__field { display: grid; gap: 6px; }
.auth__field .hint { margin-top: -1px; }
.auth__field .field-error:empty { display: none; }

/* MAC показываем заглавными; нормализует значение login.js */
.auth__mac { text-transform: uppercase; }
.auth__mac::placeholder { text-transform: none; }


.auth__switch { font-size: 13.5px; color: var(--ink-2); text-align: center; }
.auth__note { text-align: center; margin-top: -6px; }
.auth__foot { text-align: center; }
.auth__foot .linkish, .auth__switch .linkish { white-space: nowrap; }

/* ————— пароль с кнопкой «показать» ————— */

.pw { position: relative; }
.pw .field { padding-right: 46px; }
.pw__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; color: var(--ink-3);
}
/* рамку .icon-btn на :hover убираем — внутри поля она лишняя */
.pw__toggle:hover { color: var(--ink); background: var(--tint-2); border-color: transparent; }
.pw__toggle[aria-pressed="true"] { color: var(--primary-ink); }

/* ————— мост Master–Slave ————— */

.bridge {
  position: relative;
  margin-top: 18px;
  padding: 18px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--grad-card);
  overflow: hidden;
}
/* сетка-подложка, тает к краям */
.bridge::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--tint-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--tint-2) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}
.bridge__svg { position: relative; width: 100%; height: auto; overflow: visible; }

.bridge__stop-m { stop-color: var(--cyan-ink); }
.bridge__stop-s { stop-color: var(--primary-ink); }

.bridge__arc { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 7; }
.bridge__flow {
  fill: none; stroke: url(#bridge-line); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 90 1100;
  animation: bridgeFlow 2s linear infinite;
}
.bridge__flow--back { animation-duration: 2.2s; animation-direction: reverse; }
@keyframes bridgeFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1190; } }

.bridge__dot--m { fill: var(--cyan-ink); }
.bridge__dot--s { fill: var(--primary-ink); }
.bridge__ring {
  fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: bridgeRing 2.4s ease-out infinite;
}
.bridge__ring--m { stroke: var(--cyan-ink); }
.bridge__ring--s { stroke: var(--primary-ink); animation-delay: .8s; }
@keyframes bridgeRing {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(3.5); opacity: 0; }
}

.bridge__label {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink); white-space: nowrap;
  background: var(--glass-strong);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
}
.bridge__label--m { top: 9%; left: 4%; }
.bridge__label--s { bottom: 9%; right: 4%; }
.bridge__ldot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bridge__label--m .bridge__ldot { background: var(--cyan-ink); box-shadow: 0 0 12px var(--cyan); }
.bridge__label--s .bridge__ldot { background: var(--primary-ink); box-shadow: 0 0 12px var(--primary); }

/* ————— узкие экраны ————— */

@media (max-width: 1000px) {
  .auth { gap: 36px; }
}
@media (max-width: 900px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    gap: 22px;
    align-content: start;
    min-height: 0;
  }
  .auth__intro { gap: 10px; }
  .bridge { display: none; }
}
@media (max-width: 560px) {
  .auth__lede { display: none; }
  .auth__card { padding: 16px; }
}