/* LBG-1 — sign-in pages (login.php, force-password-reset.php).
   The tenant's photo (or a backdrop of its brand colours) fills the page; the form sits in a
   full-height panel docked to the RIGHT. Phones: the photo becomes a band on top.
   Colours: brand tokens only (--br-* from BrandProfileService::uiCss(), --lg-* from ::loginCss()).
   The only literal colour allowed here is black, for the shade and shadows (Master Process §7). */
.lg-body{margin:0;background:var(--br-surface);color:var(--br-text);font-family:'Source Sans 3',system-ui,sans-serif}
.lg-page{min-height:100vh;display:flex}
.lg-art{flex:1 1 auto;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--lg-head,var(--br-ink)) 0%,var(--br-deep) 60%,var(--br-brand) 100%)}
.lg-art::before{content:"";position:absolute;inset:0;background-image:var(--lg-img,none);
  background-size:cover;background-repeat:no-repeat;background-position:var(--lg-pos,center center)}
.lg-has-img .lg-art::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--lg-shade,.25))}
.lg-panel{flex:0 0 460px;max-width:100%;box-sizing:border-box;min-height:100vh;display:flex;align-items:center;
  background:var(--br-surface);color:var(--br-text);box-shadow:-10px 0 34px rgba(0,0,0,.28);position:relative;z-index:1}
.lg-inner{width:100%;padding:48px 44px;box-sizing:border-box}
.lg-brand{background:var(--lg-head,var(--br-ink));color:var(--lg-on-head,var(--br-paper));border-radius:12px;
  padding:20px 18px 16px;text-align:center;margin-bottom:28px}
.lg-brand h1{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font-family:'Oswald',sans-serif;
  font-size:24px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:inherit}
.lg-brand h1 img{display:block;width:auto;height:auto;max-width:100%;max-height:150px}  /* fills the band; LV-1 trims empty margins */
.lg-brand p{margin:8px 0 0;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.88}
.lg-brand .lg-unbranded{font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;opacity:.82}
.lg-title{font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;margin:0 0 6px;color:var(--br-text)}
.lg-note{font-size:14px;color:var(--br-text-2);margin:0 0 18px}
.lg-panel .form-group{margin-bottom:18px}
.lg-panel label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--br-text)}
.lg-panel .form-control{width:100%;box-sizing:border-box;background:var(--br-surface);color:var(--br-text);border:1px solid var(--br-line)}
.lg-panel .form-control:focus{outline:2px solid var(--br-link);outline-offset:1px;border-color:var(--br-link)}
.lg-btn{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;padding:13px;font-size:16px;font-weight:600;
  border:0;border-radius:8px;cursor:pointer;background:var(--br-brand);color:var(--br-on-brand)}
.lg-btn:hover,.lg-btn:focus-visible{filter:brightness(.9)}
.lg-links{text-align:right;margin:-4px 0 16px;font-size:13px}
.lg-links.lg-after{margin:14px 0 0}
.lg-panel a{color:var(--br-link);text-decoration:none}
.lg-panel a:hover{text-decoration:underline}
@media (max-width:900px){
  .lg-page{flex-direction:column}
  .lg-art{flex:0 0 30vh;min-height:160px}
  .lg-panel{flex:1 0 auto;width:100%;min-height:0;align-items:flex-start;box-shadow:0 -10px 30px rgba(0,0,0,.22)}
  .lg-inner{padding:28px 20px 36px}
}