/*
 * The signed-out screens: login, password reset request, password change from a reset link (design "D6 - Light mode",
 * new-UI/login/). Everything is under .apx-login, as jQuery UI, reset.css and the loader styles load on these pages.
 * Linked directly, not through UiVersion::path(): every user sees these screens, whichever UI follows after sign-in.
 */
.apx-login {
  --teal-900: #085041; --teal-700: #0F6E56;
  --ink: #2C2C2A; --muted: #5F5E5A; --line: #E8E6E1; --input-border: #8E8C85;
  --panel: #F1F4EF; --panel-edge: #DCE5DE;
  --err-bg: #FBE8E6; --err-bd: #F2C9C3; --err-tx: #8E2B20;
  --inf-bg: #E7F0FA; --inf-bd: #C9DBF0; --inf-tx: #1F4E80;
  --wrn-bg: #FBF1DE; --wrn-bd: #EED9AE; --wrn-tx: #6E4A0E;

    margin: 0;
    background: #FFFFFF;
    color: var(--ink);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.apx-login-page { margin: 0; background: #FFFFFF; }
.apx-login h1 { color: var(--ink); }
.apx-login .lg-link, .apx-login .lg-foot a, .apx-login .lg-alert a { text-decoration: underline; text-underline-offset: 2px; }
.apx-login .lg-foot a { text-decoration: none; }
.apx-login .lg-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.apx-login .lg-actions--stack { flex-direction: column; align-items: stretch; }

.apx-login, .apx-login * { box-sizing: border-box; }

.lg { min-height: 100vh; display: flex; flex-direction: column; }
.lg-bar { flex-shrink: 0; height: 40px; display: flex; align-items: center; padding: 0 20px; background: var(--teal-900); color: #FFFFFF; }
.lg-bar svg { width: 82px; height: 19px; display: block; }
.lg-body { flex: 1; display: flex; }

/* Form side */
.lg-main { flex: 0 0 40%; min-width: 440px; padding: 88px 20px 28px; display: flex; flex-direction: column; align-items: center; }
.lg-col { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 26px; }
.lg-col h1 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.lg-form { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-field label { font-size: 13.5px; font-weight: 600; }
.lg-input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: 6px;
  background: #FFFFFF; color: var(--ink); font: inherit; font-size: 15px; }
.lg-input:focus { outline: 2px solid var(--teal-700); outline-offset: 1px; border-color: var(--teal-700); }
.lg-pass { position: relative; }
.lg-pass .lg-input { padding-right: 48px; }
.lg-eye { position: absolute; top: 1px; right: 1px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lg-eye:focus-visible { outline: 2px solid var(--teal-700); }
.lg-check { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 14px; cursor: pointer; }
.lg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal-700); cursor: pointer; }
.lg-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.lg-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--teal-700); }
.lg-link:hover { color: var(--teal-900); }
.lg-btn { height: 44px; padding: 0 28px; border: 0; border-radius: 8px; background: var(--teal-700); color: #FFFFFF;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.lg-btn:hover { background: var(--teal-900); }
.lg-btn:focus-visible { outline: 2px solid var(--teal-900); outline-offset: 2px; }
.lg-help { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); }
.lg-foot { width: 100%; max-width: 400px; margin-top: auto; padding-top: 48px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 20px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.lg-foot a { color: var(--ink); text-decoration: none; }
.lg-foot a:hover { text-decoration: underline; }

/* Messages (above the form) */
.lg-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid; border-radius: 8px;
  font-size: 13.5px; line-height: 1.45; }
.lg-alert svg { flex-shrink: 0; margin-top: 1px; }
.lg-alert a { color: inherit; font-weight: 600; }
.lg-alert--error { background: var(--err-bg); border-color: var(--err-bd); color: var(--err-tx); }
.lg-alert--info { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf-tx); }
.lg-alert--warn { background: var(--wrn-bg); border-color: var(--wrn-bd); color: var(--wrn-tx); }

/* Brand panel: live field + milky frost rising from the bottom + logo bottom-left */
.lg-panel { flex: 1 1 60%; min-width: 0; position: relative; overflow: hidden; background: var(--panel);
  border-left: 1px solid var(--panel-edge); display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; padding: 48px 56px; }
.lg-panel canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.lg-frost { position: absolute; left: 0; right: 0; bottom: 0; height: 240px; pointer-events: none; }
.lg-f1 { background: rgba(241,244,239,0.30); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to top,#000 0,#000 40%,transparent 100%); mask-image: linear-gradient(to top,#000 0,#000 40%,transparent 100%); }
.lg-f2 { background: rgba(241,244,239,0.20); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to top,#000 0,#000 30%,transparent 78%); mask-image: linear-gradient(to top,#000 0,#000 30%,transparent 78%); }
.lg-f3 { background: rgba(241,244,239,0.50); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to top,#000 0,#000 22%,transparent 60%); mask-image: linear-gradient(to top,#000 0,#000 22%,transparent 60%); }
.lg-panel-logo { position: relative; width: 200px; height: 46px; display: block; color: var(--teal-900); }

/* The form takes about 40% (at least 440 px, so the 400 px column never narrows) and the field the rest (owner,
   2026-11-10: half and half, then 70%, then 60%). The footer is centred under the form and wraps as needed. */
.lg-foot { max-width: none; justify-content: center; text-align: center; }

@media (min-width: 1700px) {
  .lg-foot { flex-wrap: nowrap; gap: 24px; white-space: nowrap; }
}

@media (max-width: 900px) {
  .lg-panel { display: none; }
  .lg-main { flex: 1 1 auto; min-width: 0; padding-top: 48px; }
}