/* css/login.css — Option F "Giant wheel" sign-in page
   Built from the approved mockup. Every size below is the mockup's pixel
   value multiplied by --s, so the composition scales up on large screens
   without changing proportions. Used only by auth/login.php. */

:root {
  --s: 1;
  --paper: #f6efe0;
  --ink: #1c2a14;
  --green: #3d8a24;
  --green-dark: #1f4d14;
  --green-link: #2e7a1a;
  --muted: #4b5a3f;
  --placeholder: #7b8070;
  --card-line: #e3ded0;
  --field: #f7f4ee;
  --field-line: #d9d4c7;
  --red: #b42318;
  --serif: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (min-width: 1100px) { :root { --s: 1.2; } }
@media (min-width: 1400px) { :root { --s: 1.4; } }
/* Only the biggest, tallest screens get the largest size, so the wheel never outgrows the window */
@media (min-width: 1800px) and (min-height: 960px) { :root { --s: 1.6; } }
/* On short screens keep the wheel from dominating */
@media (min-width: 1100px) and (max-height: 700px) { :root { --s: 1.05; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.login {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100svh;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Tabler icons are inline SVG sized to the surrounding text, like the icon font. */
.ti { width: 1em; height: 1em; flex: none; }

/* ── Stage ───────────────────────────────────────────────────── */
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(140px * var(--s));
  padding: calc(96px * var(--s)) calc(34px * var(--s)) calc(64px * var(--s));
  background: var(--paper);
  overflow: hidden;
}

/* ── Brand (top left) ────────────────────────────────────────── */
.brand {
  position: absolute;
  left: calc(34px * var(--s)); top: calc(36px * var(--s));
  display: flex; align-items: center; gap: calc(8px * var(--s));
  font-size: calc(15px * var(--s)); font-weight: 500;
  color: var(--ink); text-decoration: none;
  z-index: 2;
}
/* ── Back to the landing page (top right) ───────────────────── */
.back-home {
  position: absolute;
  right: calc(34px * var(--s)); top: calc(36px * var(--s));
  display: inline-flex; align-items: center; gap: calc(7px * var(--s));
  font-size: calc(14px * var(--s)); font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: calc(8px * var(--s)) calc(16px * var(--s));
  border: 1px solid rgba(24, 31, 16, .18); border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  z-index: 3;
  transition: background .2s, border-color .2s, color .2s;
}
.back-home .ti { transition: transform .2s; }
.back-home:hover { background: #fff; border-color: var(--green); color: var(--green); }
.back-home:hover .ti { transform: translateX(-3px); }

.brand-mark {
  width: calc(28px * var(--s)); height: calc(28px * var(--s));
  border-radius: calc(8px * var(--s));
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ── Pitch (left) ────────────────────────────────────────────── */
.pitch { max-width: calc(300px * var(--s)); position: relative; z-index: 2; }
.pitch-title {
  font-family: var(--serif);
  font-size: calc(54px * var(--s));
  line-height: 1;
  font-weight: 500;
}
.pitch-title span { display: block; }
.pitch-title .accent { color: var(--green); }
.pitch-sub {
  font-size: calc(13px * var(--s)); line-height: 1.5; color: var(--muted);
  margin: calc(14px * var(--s)) 0 calc(12px * var(--s));
  max-width: calc(240px * var(--s));
}
.tag {
  display: inline-flex; align-items: center; gap: calc(6px * var(--s));
  font-size: calc(11px * var(--s));
  background: var(--green-dark); color: #e3f1d6;
  padding: calc(5px * var(--s)) calc(11px * var(--s));
  border-radius: 99px;
}

/* ── Card zone (right): card on top, wheel centred behind it ─── */
.zone {
  position: relative;
  flex: none;
  width: calc(270px * var(--s));
}
.wheel {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(560px * var(--s)); height: calc(560px * var(--s));
  margin: calc(-280px * var(--s)) 0 0 calc(-280px * var(--s));
  z-index: 0;
  pointer-events: none;
}
.rot {
  transform-box: fill-box;
  transform-origin: center;
  animation: sp 70s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

.card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: calc(8px * var(--s));
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: calc(14px * var(--s));
  padding: calc(18px * var(--s)) calc(20px * var(--s));
}
.card-title {
  font-family: var(--serif);
  font-size: calc(21px * var(--s)); font-weight: 500;
  color: var(--ink);
}
.card-form { display: flex; flex-direction: column; gap: calc(8px * var(--s)); }

/* ── Fields (Google button, email, password share one look) ──── */
.f {
  display: flex; align-items: center; gap: calc(8px * var(--s));
  height: calc(36px * var(--s));
  padding: 0 calc(10px * var(--s));
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: calc(8px * var(--s));
  font-size: calc(12px * var(--s));
  color: var(--placeholder);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.g-logo { width: 1.5em; height: 1.5em; }
.f--google { justify-content: center; color: var(--ink); font-weight: 500; }
.f--google:hover { background: #fff; border-color: var(--green); }
.f input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--ink);
}
.f input::placeholder { color: var(--placeholder); opacity: 1; }
.f:focus-within { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(134, 185, 59, .28); }
.f:has(input[aria-invalid="true"]) { border-color: var(--red); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

.eye {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: calc(6px * var(--s));
  padding: calc(3px * var(--s));
  color: var(--placeholder); font-size: inherit; cursor: pointer;
}
.eye:hover { color: var(--green); }
.eye .eye-off { display: none; }
.eye[aria-pressed="true"] .eye-on { display: none; }
.eye[aria-pressed="true"] .eye-off { display: flex; }
.eye span { display: flex; }

.field-msg { margin-top: calc(4px * var(--s)); font-size: calc(11px * var(--s)); font-weight: 500; color: var(--red); }

/* ── Submit ──────────────────────────────────────────────────── */
.btn-submit {
  height: calc(38px * var(--s));
  border: 0; border-radius: calc(8px * var(--s));
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--s));
  font-family: inherit; font-size: calc(13px * var(--s)); font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.btn-submit:hover { background: var(--green-link); }
.btn-submit.is-loading { pointer-events: none; opacity: .85; }
.btn-submit.is-loading .ti { animation: ride 1s linear infinite; }
@keyframes ride { 0% { transform: translateX(-3px); opacity: .25; } 50% { opacity: 1; } 100% { transform: translateX(4px); opacity: .25; } }

/* ── Links row ───────────────────────────────────────────────── */
.card-links {
  display: flex; justify-content: space-between;
  font-size: calc(11px * var(--s)); color: var(--green-link);
}
.card-links a { color: inherit; text-decoration: none; }
.card-links a:hover { text-decoration: underline; }
.forgot-note { font-size: calc(11px * var(--s)); line-height: 1.45; color: var(--muted); }
.forgot-note[hidden], .field-msg[hidden] { display: none; }

/* ── Error alert (server messages) ───────────────────────────── */
.alert {
  background: #fdecea; color: var(--red);
  border: 1px solid #f3b8b1; border-radius: calc(8px * var(--s));
  padding: calc(8px * var(--s)) calc(10px * var(--s));
  font-size: calc(12px * var(--s)); line-height: 1.4; font-weight: 500;
}

/* ── Credit (bottom left) ────────────────────────────────────── */
.credit {
  position: absolute;
  left: calc(34px * var(--s)); bottom: calc(18px * var(--s));
  display: flex; align-items: center; gap: calc(8px * var(--s));
  font-size: calc(11px * var(--s)); color: var(--muted);
  z-index: 2;
}
.credit img { height: calc(20px * var(--s)); width: auto; opacity: .8; }

/* ── Page hand-off + entrance ────────────────────────────────────
   The landing page fades out, this page fades in, then each part eases
   in (opacity + transform only, so it stays on the GPU and never jitters).
   The sequence starts once fonts are ready (js/login.js adds .ready). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn .4s cubic-bezier(0, 0, .2, 1) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }

:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

@keyframes rise   { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wheelIn { from { opacity: 0; transform: scale(.9) rotate(-14deg); } to { opacity: 1; transform: none; } }

.rise    { animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
.card-in { animation: cardIn .8s var(--ease-out) both; animation-delay: .22s; }
.wheel-in { animation: wheelIn 1.1s var(--ease-out) both; animation-delay: .05s; }

/* Hold everything invisible (paused) until fonts are ready; without JS nothing is held */
html.js:not(.ready) .rise,
html.js:not(.ready) .card-in,
html.js:not(.ready) .wheel-in { animation-play-state: paused; }

/* ── Keyboard focus ──────────────────────────────────────────── */
.brand:focus-visible, .back-home:focus-visible, .btn-submit:focus-visible, .eye:focus-visible,
.card-links a:focus-visible, .f--google:focus-visible {
  outline: 3px solid #86B93B; outline-offset: 2px;
}

/* ── Phones and small tablets: stack, wheel still bleeds right ─ */
@media (max-width: 820px) {
  :root { --s: 1; }
  /* One screen: pitch on top, card (with the whole wheel behind it) below, credit pinned to the bottom */
  .stage {
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: clamp(26px, 5svh, 46px);
    padding: 68px 22px 52px;
  }
  .brand { left: 22px; top: 22px; }
  .back-home { right: 22px; top: 20px; font-size: 13px; padding: 7px 13px; gap: 6px; }
  .pitch { max-width: none; }
  .pitch-title { font-size: clamp(30px, 9.5vw, 42px); }
  .pitch-title span { display: inline-block; }
  .pitch-sub { max-width: 420px; font-size: 14px; margin: 10px 0 12px; }
  .tag { font-size: 12px; }
  /* Same wheel placement as before (hub toward the right, bleeding off the screen edge),
     but never clipped at the top or bottom: the gaps above and below the card hold the rim */
  .zone { width: 100%; max-width: 330px; margin: 0 auto; }
  .wheel { left: 80%; width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .card { padding: 16px 18px; gap: 10px; }
  .card-form { gap: 10px; }
  /* 16px stops iOS Safari zooming the page when a field is focused */
  .f { height: 42px; font-size: 16px; }
  .btn-submit { height: 44px; font-size: 15px; }
  .card-links, .forgot-note, .field-msg { font-size: 13px; }
  .alert { font-size: 14px; }
  .credit { left: 22px; bottom: 14px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .card-in, .wheel-in { animation: none; }
  .back-home, .back-home .ti { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01s; }
  .rot { animation: none; }
  .btn-submit.is-loading .ti { animation: none; }
  .f, .btn-submit { transition: none; }
}