/* ZiloHub login readability — 22 October 2026.
   The dark theme must never place near-white text on a white login card.
   This external stylesheet respects the production style-src 'self' CSP. */

/* Normal light mode: explicit light surfaces and dark readable text. */
html[data-theme=light] .login-form-wrap {
  background:#ffffff;
  color:#172c41;
  border:1px solid #c9d9e5;
  color-scheme:light;
}
html[data-theme=light] .login-form-wrap h2 {color:#172c41}
html[data-theme=light] .login-form-wrap :is(.login-desc,.login-note,.login-divider) {color:#435a6d}
html[data-theme=light] .login-form-wrap .eyebrow {color:#096554}
html[data-theme=light] .login-form-wrap .field>span {color:#263f53}
html[data-theme=light] .login-form-wrap :is(input,textarea,select) {
  background:#ffffff;
  color:#172c41;
  border-color:#8ba4b8;
  caret-color:#172c41;
}
html[data-theme=light] .login-form-wrap :is(input,textarea)::placeholder {color:#50687c;opacity:1}

/* Dark mode: make BOTH card and labels dark-mode appropriate. */
html[data-theme=dark] .login-right {background:#101f30;color:#edf6fc}
html[data-theme=dark] .login-form-wrap {
  background:#17283b;
  color:#edf6fc;
  border:1px solid #466278;
  box-shadow:0 22px 65px #050f1d55;
  color-scheme:dark;
}
html[data-theme=dark] .login-form-wrap h2 {color:#f5fafe}
html[data-theme=dark] .login-form-wrap .eyebrow {color:#9eecd7}
html[data-theme=dark] .login-form-wrap :is(.login-desc,.login-note,.login-divider) {color:#cbddec}
html[data-theme=dark] .login-form-wrap .field>span {color:#e0ecf5}
html[data-theme=dark] .login-form-wrap :is(input,textarea,select) {
  background:#233b50;
  color:#f5fafe;
  border-color:#8aa3b6;
  caret-color:#f5fafe;
}
html[data-theme=dark] .login-form-wrap :is(input,textarea)::placeholder {color:#cbddec;opacity:1}
html[data-theme=dark] .login-form-wrap .password-wrap button {color:#d6e7f4}
html[data-theme=dark] .login-form-wrap .login-divider span {background:#486278}
html[data-theme=dark] .login-form-wrap .btn.passkey-btn {
  background:#233b50;
  color:#f5fafe;
  border-color:#839db1;
}
html[data-theme=dark] .login-form-wrap .btn.passkey-btn:hover {background:#30516a;border-color:#a4bdd0}
html[data-theme=dark] .login-form-wrap .form-error {background:#432b31;color:#ffd5cf;border:1px solid #965b62}
html[data-theme=dark] .login-form-wrap a {color:#a8f0da}

/* Chrome / Android / Safari password manager fills. Match theme colours instead of
   user-agent yellow and prevent white text on a yellow or white autofill surface.
   Firefox's :autofill supports the same appearance intent. */
html[data-theme=light] .login-form-wrap input:is(:-webkit-autofill,:autofill),
html[data-theme=light] .login-form-wrap input:-webkit-autofill:hover,
html[data-theme=light] .login-form-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px #edf5fc inset !important;
  box-shadow:0 0 0 1000px #edf5fc inset !important;
  -webkit-text-fill-color:#172c41 !important;
  color:#172c41 !important;
  caret-color:#172c41;
}
html[data-theme=dark] .login-form-wrap input:is(:-webkit-autofill,:autofill),
html[data-theme=dark] .login-form-wrap input:-webkit-autofill:hover,
html[data-theme=dark] .login-form-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px #233b50 inset !important;
  box-shadow:0 0 0 1000px #233b50 inset !important;
  -webkit-text-fill-color:#f5fafe !important;
  color:#f5fafe !important;
  caret-color:#f5fafe;
}

/* Keep labels and guidance comfortably readable on phone screens. */
.login-form-wrap .eyebrow {font-size:12px;letter-spacing:.09em}
.login-form-wrap .field>span {font-size:14px;line-height:1.5}
.login-form-wrap .login-desc {font-size:14px;line-height:1.65}
.login-form-wrap :is(.login-divider,.login-note) {font-size:13px;line-height:1.55}
.login-form-wrap :is(input,textarea,select) {font-size:16px;line-height:1.35}
.login-form-wrap :is(input,textarea,select,.btn):focus-visible {
  outline:3px solid #44b39e;
  outline-offset:3px;
}
@media(max-width:760px) {
  .login-form-wrap {max-width:100%;min-width:0}
}

/* Inputs use a more specific base selector in the bundled login stylesheet. */
.login-form-wrap .field input {font-size:16px;line-height:1.35}

/* The small privacy footer sits OUTSIDE the form card.
   The synthetic source checkout exposed an inherited pale-on-white label here. */
html[data-theme=light] .login-copy {color:#435a6d;opacity:1}
html[data-theme=dark] .login-copy {color:#cbddec;opacity:1}

/* Baseline source still had an over-bright green primary CTA that failed 4.5:1.
   Lock in the accessible brand green in both themes. */
html[data-theme=light] .login-form-wrap .btn.primary,
html[data-theme=dark] .login-form-wrap .btn.primary {
  background:#0b6b59;
  color:#ffffff;
  border-color:#0b6b59;
  opacity:1;
}
.login-form-wrap .btn.primary:hover {background:#075748;border-color:#075748}

/* Older synthetic bundles had a dark wordmark on the dark mobile login card. */
html[data-theme=light] .mobile-login-brand strong {color:#172c41}
html[data-theme=dark] .mobile-login-brand strong {color:#f5fafe}