/* ©HomeHub LLC 2026 */
 /* Keep the content below the fixed top bar (same rule as the other pages) */
  .wrap {
    padding-top: calc(var(--nav-h, 72px) + env(safe-area-inset-top, 0px) + 16px);
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  /* Colors that only this page needs. They follow the same light/dark backgrounds as the theme-color tags above. */
  :root {
    --lg-surface: #ffffff;
    --lg-line: rgba(21, 26, 25, .14);
    --lg-text: #151a19;
    --lg-muted: rgba(21, 26, 25, .62);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --lg-surface: #1d2423;
      --lg-line: rgba(236, 238, 234, .16);
      --lg-text: #eceeea;
      --lg-muted: rgba(236, 238, 234, .66);
    }
  }

  .login {
    max-width: 420px;
    margin: 0 auto;
  }
  .login-card {
    margin-top: 20px;
    padding: 20px 18px 18px;
    background: var(--lg-surface);
    border: 1px solid var(--lg-line);
    border-radius: 14px;
  }
  .login-card p {
    margin: 0 0 16px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--lg-muted);
  }

  /* Google button: white (or dark) surface with the four-color G, per Google's sign-in button style */
  .gbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    background: var(--lg-surface);
    color: var(--lg-text);
    border: 1px solid var(--lg-line);
    border-radius: 10px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .gbtn:hover { border-color: var(--lg-text); }
  .gbtn:active { transform: translateY(1px); }
  .gbtn:focus-visible { outline: 2px solid var(--lg-text); outline-offset: 2px; }
  .gbtn[disabled] { opacity: .6; cursor: default; transform: none; }
  .gbtn svg { width: 20px; height: 20px; flex: none; }

  /* "or" divider between Google and the manual form */
  .login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: var(--lg-muted);
  }
  .login-or::before, .login-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lg-line);
  }

  /* Email + password form */
  .login-form { display: grid; gap: 14px; }
  .login-form .f { display: grid; gap: 6px; }
  .login-form label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: var(--lg-muted);
  }
  .login-form input {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 12px;
    background: transparent;
    color: var(--lg-text);
    border: 1px solid var(--lg-line);
    border-radius: 10px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 16px; /* 16px stops iPhone Safari from zooming in when the field is tapped */
  }
  .login-form input:focus-visible { outline: 2px solid var(--lg-text); outline-offset: 1px; }
  .pw-wrap { position: relative; }
  .pw-wrap input { padding-right: 64px; }
  .pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    min-height: 34px;
    padding: 0 10px;
    background: none;
    border: 0;
    color: var(--lg-muted);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .login-form .btn { width: 100%; min-height: 48px; }
  .login-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }

  .login-msg { margin-top: 14px; }
  .login-foot {
    margin: 16px 2px 0;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lg-muted);
  }