/* Light theme for the shared sign-in pages (login, reset). Loaded after
   owner.css, which stays green for Sequence's own dashboard. */

body { background: #fff; color: var(--ink); flex-direction: column; }
/* card stays vertically centred; the footer sits below it at the bottom */
.host-wrap { margin: auto 0; }
.brand { color: var(--ink); }
.tagline { color: var(--muted); opacity: 1; }

.card {
  background: #fff;
  border: 1px solid #e6e9ee;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
}

.field > span { color: var(--muted); opacity: 1; }
.card input { background: #f6f7f9; border-color: #dde1e6; }
.card input:focus { background: #fff; }

.tabs { background: #eef1f4; }
.tab { color: var(--muted); }
.tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); }

button.link { color: var(--felt); }

.muted { color: var(--muted); opacity: 1; }
.msg { color: #9a6700; }
.msg.bad { color: #c0392b; }
.msg.good { color: #1e7e34; }

/* ---- sign in with your phone ---- */
/* TV / computer: the form and the QR code side by side (wide screens only). */
.host-wrap.with-qr { max-width: 860px; }
.login-row { display: flex; gap: 24px; align-items: stretch; justify-content: center; }
.login-row > .card { flex: 0 1 400px; min-width: 0; }
.qr-login { display: flex; flex-direction: column; align-items: center; }
.qr-login h2 { margin-bottom: 14px; }
.qr-frame {
  padding: 10px;
  border: 1px solid #e6e9ee;
  border-radius: 14px;
  background: #fff;
}
.qr-frame img { display: block; width: 220px; height: 220px; image-rendering: pixelated; }
.qr-steps { text-align: left; margin: 16px 0 6px; padding-left: 22px; line-height: 1.55; color: var(--muted); }
.qr-steps b { color: var(--ink); }
#qr-status { min-height: 1.2em; }
.qr-match { margin: 14px 0 0; color: var(--muted); }
.qr-match b { margin-left: 6px; font-size: 2rem; letter-spacing: 0.15em; color: var(--ink); vertical-align: middle; }
#pair-match { font-size: 1.6rem; text-align: center; letter-spacing: 0.3em; }
@media (max-width: 759px) { .qr-login { display: none !important; } }

/* Phone: approving the screen that showed the code. */
.pair-account { font-size: 1.15rem; font-weight: 700; margin: -4px 0 14px; word-break: break-all; }
.muted.small { font-size: 0.82rem; }
#pair-actions button.link { display: block; margin: 8px auto 0; }
.done-icon { font-size: 3rem; line-height: 1; }
.link-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  background: #eef1f4;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.site-footer {
  width: 100%;
  max-width: 400px;
  padding: 18px 0 0;
  border-top: 1px solid #e6e9ee;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer a { color: var(--felt); font-weight: 600; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }