/* ---------- login / admin (unchanged legacy palette) ---------- */
/* Centred with auto margins on the child rather than align/justify-content:
   when the card is taller than the viewport, centre-alignment overflows in
   BOTH directions and the top of the card gets clipped out of the scroll
   range. Auto margins collapse to 0 in that case, so the top stays reachable. */
.login-wrap{min-height:100dvh;display:flex;padding:24px}
.login-wrap > *{margin:auto}
/* Own its background rather than inheriting the body's: the body goes dark
   from the tablet breakpoint up, and this screen's card is a translucent
   white built for the light page. */
#pendingScreen{background:var(--paper)}
.login-card{
  width:min(100%,360px);background:rgba(255,255,255,.75);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);border-radius:26px;padding:28px 24px;
  box-shadow:0 30px 60px rgba(15,12,27,.18);
}
.login-card h1{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.01em;font-weight:400;margin:0 0 6px}
.login-card .hint{margin:0 0 20px}
.login-err{color:#b91c1c;font-size:13px;margin:-8px 0 14px;line-height:1.4}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-logo{display:block;height:40px;width:auto;margin:0 0 18px}

/* ---------- login screen: "Shift Card" redesign (scoped, #loginScreen only) ---------- */
#loginScreen.login-wrap{background:var(--sc-bg);overflow-y:auto;padding:48px 24px}
#loginScreen .sc-col{width:min(100%,400px);margin:auto}
#loginScreen .sc-header{text-align:center;margin-bottom:28px}
#loginScreen .sc-icon{
  width:96px;height:96px;border-radius:20px;background:var(--sc-card);overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  box-shadow:0 12px 26px rgba(143,168,136,.4);
}
#loginScreen .sc-icon img{width:100%;height:100%;object-fit:cover}
#loginScreen .sc-title{font-family:var(--sc-serif);font-weight:700;font-size:34px;color:var(--sc-green-dark);margin:0 0 10px;letter-spacing:.01em}
#loginScreen .sc-subtitle{font-family:var(--body);color:var(--sc-muted);font-size:15px;margin:0}

#loginScreen .login-card{
  width:auto;background:var(--sc-card);border:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:26px;padding:32px 28px;box-shadow:0 20px 50px rgba(60,50,30,.1);
}
#loginScreen .login-err{text-align:center;margin:0 0 16px}

#loginScreen .sc-fld{display:block;margin-bottom:20px}
#loginScreen .sc-fld > span,#loginScreen .sc-fld-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--body);font-size:14px;color:var(--sc-ink);font-weight:500;margin-bottom:8px;
}
#loginScreen .sc-input-wrap{position:relative}
/* 16px, not 15px: iOS Safari zooms the whole page in on focus for any field
   under 16px, and the user then has to pinch back out to reach Sign in. */
#loginScreen input[type=email],#loginScreen input[type=password],
#loginScreen input[type=text],#loginScreen input[type=tel]{
  width:100%;font-family:var(--body);font-size:16px;padding:15px 44px 15px 16px;
  border:1px solid transparent;border-radius:14px;background:var(--sc-input);color:var(--sc-ink);
}
#loginScreen input::placeholder{color:#A79E8C}
#loginScreen input:focus{outline:2px solid var(--sc-green);outline-offset:1px;background:#fff}
#loginScreen .sc-input-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#A79E8C;pointer-events:none}

#loginScreen .sc-link{background:none;border:0;padding:0;font-family:var(--body);font-size:13px;font-weight:600;color:var(--sc-green);cursor:pointer;text-decoration:none}
#loginScreen .sc-link:hover{text-decoration:underline}

#loginScreen .sc-check{display:flex;align-items:center;gap:10px;margin:4px 0 22px;cursor:pointer;font-family:var(--body);font-size:14px;color:var(--sc-ink)}
#loginScreen .sc-check input{position:absolute;opacity:0;width:18px;height:18px;margin:0}
#loginScreen .sc-check-box{
  width:18px;height:18px;border-radius:50%;border:1.5px solid #C9C1AE;flex:none;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease;
}
#loginScreen .sc-check input:checked + .sc-check-box{background:var(--sc-green);border-color:var(--sc-green)}
#loginScreen .sc-check input:checked + .sc-check-box::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
#loginScreen .sc-check input:focus-visible + .sc-check-box{outline:2px solid var(--sc-green);outline-offset:2px}

#loginScreen .sc-btn-go{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--sc-green);color:#fff;border:0;border-radius:16px;padding:17px 16px;
  font-family:var(--body);font-weight:600;font-size:16px;cursor:pointer;
  transition:transform .12s ease,background .2s ease;
}
#loginScreen .sc-btn-go:hover{background:var(--sc-green-dark)}
#loginScreen .sc-btn-go:active{transform:scale(.985)}
#loginScreen .sc-btn-go svg{width:18px;height:18px}
#loginScreen .sc-btn-go[disabled]{opacity:.5;cursor:not-allowed}

#loginScreen .sc-divider{display:flex;align-items:center;gap:14px;margin:26px 0 18px;color:#A79E8C;font-size:11px;letter-spacing:.14em;font-family:var(--body);font-weight:600}
#loginScreen .sc-divider::before,#loginScreen .sc-divider::after{content:"";flex:1;height:1px;background:#E4DECD}

#loginScreen .sc-btn-oauth{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--sc-input);color:var(--sc-ink);border:0;border-radius:14px;padding:14px 16px;
  font-family:var(--body);font-weight:600;font-size:15px;cursor:pointer;transition:background .15s ease;
}
#loginScreen .sc-btn-oauth:hover{background:#E2D9C4}
#loginScreen .sc-btn-oauth[disabled]{opacity:.5;cursor:not-allowed}
#loginScreen .sc-btn-oauth svg{width:20px;height:20px;flex:none}

#loginScreen .sc-switch{text-align:center;margin:24px 0 0;font-family:var(--body);font-size:14px;color:var(--sc-ink)}
#loginScreen .sc-link-strong{background:none;border:0;padding:0;font-family:var(--body);font-weight:700;font-size:14px;color:var(--sc-green);cursor:pointer}
#loginScreen .sc-link-strong:hover{text-decoration:underline}

#loginScreen .sc-footer{text-align:center;margin-top:36px}
#loginScreen .sc-footer-link{font-family:var(--body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sc-footer);text-decoration:none;margin:0 10px}
#loginScreen a.sc-footer-link:hover{color:var(--sc-green)}
#loginScreen .sc-copyright{margin:14px 0 0;font-size:12px;color:#C4BCA9;font-family:var(--body)}

/* ---------- email verification step: the same signup form's last screen,
   so it keeps the redesign's palette rather than dropping to the plain
   pendingScreen look it hands off to next ---------- */
#verifyScreen.login-wrap{background:var(--sc-bg);overflow-y:auto;padding:48px 24px}
#verifyScreen .login-card{
  width:min(100%,400px);background:var(--sc-card);border:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:26px;padding:32px 28px;box-shadow:0 20px 50px rgba(60,50,30,.1);
}
#verifyScreen h1{font-family:var(--sc-serif);font-weight:700;font-size:26px;color:var(--sc-green-dark);margin:0 0 10px;letter-spacing:.01em}
#verifyScreen .hint{font-family:var(--body);color:var(--sc-muted);font-size:15px;margin:0 0 22px;line-height:1.5}
#verifyScreen .login-err{text-align:left;margin:-8px 0 16px;font-family:var(--body)}
#verifyScreen .fld{display:block;margin-bottom:20px}
#verifyScreen .fld > span{display:block;font-family:var(--body);font-size:14px;color:var(--sc-ink);font-weight:500;margin-bottom:8px}
#verifyScreen input{
  width:100%;font-family:var(--mono);font-size:22px;letter-spacing:.35em;text-align:center;
  padding:15px 12px;border:1px solid transparent;border-radius:14px;background:var(--sc-input);color:var(--sc-ink);
}
#verifyScreen input::placeholder{color:#A79E8C;letter-spacing:.35em}
#verifyScreen input:focus{outline:2px solid var(--sc-green);outline-offset:1px;background:#fff}
#verifyScreen .sc-btn-go{
  width:100%;background:var(--sc-green);color:#fff;border:0;border-radius:16px;padding:17px 16px;
  font-family:var(--body);font-weight:600;font-size:16px;cursor:pointer;
  transition:transform .12s ease,background .2s ease;
}
#verifyScreen .sc-btn-go:hover{background:var(--sc-green-dark)}
#verifyScreen .sc-btn-go:active{transform:scale(.985)}
#verifyScreen .sc-btn-go[disabled]{opacity:.5;cursor:not-allowed}
#verifyScreen .sc-link{
  display:block;width:100%;text-align:center;background:none;border:0;padding:0;margin-top:18px;
  font-family:var(--body);font-size:13px;font-weight:600;color:var(--sc-green);cursor:pointer;
}
#verifyScreen .sc-link:hover{text-decoration:underline}
#verifyScreen .verify-signout{display:block;margin:14px auto 0}

/* ---------- squircle corners (superellipse, progressive enhancement) ----------
   50%-radius circles (.sc-check-box + its dot) are left alone on purpose -
   see the token comment in base.css for why. */
@supports (corner-shape:superellipse(1)){
  .login-card,#loginScreen .login-card,#verifyScreen .login-card{corner-shape:var(--squircle-xl)}
  #loginScreen .sc-icon{corner-shape:var(--squircle-lg)}
  #loginScreen input[type=email],#loginScreen input[type=password],
  #loginScreen input[type=text],#loginScreen input[type=tel],
  #verifyScreen input,
  #loginScreen .sc-btn-go,#loginScreen .sc-btn-oauth,#verifyScreen .sc-btn-go{corner-shape:var(--squircle-sm)}
}