/*
 * LMCC Church Operations & Management Platform (COMP)
 * Shared styles for the sign-in and account-recovery pages ("Style B").
 * Used by: users/login.php, users/forgot_password.php, users/reset_password.php,
 *          portal/login.php, portal/forgot_password.php, portal/reset_password.php,
 *          portal/register.php
 * Visual only. Contains no behaviour. All class names are prefixed "lc-".
 * Colours: navy #1e3a5f and blue #1d4ed8 are existing LMCC colours;
 * the tint, border and text greys are proposed design values.
 */
:root{
  --lc-navy:#1e3a5f; --lc-blue:#1d4ed8; --lc-blue-d:#1e40af; --lc-tint:#eef3fa;
  --lc-line:#dbe4f0; --lc-ink:#0f172a; --lc-muted:#516179; --lc-field:#7c8da5;
  --lc-orange:#f97316; --lc-red:#b91c1c; --lc-green:#166534; --lc-ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
.lc-body{
  margin:0; min-height:100vh; min-height:100dvh; position:relative; isolation:isolate; overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center;
  background:radial-gradient(900px 560px at 50% 14%,#fafcff,rgba(250,252,255,0)) no-repeat,var(--lc-tint); color:var(--lc-ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.lc-body::before{
  content:""; position:fixed; left:50%; top:50%; width:1100px; height:1100px; z-index:-1; pointer-events:none;
  transform:translate(-50%,-42%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 1100' fill='none' stroke='%23d0dcee' stroke-width='1.5'%3E%3Ccircle cx='550' cy='550' r='170'/%3E%3Ccircle cx='550' cy='550' r='290'/%3E%3Ccircle cx='550' cy='550' r='410'/%3E%3Ccircle cx='550' cy='550' r='530'/%3E%3Cellipse cx='550' cy='550' rx='100' ry='530'/%3E%3Cellipse cx='550' cy='550' rx='230' ry='530'/%3E%3Cellipse cx='550' cy='550' rx='370' ry='530'/%3E%3Cline x1='550' y1='20' x2='550' y2='1080'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:lc-drift 300s linear infinite;
}
@keyframes lc-drift{from{transform:translate(-50%,-42%) rotate(0deg)}to{transform:translate(-50%,-42%) rotate(360deg)}}

.lc-wrap{width:100%; max-width:440px; margin:auto 0; padding:36px 18px 32px}
.lc-brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:18px; animation:lc-rise .55s var(--lc-ease) both}
.lc-emblem{width:84px; height:84px; border-radius:50%; overflow:hidden; background:#fff; flex:none;
  box-shadow:0 0 0 3px #b9cff0,0 0 0 9px rgba(185,207,240,.32),0 14px 30px rgba(30,58,95,.20)}
.lc-emblem img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.06)}
.lc-brand--compact .lc-emblem{width:64px; height:64px; box-shadow:0 0 0 2.5px #b9cff0,0 0 0 7px rgba(185,207,240,.30),0 10px 22px rgba(30,58,95,.18)}
.lc-eyebrow{margin:14px 0 2px; font-size:14px; color:var(--lc-muted)}
.lc-wordmark{margin:0; font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-weight:700;
  font-size:32px; line-height:1.1; letter-spacing:.02em; color:var(--lc-navy)}
.lc-brand--compact .lc-wordmark{font-size:26px}
.lc-brand--compact .lc-eyebrow{margin-top:12px}
.lc-sub{margin:6px 0 0; font-size:15px; line-height:1.4; color:var(--lc-muted)}
.lc-rule{display:block; width:34px; height:3px; margin:12px auto 0; border-radius:2px; background:var(--lc-orange)}

.lc-card{background:#fff; border:1px solid var(--lc-line); border-radius:20px; padding:26px 24px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(16,42,84,.06),0 12px 24px rgba(16,42,84,.07),0 32px 64px rgba(16,42,84,.10);
  animation:lc-rise .55s var(--lc-ease) .09s both}
.lc-chip{display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; padding:4px 11px 4px 9px; font-size:12.5px; font-weight:600;
  letter-spacing:.02em; color:var(--lc-navy); background:#e6eefc; border-radius:999px}
.lc-chip .lc-i{width:14px; height:14px; color:var(--lc-blue)}
.lc-tile{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px;
  background:#e2ebfd; color:var(--lc-blue); margin-bottom:12px}
.lc-title{margin:0; font-size:24px; line-height:1.2; font-weight:700; color:var(--lc-ink); letter-spacing:-.01em}
.lc-lead{margin:4px 0 18px; font-size:15px; color:var(--lc-muted)}
.lc-i{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

.lc-form{margin:0}
.lc-field{margin-bottom:16px}
.lc-label{display:block; margin:0 0 6px; font-size:14px; font-weight:600; color:var(--lc-ink)}
.lc-inp{position:relative}
.lc-inp .lc-lead-ic{position:absolute; left:14px; top:15px; color:#64748b; pointer-events:none}
.lc-input{display:block; width:100%; height:50px; padding:0 14px; font:inherit; font-size:16px; color:var(--lc-ink);
  background:#fff; border:1.5px solid var(--lc-field); border-radius:11px; transition:border-color .15s,box-shadow .15s}
.lc-inp .lc-input{padding-left:44px}
.lc-inp--pw .lc-input{padding-right:52px}
.lc-input::placeholder{color:#66778f}
.lc-input:hover{border-color:#5f7896}
.lc-input:focus{outline:2px solid transparent; border-color:var(--lc-blue); box-shadow:0 0 0 4px rgba(29,78,216,.2)}
.lc-hint{margin:6px 0 0; font-size:13px; color:var(--lc-muted); line-height:1.4}
.lc-eye{position:absolute; right:4px; top:4px; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:0; border-radius:9px; color:#64748b; cursor:pointer}
.lc-eye:hover{color:var(--lc-blue)}
.lc-eye .lc-slash{display:none}
.lc-eye[aria-pressed="true"] .lc-slash{display:block}

.lc-row{display:flex; justify-content:space-between; align-items:center; gap:8px; margin:-2px 0 16px}
.lc-check{display:flex; align-items:center; gap:9px; min-height:44px; font-size:15px; cursor:pointer; white-space:nowrap}
.lc-check input{appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; padding:0; flex:none; cursor:pointer;
  display:grid; place-content:center; background:#fff; border:1.5px solid var(--lc-field); border-radius:6px;
  transition:background .15s,border-color .15s}
.lc-check input::after{content:""; width:11px; height:6px; margin-top:-2px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(0); transition:transform .15s}
.lc-check input:checked{background:var(--lc-blue); border-color:var(--lc-blue)}
.lc-check input:checked::after{transform:rotate(-45deg) scale(1)}
.lc-check input:focus-visible{outline:3px solid #6b9bf2; outline-offset:2px}

.lc-link{color:var(--lc-blue); font-weight:600; text-decoration:none; padding:8px 2px; font-size:15px}
.lc-row .lc-link{white-space:nowrap}
.lc-link:hover{text-decoration:underline}
.lc-link:focus-visible,.lc-btn:focus-visible,.lc-eye:focus-visible{outline:3px solid #6b9bf2; outline-offset:2px}

.lc-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:0 22px; font:inherit;
  font-size:16px; font-weight:600; text-decoration:none; border:1.5px solid transparent; border-radius:11px; cursor:pointer;
  transition:background .15s,transform .12s,box-shadow .15s,border-color .15s}
.lc-btn:active{transform:translateY(1px)}
.lc-btn--block{display:flex; width:100%}
.lc-btn--primary{background:var(--lc-blue); color:#fff; box-shadow:0 1px 2px rgba(29,78,216,.3),0 8px 18px rgba(29,78,216,.22)}
.lc-btn--primary{position:relative; overflow:hidden}
.lc-btn--primary::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:40%; pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.26),rgba(255,255,255,0)); transform:skewX(-20deg)}
.lc-btn--primary:hover{background:var(--lc-blue-d); box-shadow:0 1px 2px rgba(29,78,216,.35),0 12px 24px rgba(29,78,216,.28)}
.lc-btn--primary:hover::after{left:135%; transition:left .75s var(--lc-ease)}
.lc-btn--secondary{background:#fff; color:var(--lc-navy); border-color:var(--lc-field); margin-bottom:16px}
.lc-btn--secondary:hover{background:#f0f5fc; border-color:#5f7896}
.lc-btn.is-loading{background:var(--lc-blue-d); cursor:progress; pointer-events:none}
.lc-spin{display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%}
.lc-btn.is-loading .lc-spin{display:block; animation:lc-spin .7s linear infinite}
@keyframes lc-spin{to{transform:rotate(360deg)}}

.lc-alert{display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; padding:12px 14px; font-size:14px; line-height:1.4;
  color:#991b1b; background:#fef2f2; border:1px solid #fca5a5; border-radius:11px}
.lc-alert .lc-i{width:18px; height:18px; margin-top:1px}
.lc-alert--ok{color:var(--lc-green); background:#ecf8f0; border-color:#9fd8b3}

.lc-verified{display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; padding:12px 14px; font-size:14.5px; line-height:1.4;
  color:var(--lc-green); background:#ecf8f0; border:1px solid #9fd8b3; border-radius:11px}
.lc-verified .lc-i{width:20px; height:20px}

.lc-divider{border:0; border-top:1px solid var(--lc-line); margin:18px 0 8px}
.lc-alt{margin:0; text-align:center; font-size:14px; line-height:2; color:var(--lc-muted)}
.lc-alt .lc-link{font-size:14px}
.lc-links{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:16px}
.lc-links .lc-link{font-size:14.5px}
.lc-secure{display:flex; align-items:center; justify-content:center; gap:7px; margin:10px 0 0; font-size:13px; color:var(--lc-muted)}
.lc-secure .lc-i{width:16px; height:16px}
.lc-legal{margin:20px 0 0; text-align:center; font-size:13px; color:var(--lc-muted)}

@keyframes lc-rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@media (max-width:380px){
  .lc-row{flex-wrap:wrap; row-gap:0}
  .lc-card{padding:22px 18px 18px}
  .lc-wordmark{font-size:28px}
}
@media (min-width:600px) and (max-height:860px){
  .lc-wrap{padding-top:22px; padding-bottom:22px}
  .lc-brand{margin-bottom:12px}
  .lc-emblem{width:72px; height:72px}
  .lc-eyebrow{margin-top:10px}
  .lc-wordmark{font-size:28px}
  .lc-sub{font-size:14px}
  .lc-rule{margin-top:8px}
  .lc-card{padding:20px 24px 16px}
  .lc-field{margin-bottom:12px}
  .lc-lead{margin-bottom:14px}
  .lc-divider{margin:10px 0 4px}
  .lc-legal{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}