/* Sign-in page. Uses the shared tokens in skclub.css; the club logo and name
   sit once, in the top bar (base.html). */
.sk-login {
  --sk-login-black: #0d1412;
  --sk-login-gold: #d6b35a;
  max-width: 26rem;
  margin: clamp(.75rem, 5vw, 3rem) auto 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.sk-login .sk-login-head h1 { margin: 0 0 .2rem; font-size: 1.45rem; font-weight: 800; color: var(--sk-ink); }
.sk-login-head p { margin: 0; color: var(--sk-muted); }

.sk-login-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.05rem;
  padding: clamp(1.15rem, 4vw, 1.6rem);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow);
}
.sk-login-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; min-width: 0; }
.sk-login-field label { font-weight: 600; font-size: .9rem; color: var(--sk-ink); margin: 0; }
.sk-login-labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sk-login-labelrow a { font-size: .85rem; font-weight: 600; color: var(--sk-green-ink); text-decoration: none; }

.sk-login-input {
  position: relative; display: flex; align-items: center;
  border: 1.5px solid var(--sk-border); border-radius: 12px; background: #fbfdfc;
  transition: border-color .15s, box-shadow .15s;
}
.sk-login-input:focus-within { border-color: var(--sk-green); box-shadow: 0 0 0 4px var(--sk-green-soft); background: #fff; }
.sk-login-input > i { position: absolute; left: .95rem; color: var(--sk-muted); pointer-events: none; }
.sk-login-input input {
  flex: 1; min-width: 0; height: 3.1rem; padding: 0 .9rem 0 2.6rem;
  border: 0; background: transparent; outline: none;
  font-size: 1rem; /* 16px+ stops iOS zooming into the field */
  color: var(--sk-ink);
}
.sk-login-input input::placeholder { color: #9aaba7; }
.sk-login-reveal {
  flex: none; width: 3rem; height: 3.1rem; border: 0; background: transparent;
  color: var(--sk-muted); border-radius: 0 12px 12px 0;
}
.sk-login-reveal:focus-visible { outline: 2px solid var(--sk-green); outline-offset: -4px; }

.sk-login-submit {
  height: 3.2rem; border: 0; border-radius: 12px;
  background: var(--sk-green); color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(7, 132, 88, .25);
}
.sk-login-submit:hover { background: var(--sk-green-strong); }
.sk-login-submit:focus-visible { outline: 3px solid var(--sk-green-soft); outline-offset: 2px; }
.sk-login-submit:disabled { opacity: .75; }

.sk-login-or { display: flex; align-items: center; gap: .75rem; color: var(--sk-muted); font-size: .8rem; margin-bottom: .9rem; }
.sk-login-or::before, .sk-login-or::after { content: ""; flex: 1; height: 1px; background: var(--sk-border); }
.sk-login-faceid {
  width: 100%; height: 3.1rem; display: flex; align-items: center; justify-content: center; gap: .6rem;
  border-radius: 12px; border: 1.5px solid #2a3532;
  background: var(--sk-login-black); color: #fff; font-weight: 700; font-size: 1rem;
}
.sk-login-faceid svg { width: 1.35rem; height: 1.35rem; color: var(--sk-login-gold); flex: none; }
.sk-login-faceid:focus-visible { outline: 3px solid rgba(214, 179, 90, .5); outline-offset: 2px; }
.sk-login-message { margin: 0; text-align: center; font-size: .88rem; color: var(--sk-amber); }

.sk-login-foot { margin: 0; text-align: center; font-size: .85rem; color: var(--sk-muted); line-height: 1.6; }
.sk-login-foot a { color: var(--sk-green-ink); font-weight: 600; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .sk-login-input { transition: none; } }

/* Demo site only (DEMO_MODE=1) */
.sk-login-demo { padding: 1rem 1.1rem; border: 1.5px dashed var(--sk-login-gold); border-radius: var(--sk-radius); background: #fffaf0; }
.sk-login .sk-login-demo h2 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 800; }
.sk-login-demo p { margin: 0 0 .7rem; color: var(--sk-muted); font-size: .88rem; }
.sk-login-demo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; }
.sk-login-demo-pick { display: grid; gap: .1rem; text-align: left; padding: .6rem .7rem; border-radius: 10px;
  border: 1px solid var(--sk-border); background: var(--sk-surface); color: var(--sk-ink); }
.sk-login-demo-pick small { color: var(--sk-muted); }
.sk-login-demo-pick:hover, .sk-login-demo-pick:focus-visible { border-color: var(--sk-green); outline: none; }
.sk-login-demo-list form { display: grid; }