/* Restlord sign-up and sign-in (signup.html, and admin.html before sign-in).
   Original work for Restlord, built on rl-tokens.css. The same page language as
   restlord.com: cream page, the logo lockup on top, one white card, a Fraunces
   headline, Inter for everything else, pill buttons (amber to start, navy to
   carry on).
   Everything is scoped under html.rl-signin. admin.html ships with that class
   and admin.js drops it once the console (or Classic) is shown, so none of this
   reaches a signed-in page. Dark follows the system (and the console's own
   theme choice once boot.js has read it), like restlord.com. */

html.rl-signin {
  --rl-auth-card-shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 32px -18px rgba(20,33,58,.25);
  background: var(--rl-bg);
}
@media (prefers-color-scheme: dark) {
  html.rl-signin:not([data-theme="light"]) {
    color-scheme: dark;
    --rl-bg: #0f1829; --rl-surface: #15213a; --rl-surface-2: #1a2945; --rl-sunken: #0b1322;
    --rl-border: #2b3954; --rl-border-strong: #3a4a6a; --rl-field-border: #64759b;
    --rl-ink: #f3ede4; --rl-ink-2: #d7cfc2; --rl-ink-3: #a9b2c2;
    --rl-brand: #f3ede4; --rl-brand-hover: #ffffff; --rl-brand-ink: #14213a; --rl-brand-text: #f2b45a;
    --rl-accent: #f2b45a; --rl-accent-hover: #f6c477; --rl-accent-ink: #1b1206;
    --rl-accent-soft: #1a2945; --rl-accent-soft-ink: #f2b45a;
    --rl-ok: #6fcf97; --rl-ok-bg: #163222; --rl-warn: #f2c46a; --rl-warn-bg: #3a2c10;
    --rl-bad: #ff8a80; --rl-bad-bg: #3d1a1a; --rl-info: #93bde0; --rl-info-bg: #172a40;
    --rl-focus: #f2b45a; --rl-link: #f2b45a; --rl-hover: rgba(255,255,255,.05); --rl-disabled-ink: #6b7588;
    --rl-skel-base: #1a2945; --rl-skel-shine: #22345a; --rl-rail-bg: #0a1120;
    --rl-auth-card-shadow: 0 1px 0 rgba(0,0,0,.2), 0 16px 40px -20px rgba(0,0,0,.6);
  }
}
html.rl-signin[data-theme="dark"] {
  color-scheme: dark;
  --rl-bg: #0f1829; --rl-surface: #15213a; --rl-surface-2: #1a2945; --rl-sunken: #0b1322;
  --rl-border: #2b3954; --rl-border-strong: #3a4a6a; --rl-field-border: #64759b;
  --rl-ink: #f3ede4; --rl-ink-2: #d7cfc2; --rl-ink-3: #a9b2c2;
  --rl-brand: #f3ede4; --rl-brand-hover: #ffffff; --rl-brand-ink: #14213a; --rl-brand-text: #f2b45a;
  --rl-accent: #f2b45a; --rl-accent-hover: #f6c477; --rl-accent-ink: #1b1206;
  --rl-accent-soft: #1a2945; --rl-accent-soft-ink: #f2b45a;
  --rl-ok: #6fcf97; --rl-ok-bg: #163222; --rl-warn: #f2c46a; --rl-warn-bg: #3a2c10;
  --rl-bad: #ff8a80; --rl-bad-bg: #3d1a1a; --rl-info: #93bde0; --rl-info-bg: #172a40;
  --rl-focus: #f2b45a; --rl-link: #f2b45a; --rl-hover: rgba(255,255,255,.05); --rl-disabled-ink: #6b7588;
  --rl-skel-base: #1a2945; --rl-skel-shine: #22345a; --rl-rail-bg: #0a1120;
  --rl-auth-card-shadow: 0 1px 0 rgba(0,0,0,.2), 0 16px 40px -20px rgba(0,0,0,.6);
}

html.rl-signin body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--rl-bg); color: var(--rl-ink);
  font: 400 16px/1.55 var(--rl-font-ui); -webkit-font-smoothing: antialiased;
}
html.rl-signin *, html.rl-signin *::before, html.rl-signin *::after { box-sizing: border-box; }

/* The old site chrome gives way to the auth layout (admin.html). */
html.rl-signin body > header.header,
html.rl-signin section.page-header,
html.rl-signin footer.footer { display: none !important; }
html.rl-signin .contact-section { flex: 1 0 auto; padding: 0; }
html.rl-signin .contact-section > .container { max-width: none; padding: 0 16px 24px; }

/* Shown only on the sign-in page (admin.html keeps them for Classic). */
html:not(.rl-signin) .rl-auth-only { display: none !important; }

/* ---- frame ------------------------------------------------------------------ */
.rl-auth-main {
  flex: 1 0 auto; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: 22px 20px 40px; display: flex; flex-direction: column;
}
.rl-auth-main--narrow { max-width: 480px; }
html.rl-signin .rl-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 28px; }

/* Logo lockup, as on restlord.com */
.rl-auth-brand {
  display: inline-flex; align-items: center; gap: 10px; color: var(--rl-ink); text-decoration: none;
  font: 700 22px/1 var(--rl-font-display); letter-spacing: -0.01em;
}
.rl-auth-brand img, .rl-auth-brand svg { width: 34px; height: 34px; flex: none; border-radius: 8px; }
.rl-auth-brand__text small {
  display: block; margin-top: 4px; font: 500 12px/1.2 var(--rl-font-ui); letter-spacing: 0.02em; color: var(--rl-ink-3);
}
.rl-auth-brand:hover .rl-auth-brand__text > span { text-decoration: underline; text-underline-offset: 4px; }
.rl-auth-toplink { color: var(--rl-ink); font-weight: 600; font-size: 15px; text-decoration: none; padding: 10px 12px; border-radius: var(--rl-r-pill); white-space: nowrap; }
.rl-auth-toplink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Signup: intro on the left, the form card on the right; one column on phones. */
.rl-auth-split { display: grid; gap: 40px; grid-template-columns: 1fr minmax(0, 460px); align-items: start; padding-top: 24px; }
.rl-auth-intro { padding-top: 12px; }
.rl-auth-eyebrow {
  display: inline-block; margin: 0 0 16px; padding: 6px 12px; border-radius: var(--rl-r-pill);
  background: var(--rl-accent-soft, #f7efe3); color: var(--rl-accent-soft-ink, #7a4a0c);
  font: 600 13px/1.2 var(--rl-font-ui); letter-spacing: .06em; text-transform: uppercase;
}
html.rl-signin .rl-auth-title {
  margin: 0 0 12px; color: var(--rl-ink);
  font: 700 clamp(32px, 4.6vw, 48px)/1.06 var(--rl-font-display); letter-spacing: -0.02em;
}
.rl-auth-lede { margin: 0 0 22px; font-size: 18px; color: var(--rl-ink-2); max-width: 34ch; }
.rl-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 420px; }
.rl-auth-points li {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: 12px; background: var(--rl-surface); border: 1px solid var(--rl-border);
  font-size: 15px; color: var(--rl-ink);
}
.rl-auth-dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--rl-accent); color: var(--rl-accent-ink);
  display: grid; place-items: center; font: 700 13px/1 var(--rl-font-ui); margin-top: 1px;
}

/* ---- the card ----------------------------------------------------------------- */
html.rl-signin .rl-auth-card {
  background: var(--rl-surface); color: var(--rl-ink);
  border: 1px solid var(--rl-border); border-radius: var(--rl-r-lg); box-shadow: var(--rl-auth-card-shadow);
  padding: 28px; margin: 0;
}
html.rl-signin .rl-auth-card h2 {
  margin: 0 0 6px; color: var(--rl-ink);
  font: 700 28px/1.12 var(--rl-font-display); letter-spacing: -0.015em;
}
html.rl-signin .rl-auth-card p { margin: 0; }
html.rl-signin .rl-auth-card .rl-auth-sub { margin: 0 0 20px; color: var(--rl-ink-3); font-size: 15px; line-height: 1.45; }

/* Fields */
html.rl-signin .rl-auth-card .form-group { margin: 0 0 16px; }
html.rl-signin .rl-auth-card .form-group label { display: block; margin: 0 0 6px; font: 600 14px/1.3 var(--rl-font-ui); color: var(--rl-ink-2); }
html.rl-signin .rl-auth-card :is(input[type="email"], input[type="password"], input[type="text"], input[type="tel"]) {
  width: 100%; min-height: 48px; padding: 12px 14px; margin: 0;
  border: 1px solid var(--rl-field-border); border-radius: 12px;
  background: var(--rl-surface); color: var(--rl-ink); font: 400 16px/1.25 var(--rl-font-ui);
  transition: border-color var(--rl-dur) var(--rl-ease), box-shadow var(--rl-dur) var(--rl-ease);
}
html.rl-signin .rl-auth-card input::placeholder { color: var(--rl-ink-3); opacity: 1; }
html.rl-signin .rl-auth-card :is(input[type="email"], input[type="password"], input[type="text"], input[type="tel"]):focus {
  outline: none; border-color: var(--rl-ink); box-shadow: 0 0 0 3px rgba(224,154,58,.45);
}
html.rl-signin .rl-auth-card .hint { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--rl-ink-3); }

/* Buttons: pills, as on restlord.com */
html.rl-signin .rl-auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 50px; padding: 12px 22px; margin: 0; border: 1.5px solid transparent; border-radius: var(--rl-r-pill);
  font: 600 16px/1.2 var(--rl-font-ui); letter-spacing: 0; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--rl-dur) var(--rl-ease), border-color var(--rl-dur) var(--rl-ease), filter var(--rl-dur) var(--rl-ease);
}
html.rl-signin .rl-auth-btn--accent { background: var(--rl-accent); color: var(--rl-accent-ink); }
html.rl-signin .rl-auth-btn--accent:hover:not(:disabled) { filter: brightness(1.05); }
html.rl-signin .rl-auth-btn--primary { background: var(--rl-brand); color: var(--rl-brand-ink); }
html.rl-signin .rl-auth-btn--primary:hover:not(:disabled) { background: var(--rl-brand-hover); }
html.rl-signin .rl-auth-btn--ghost { background: transparent; color: var(--rl-ink); border-color: var(--rl-border-strong); }
html.rl-signin .rl-auth-btn--ghost:hover:not(:disabled) { border-color: var(--rl-ink-3); background: var(--rl-hover); }
/* "Continue with Google": the first way in on sign-in and sign-up — white with
   the G mark, like Google's own button, and a touch of lift so it reads first. */
html.rl-signin .rl-auth-btn--google { background: var(--rl-surface); color: var(--rl-ink); border-color: var(--rl-border-strong); box-shadow: 0 1px 3px rgba(20, 33, 58, .10); }
html.rl-signin .rl-auth-btn--google:hover:not(:disabled) { border-color: var(--rl-ink-3); background: var(--rl-hover); }
html.rl-signin .rl-auth-btn:disabled { cursor: not-allowed; opacity: .5; filter: none; }
html.rl-signin .rl-auth-btn + .rl-auth-btn { margin-top: 10px; }
html.rl-signin .rl-auth-btn svg { width: 18px; height: 18px; flex: none; }
html.rl-signin :is(.rl-auth-btn, .link-btn, a, input[type="checkbox"]):focus-visible { outline: 3px solid var(--rl-focus); outline-offset: 2px; }

html.rl-signin .link-btn {
  display: inline; padding: 2px 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: var(--rl-ink); font: 600 14px/1.4 var(--rl-font-ui); text-decoration: underline; text-underline-offset: 3px;
}
html.rl-signin .link-btn:hover { color: var(--rl-ink-2); }
/* Secondary actions under a card's main button (sign-up's "Resend the link ·
   Start over"): text buttons with a full-size touch target. */
html.rl-signin .rl-auth-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 2px; margin: 14px 0 0; }
html.rl-signin .rl-auth-actions .link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--rl-r-btn); }
html.rl-signin .rl-auth-actions .link-btn:hover:not(:disabled) { background: var(--rl-hover); }
html.rl-signin .rl-auth-actions .link-btn:disabled { opacity: .5; cursor: not-allowed; }
html.rl-signin .rl-auth-card a:not(.rl-auth-btn) { color: var(--rl-ink); font-weight: 600; text-underline-offset: 3px; }
html.rl-signin .rl-auth-card a:not(.rl-auth-btn):hover { color: var(--rl-ink-2); }

.rl-auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--rl-ink-3); font-size: 13px; }
.rl-auth-or::before, .rl-auth-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rl-border); }
.rl-auth-center { text-align: center; }
html.rl-signin .rl-auth-foot {
  margin: 20px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--rl-border);
  text-align: center; font-size: 14px; color: var(--rl-ink-3);
}

/* Terms */
html.rl-signin .terms { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-size: 14px; line-height: 1.45; color: var(--rl-ink-2); cursor: pointer; }
html.rl-signin .terms input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--rl-brand-hover); }

/* Notices (signup.js / admin.js set the kind) */
html.rl-signin .notice { margin: 14px 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; border: 0; }
html.rl-signin .notice.info { background: var(--rl-info-bg); color: var(--rl-info); }
html.rl-signin .notice.warn { background: var(--rl-warn-bg); color: var(--rl-warn); }
html.rl-signin .notice.err { background: var(--rl-bad-bg); color: var(--rl-bad); }
html.rl-signin .notice.ok { background: var(--rl-ok-bg); color: var(--rl-ok); }
/* Sign-up: "that email already has an account" — the ways in, not a dead end. */
html.rl-signin .rl-auth-exists { margin: 16px 0 0; padding: 16px; border: 1px solid var(--rl-border-strong); border-radius: 14px; background: var(--rl-surface); }
html.rl-signin .rl-auth-exists__lead { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--rl-ink); }
html.rl-signin .rl-auth-exists__msg { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--rl-ink-2); }
html.rl-signin .rl-auth-exists__msg:empty { display: none; }
html.rl-signin .rl-auth-exists__msg.is-err { color: var(--rl-bad); }
html.rl-signin .rl-auth-exists__msg.is-ok { color: var(--rl-ok); }
html.rl-signin .rl-auth-note { margin: 8px 0 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--rl-ink-3); }
/* The console's sign-in error offers the other ways in as text buttons. */
html.rl-signin #loginError .link-btn { color: inherit; font-size: inherit; }
html.rl-signin .rl-auth-error:empty { display: none; }
html.rl-signin .rl-auth-error { margin: 12px 0 0 !important; font-size: 14px; line-height: 1.45; font-weight: 500; }
html.rl-signin .hidden { display: none !important; }
/* The two-step sign-in code box (mfa.js showMfaChallenge) hides the rest of
   the card with the hidden attribute; .rl-auth-btn and .terms set display
   themselves, which would otherwise beat the browser's own [hidden] rule. */
html.rl-signin [hidden] { display: none !important; }

/* Page footer */
.rl-auth-legal { width: 100%; max-width: 1080px; margin: 0 auto; padding: 20px 20px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: var(--rl-ink-3); font-size: 14px; }
.rl-auth-legal a { color: inherit; }
.rl-auth-legal nav { display: flex; gap: 16px; }

/* admin.html's footer: as wide as the sign-in card */
html.rl-signin footer.rl-auth-legal.rl-auth-only { max-width: 512px; }

/* Loading line before Firebase answers (admin.html) */
html.rl-signin #loading { color: var(--rl-ink-3) !important; text-align: center; padding: 40px 0; margin: 0 auto; }

/* admin.html: centre the sign-in card in the old container */
html.rl-signin .rep-wrap > .rl-auth-main { padding: 22px 0 8px; }
html.rl-signin #authGate.rl-auth-card { width: 100%; max-width: 480px; margin: 0 auto; }
/* admin.js / email-link-auth.js colour this line inline (red, or green for
   "link sent"): the same meaning in tokens, readable in both themes. */
html.rl-signin #loginError { color: var(--rl-bad) !important; }
html.rl-signin #loginError:is([style*="rgb(32, 80, 32)"], [style*="#205020"]) { color: var(--rl-ok) !important; }

/* ---- the app's start page (app.html): "I'm a landlord" / "I'm a tenant" ------- */
/* Installed web app (home screen): respect the notch/gesture bar. */
html.rl-app .rl-auth-main { padding-top: max(22px, env(safe-area-inset-top)); }
html.rl-app .rl-auth-legal { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.rl-app-lang { flex: none; }
html.rl-signin .rl-app-lang__btn {
  min-height: 44px; margin: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--rl-font-ui); text-decoration: underline; text-underline-offset: 4px;
}
html.rl-signin .rl-app-lang__btn:hover { background: var(--rl-hover); }
html.rl-signin .rl-app-chooser .rl-auth-title { font-size: clamp(30px, 7vw, 40px); }
html.rl-signin .rl-app-chooser .rl-auth-lede { margin-bottom: 18px; }
html.rl-signin .rl-app-role { padding: 22px; }
html.rl-signin .rl-app-role + .rl-app-role { margin-top: 14px; }
.rl-app-role__head { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; margin-bottom: 16px; }
.rl-app-role__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--rl-accent-soft); color: var(--rl-accent-soft-ink);
}
.rl-app-role__icon svg { width: 24px; height: 24px; }
html.rl-signin .rl-app-role h2 { font-size: 24px; margin-bottom: 4px; }
html.rl-signin .rl-app-role .rl-auth-sub { margin: 0; }
.rl-app-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
html.rl-signin .rl-app-actions .rl-auth-btn + .rl-auth-btn { margin-top: 0; }
html.rl-signin .rl-app-hint { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--rl-ink-3); }
html.rl-signin .rl-app-chooser .notice .link-btn,
html.rl-signin .rl-app-chooser .notice a { color: inherit; font-weight: 600; }

/* While app-entry.js checks who is signed in: a spinner, no choices. If the
   script never runs (offline, blocked), the choices appear after 6 s anyway. */
.rl-app-wait { display: none; }
html.rl-app-checking .rl-app-wait {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 72px 0;
  color: var(--rl-ink-3); font-size: 15px;
  animation: rl-app-hide 0s linear 6s forwards;
}
html.rl-app-checking .rl-app-chooser { visibility: hidden; height: 0; overflow: hidden; animation: rl-app-show 0s linear 6s forwards; }
html.rl-app-checking.rl-app-js .rl-app-wait,
html.rl-app-checking.rl-app-js .rl-app-chooser { animation: none; }
@keyframes rl-app-hide { to { visibility: hidden; height: 0; padding: 0; overflow: hidden; } }
@keyframes rl-app-show { to { visibility: visible; height: auto; overflow: visible; } }
.rl-app-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--rl-border); border-top-color: var(--rl-accent);
  animation: rl-app-spin .9s linear infinite;
}
@keyframes rl-app-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rl-app-spinner { animation-duration: 2.4s; } }

@media (max-width: 860px) {
  .rl-auth-split { grid-template-columns: 1fr; gap: 24px; padding-top: 4px; }
  .rl-auth-intro { padding-top: 0; }
  .rl-auth-lede { margin-bottom: 0; }
  .rl-auth-points { display: none; }
}
@media (max-width: 480px) {
  .rl-auth-main { padding: 16px 16px 28px; }
  html.rl-signin .rl-auth-top { padding-bottom: 18px; }
  .rl-auth-brand { font-size: 19px; }
  .rl-auth-brand img, .rl-auth-brand svg { width: 30px; height: 30px; }
  .rl-auth-brand__text small { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
  html.rl-signin .rl-auth-card { padding: 22px 18px; border-radius: 14px; }
  .rl-auth-lede { font-size: 16px; }
  .rl-auth-legal { padding: 16px 16px 24px; justify-content: center; text-align: center; }
}