/* Prem Staff Portal — sign-in page.
   The photo is the page. Everything else is one quiet white panel and a
   footer line that tells you who to email if you cannot get in. */

:root{
  --ink:#1A2420;
  --muted:#5F6E65;
  --green:#1E5A3A;
  --green-deep:#14382A;
  --accent:#41A949;
  --gold:#DCB042;
  --gold-ink:#6B4E0A;
  --problem:#8A2E1F;
  --font:'Montserrat','Segoe UI',Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%;}
body{
  min-height:100dvh;
  display:grid;
  grid-template-rows:1fr auto auto;
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:var(--green-deep);
  -webkit-font-smoothing:antialiased;
}

/* ---------- the campus ---------- */
.scene{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--green-deep);}
.scene-photo{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
  background-size:cover; background-position:50% 42%;
}
.scene-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,56,42,.12) 0%, rgba(20,56,42,0) 30%, rgba(20,56,42,.62) 100%);
}

/* ---------- the panel ---------- */
.panel{
  position:relative; z-index:1;
  width:min(400px, calc(100% - 32px));
  justify-self:center; align-self:center;
  margin:48px 0 24px;
  padding:36px 36px 30px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 30px 70px -28px rgba(8,28,18,.6), 0 1px 0 rgba(255,255,255,.6) inset;
  text-align:center;
}
.crest{display:block; width:72px; height:auto; margin:0 auto 18px;}
h1{
  margin:0 0 8px;
  font-size:26px; font-weight:700; line-height:1.15; letter-spacing:-.015em;
}
.lede{margin:0 0 26px; color:var(--muted); font-size:15px; font-weight:500;}

.google-slot{display:flex; justify-content:center; min-height:44px;}
.status{min-height:1.2em; margin:12px 0 0; font-size:13px; color:var(--muted);}
.status.is-problem{color:var(--problem); font-weight:600;}

.error{
  margin:18px 0 0; padding:12px 14px;
  border-radius:10px; border-left:3px solid var(--gold);
  background:#F8ECC4; color:var(--gold-ink);
  font-size:13.5px; font-weight:600; line-height:1.45; text-align:left;
}

/* ---------- the footer line ---------- */
.foot{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  padding:18px 24px 20px;
  color:rgba(255,255,255,.92);
  font-size:13px; font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.foot a{color:#fff; font-weight:600; text-underline-offset:3px;}

.proud-band{
  position:relative; z-index:1;
  background:#234635; color:#fff; text-align:center; padding:14px 16px;
  font-weight:700; font-size:15px; letter-spacing:.14em;
}

/* ---------- a11y and motion ---------- */
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px;}
@media (prefers-reduced-motion: no-preference){
  .panel{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;}
  @keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .scene-photo{object-position:36% 50%; background-position:36% 50%;}
  .panel{width:calc(100% - 28px); margin:36px 0 20px; padding:30px 24px 26px;}
  h1{font-size:23px;}
  .foot{flex-direction:column; align-items:center; text-align:center; gap:4px;}
}