/* Remote access screens (core/auth.js): passcode sign-in, "your PC isn't reachable", "remote access is off".
   FlowSuite look: white big container (24px radius) on a soft blue glow, blue pill button, Archivo headings. */

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 110; /* above the boot screen (100), modals (80) and toasts (90) */
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  animation: fd-auth-in var(--dur-slow) var(--ease) both;
}
@keyframes fd-auth-in { from { opacity: 0; } to { opacity: 1; } }
.auth-screen--still { animation: none; }
@media (prefers-reduced-motion: reduce) { .auth-screen { animation: none; } }
html.has-auth-screen,
html.has-auth-screen body { overflow: hidden; }

.auth-screen__glow {
  position: fixed;
  top: -30vmax;
  left: -25vmax;
  width: 90vmax;
  height: 90vmax;
  background: var(--glow);
  filter: blur(30px);
  pointer-events: none;
}

.auth__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-big);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.auth__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

.auth__badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 8px;
  border-radius: 16px;
  background: var(--blue-tint);
  color: var(--blue-ink);
  box-shadow: var(--tag-highlight);
}
.auth__badge--red { background: var(--red-tint); color: var(--red-ink); }
.auth__badge--amber { background: var(--amber-tint); color: var(--amber-ink); }

.auth__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.12;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
  color: var(--text);
  overflow-wrap: anywhere;
}

.auth__text {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: var(--lh);
  letter-spacing: var(--ls-body);
}

.auth__form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.auth__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.auth__field { position: relative; min-width: 0; }
.auth__input { padding-right: 52px; letter-spacing: 0.04em; }
.auth__eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }
.auth__user { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.auth__error {
  padding: 10px 12px;
  border-radius: var(--r-item);
  background: var(--red-tint);
  color: var(--red-ink);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.auth__steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 14px 12px 32px;
  border-radius: var(--r-kpi);
  background: var(--bg-soft);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.auth__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.auth__retry { color: var(--text-3); font-size: var(--fs-sm); }
.auth__retry .num { font-variant-numeric: tabular-nums; color: var(--text-2); }

.auth__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.auth__host { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.auth__host b { font-weight: var(--fw-semibold); color: var(--text-2); }

@media (max-width: 480px) {
  .auth__card { padding: 24px 20px 18px; border-radius: 20px; }
  .auth__title { font-size: 26px; }
}

/* "Signed in from another device" row under the data-sources card in the sidebar */
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 0 2px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  min-width: 0;
}
.session-row__who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app.is-collapsed .session-row__who { display: none; }
.app.is-collapsed .session-row { justify-content: center; }