/* ===== Matthew House Database - Login Landing =====
   KICKOFF 01: rebuilt from DESIGN's "Login Landing" handoff (logo-lockup door).
   Every rule is scoped to .door so nothing leaks app-wide. The shared brand pine
   is single-sourced from mh-theme.css (--mh-green: #4E7C72); only the bespoke
   dark-pine "door" scene values live here. Fonts (Bricolage Grotesque display +
   Hanken Grotesk ui) are the app's self-hosted families (mh-fonts.css) - no CDN.
   Plain hyphens only; zero em/en dashes. */

.door{
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  color:#EAF1EE;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* ===== Full-screen dark-pine door (matches Entra Company Branding) ===== */
  position:fixed;inset:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;
  background:#244039;
}
/* element resets scoped to the door (do NOT leak app-wide) */
.door, .door *{box-sizing:border-box;}
.door *{margin:0;padding:0;}

.door .stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;}

/* ===== Logo lockup (mark + wordmark) ===== */
.door .logo{display:flex;align-items:center;gap:20px;margin-bottom:46px;}
.door .markCircle{
  flex:0 0 auto;
  width:100px;height:100px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(190,230,218,.30);
}
.door .markCircle img{width:77px;height:auto;display:block;object-fit:contain;}
.door .word{
  font-family:'Bricolage Grotesque', Georgia, serif;font-weight:800;
  font-size:44px;line-height:.92;letter-spacing:-0.01em;
  text-align:left;color:#F4F8F6;text-transform:uppercase;
}

/* ===== LOGIN button (brand-pine pill) =====
   Mid gradient stop is single-sourced from the shared brand pine token. */
.door .msBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:13px;
  width:362px;max-width:100%;height:56px;padding:0 30px;
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  font-size:25px;font-weight:700;letter-spacing:.005em;
  color:#F6FAF8;cursor:pointer;
  border:1px solid rgba(190,230,218,.34);
  border-radius:999px;
  background:linear-gradient(180deg, #5C8B80 0%, var(--mh-green) 58%, #436E64 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 26px rgba(12,32,27,.45),
    0 0 0 0 rgba(120,180,162,0);
  transition:transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.door .msBtn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 14px 32px rgba(12,32,27,.5),
    0 0 30px rgba(120,180,162,.4);
}
.door .msBtn:active{transform:translateY(0);}
.door .msBtn:focus-visible{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 0 3px rgba(15,30,26,.6),0 0 0 5px rgba(160,210,196,.7);}

/* ===== Forgot password (right-aligned under the button) ===== */
.door .forgotRow{width:362px;max-width:100%;text-align:right;margin-top:14px;}
.door .forgot{
  color:#FFFFFF;
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  font-size:15px;font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
}
.door .forgot:hover{color:#D4E8E1;}

/* ===== Footer (SCOPED to .door - the unscoped global .foot previously leaked
   position:absolute into every .foot app-wide) ===== */
.door .foot{
  position:absolute;left:0;right:0;bottom:64px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;font-size:12.5px;letter-spacing:.04em;
  color:rgba(190,224,213,.50);
}
.door .foot strong{font-weight:600;font-size:17px;color:rgba(212,232,225,.66);}
.door .foot .shield{flex:0 0 auto;display:block;}
.door .copy{
  position:absolute;left:0;right:0;bottom:34px;z-index:2;
  text-align:center;font-size:12.5px;letter-spacing:.04em;
  color:rgba(190,224,213,.50);
}