/* FOX TERMINAL login v3 (2026-10-30). Loaded only by login.html, after style.css + fox-theme.css.
   >= 980px : compact Username / Password+Login sit on the banner's bottom strip, left of the FOX TERMINAL logo
              (free area x 0-448 of 1774, strip y 716-887); the orange pill (cleaned out of /brand/login-banner-clean-*)
              is a real Google sign-in button labelled "Discover Fox Terminal", where the artwork drew it.
   640-979px: banner with the pill on its strip; compact form centred below.
   < 640px  : banner, black strip extension with a full-size pill, then the compact form.
   Banner geometry (1774x887 source): strip starts at y=716 (80.72%); pill x 996-1412, y 758-840; logo x 448-949. */

body.page-login .login-wrap.login-v2 {
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 12px 8px;
  box-sizing: border-box;
}
body.page-login .login-stage {
  container-type: inline-size;
  container-name: foxstage;
  position: relative;
  width: min(1320px, 100%);
  max-width: 100%;
  margin: 0 auto;
}
body.page-login .login-v2 .login-banner {
  margin: 0;
  width: 100%;
  line-height: 0;
  background: #000;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 138, 31, 0.24);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 42px rgba(255, 122, 26, 0.16);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
html[data-theme="light"] body.page-login .login-v2 .login-banner {
  border-color: rgba(194, 65, 12, 0.2);
  box-shadow: 0 18px 44px rgba(10, 14, 23, 0.2), 0 0 30px rgba(255, 138, 31, 0.12);
}
body.page-login .login-v2 .login-banner picture,
body.page-login .login-v2 .login-banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1774 / 887;
  object-fit: contain;
}

/* ---------- Compact sign-in (stacked mode default) ---------- */
body.page-login .login-v2 .login-mini {
  box-sizing: border-box;
  width: min(380px, 100%);
  margin: 14px auto 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(9, 11, 18, 0.72);
  border: 1px solid rgba(255, 138, 31, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] body.page-login .login-v2 .login-mini {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(194, 65, 12, 0.24);
  box-shadow: 0 12px 30px rgba(10, 14, 23, 0.16);
}
body.page-login .login-v2 #login-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
body.page-login .login-v2 .login-mini-row { display: flex; gap: 8px; min-width: 0; }
body.page-login .login-v2 .login-mini-row #password { flex: 1 1 auto; min-width: 0; }
body.page-login .login-v2 #login-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  text-align: left;
  font-size: 14px;
  border-radius: 9px;
  background: rgba(4, 6, 11, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #eef1f7;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
body.page-login .login-v2 #login-form input::placeholder { color: #9aa2b3; }
body.page-login .login-v2 #login-form input:focus { outline: 2px solid rgba(255, 138, 31, 0.85); outline-offset: 0; border-color: transparent; }
body.page-login .login-v2 #login-btn {
  flex: 0 0 auto;
  min-height: 40px;
  min-width: 84px;
  margin: 0;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 9px;
}
body.page-login .login-v2 .login-error {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: #ff9a9a;
  text-align: left;
}
html[data-theme="light"] body.page-login .login-v2 #login-form input {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(120, 72, 30, 0.26);
  color: #161a24;
}
html[data-theme="light"] body.page-login .login-v2 #login-form input::placeholder { color: #727889; }
html[data-theme="light"] body.page-login .login-v2 .login-error { color: #c62828; }

/* ---------- Orange pill = Continue with Google (keeps the drawn "Discover Fox Terminal" look) ---------- */
body.page-login .login-v2 .login-cta-slot {
  position: absolute;
  z-index: 2;
  left: 56.14%;
  top: 90.08%;            /* of the banner height; overwritten below since the stage also holds the form */
  display: flex;
  align-items: center;
}
html[data-theme] body.page-login .login-v2 #google-login.google-login.login-btn,
body.page-login .login-v2 #google-login.google-login.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 1.1em;
  border: 0;
  border-radius: 0.95em;
  color: #111;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(180deg, #fd8b22 0%, #fc7a1d 48%, #fb5e14 100%);
  background-color: #fc741c;
  box-shadow: 0 0 0.9em rgba(255, 112, 24, 0.55), 0 0 0.2em rgba(255, 170, 60, 0.6), inset 0 1px 0 rgba(255, 220, 160, 0.45);
  filter: none;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
html[data-theme] body.page-login .login-v2 #google-login.google-login.login-btn:hover,
body.page-login .login-v2 #google-login.google-login.login-btn:hover {
  background: linear-gradient(180deg, #ff9a35 0%, #fd8526 48%, #fc6619 100%);
  color: #111;
  border: 0;
  filter: none;
  box-shadow: 0 0 1.3em rgba(255, 122, 26, 0.75), 0 0 0.25em rgba(255, 190, 90, 0.8), inset 0 1px 0 rgba(255, 230, 180, 0.55);
}
html[data-theme] body.page-login .login-v2 #google-login.google-login.login-btn:active,
body.page-login .login-v2 #google-login.google-login.login-btn:active { transform: translateY(1px); }
html[data-theme] body.page-login .login-v2 #google-login.google-login.login-btn:focus-visible,
body.page-login .login-v2 #google-login.google-login.login-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
body.page-login .login-v2 .fox-cta-g {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body.page-login .login-v2 #google-login .google-mark { width: 0.95em; height: 0.95em; flex: 0 0 0.95em; }

/* 640px+ : pill sits on the banner's bottom strip, where the artwork drew it. The stage height includes the form in
   stacked mode, so the slot is positioned against the banner's own width (banner height = 50% of stage width). */
@media (min-width: 640px) {
  body.page-login .login-v2 .login-cta-slot {
    top: calc(100cqw * 0.5 * 0.9008);
    transform: translateY(-50%);
    width: max(23.45cqw, min(40cqw, 300px));
    height: max(calc(100cqw * 0.5 * 0.0924), 42px);
    font-size: max(14px, 1.42cqw);
  }
}

/* < 640px : black strip extension under the banner with a full-size pill, then the form */
@media (max-width: 639.98px) {
  body.page-login .login-wrap.login-v2 { padding-left: 0; padding-right: 0; }
  body.page-login .login-stage { display: flex; flex-direction: column; }
  body.page-login .login-v2 .login-banner { order: 1; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: none; }
  body.page-login .login-v2 .login-cta-slot {
    order: 2;
    position: static;
    justify-content: center;
    background: #000;
    padding: 4px 14px 16px;
    border-radius: 0 0 14px 14px;
    border: 1px solid rgba(255, 138, 31, 0.24);
    border-top: 0;
    font-size: 15px;
  }
  html[data-theme="light"] body.page-login .login-v2 .login-cta-slot { border-color: rgba(194, 65, 12, 0.2); }
  html[data-theme] body.page-login .login-v2 .login-cta-slot #google-login.google-login.login-btn,
  body.page-login .login-v2 .login-cta-slot #google-login.google-login.login-btn { height: 46px; max-width: 340px; }
  body.page-login .login-v2 .login-mini { order: 3; width: 100%; max-width: 380px; }
}

/* 640-979px : pill stays on the banner strip; form centred under the banner */
@media (min-width: 640px) and (max-width: 979.98px) {
  body.page-login .login-v2 .login-mini { width: min(420px, 100%); }
}

/* >= 980px : one composition. Form overlaid on the strip's empty left part (x 2.1%-23.9%), vertically centred on it. */
@media (min-width: 980px) {
  body.page-login .login-wrap.login-v2 { padding: 28px clamp(16px, 3vw, 48px) 8px; }
  body.page-login .login-v2 .login-mini {
    position: absolute;
    z-index: 2;
    margin: 0;
    padding: 0;
    left: 2.1cqw;
    width: 21.6cqw;
    top: calc(100cqw * 0.5 * 0.9036);
    transform: translateY(-50%);
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  html[data-theme="light"] body.page-login .login-v2 .login-mini { background: none; border: 0; box-shadow: none; }
  body.page-login .login-v2 #login-form { gap: clamp(6px, 0.6cqw, 9px); }
  body.page-login .login-v2 .login-mini-row { gap: clamp(6px, 0.6cqw, 9px); }
  body.page-login .login-v2 #login-form input,
  body.page-login .login-v2 #login-btn {
    min-height: clamp(30px, 3cqw, 40px);
    height: clamp(30px, 3cqw, 40px);
    font-size: clamp(12.5px, 1.05cqw, 14px);
    border-radius: clamp(7px, 0.7cqw, 10px);
  }
  body.page-login .login-v2 #login-btn { min-width: 0; width: 31%; padding: 0 8px; }
  /* the strip is always black artwork: keep the fields dark-glass in both themes so they sit in the art */
  html[data-theme="light"] body.page-login .login-v2 #login-form input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #f3f5f9;
  }
  html[data-theme="light"] body.page-login .login-v2 #login-form input::placeholder { color: #a6adbb; }
  /* error: small chip just above the fields, over panel 1's lower-left */
  body.page-login .login-v2 .login-error {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    margin: 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    color: #ffd6d6;
    background: rgba(120, 16, 16, 0.86);
    border: 1px solid rgba(255, 120, 120, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }
  html[data-theme="light"] body.page-login .login-v2 .login-error { color: #ffe3e3; }
}

/* Right arrow after "Discover Fox Terminal" (like the drawn pill's arrow); nudges right on hover. All breakpoints. */
body.page-login .login-v2 #google-login .fox-cta-arrow {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.15em;
  color: currentColor;
  transition: transform 0.18s ease;
}
body.page-login .login-v2 #google-login:hover .fox-cta-arrow,
body.page-login .login-v2 #google-login:focus-visible .fox-cta-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  body.page-login .login-v2 #google-login .fox-cta-arrow { transition: none; }
}