/* ============================================================
   LOG IN — one centred column under the site's bar.

   Built from what the site already has, not from a sign-in kit: the heading
   in the UI face at the weight of the dropdown panel's links, the grey
   pill (ink 8% over the ground) of the All campaigns search and filters for
   the providers and the fields, and the filled ink pill with the purple
   hover of Log in and the landing page's buttons for the one action.
   It follows the visitor's light or dark like every page.
   ============================================================ */
.lg-page{
  --lg-fill:color-mix(in srgb, var(--ink) 8%, var(--ground));
  --lg-fill-hi:color-mix(in srgb, var(--ink) 13%, var(--ground));
  --lg-err:#C42B1C;
}
.lg-page[data-world="black"]{--lg-err:#FF7A6B}
/* this is the Log in page: the bar's Log in pill would be a link to here */
.lg-page .bar-login{visibility:hidden}

.lg{
  display:flex; justify-content:center;
  min-height:calc(100svh - 5.6rem); box-sizing:border-box;
  padding:clamp(4rem, 11vh, 12rem) var(--shell-pad) calc(8rem + env(safe-area-inset-bottom, 0px));
}
.lg-box{width:min(100%, 44rem)}

.lg-h{
  margin:0; outline:none;
  font-family:var(--face-ui); font-weight:600; font-size:clamp(4.4rem, 7vw, 6rem);
  line-height:1; letter-spacing:-0.02em; color:var(--ink);
  text-wrap:balance;
}
.lg-sub{
  margin:1.2rem 0 3.6rem;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500; line-height:1.4; color:var(--soft);
}
.lg-sub [hidden]{display:none}
.lg-swap{
  padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:600; color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.28em;
  text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);
  transition:text-decoration-color var(--speed) var(--easing);
}
.lg-swap:hover,.lg-swap:focus-visible{text-decoration-color:var(--ink); outline:none}

/* the providers */
.lg-prov{display:grid; gap:1rem}
.lg-pbtn{
  display:flex; align-items:center; justify-content:center; gap:1.2rem;
  width:100%; height:5.6rem; padding:0 2rem; border:0; border-radius:999px;
  background:var(--lg-fill); color:var(--ink); cursor:pointer;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:600; letter-spacing:-0.005em;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--speed) var(--easing), transform var(--speed) var(--power3-out);
}
.lg-pbtn svg{flex:none; width:2rem; height:2rem}
.lg-pbtn .lg-apple{width:2.1rem; height:2.1rem; margin-top:-.2rem; fill:currentColor}
.lg-pbtn:hover{background:var(--lg-fill-hi)}
.lg-pbtn:active{transform:scale(.985)}
.lg-pbtn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.lg-or{
  display:flex; align-items:center; gap:1.4rem; margin:2.8rem 0;
  font-family:var(--face-ui); font-size:1.35rem; font-weight:500; color:var(--soft);
}
.lg-or::before,.lg-or::after{content:""; flex:1; height:1px; background:color-mix(in srgb, var(--ink) 14%, transparent)}

/* the fields */
.lg-field{margin-bottom:1.8rem}
.lg-row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.8rem}
.lg-row label{font-family:var(--face-ui); font-size:1.45rem; font-weight:600; color:var(--ink)}
.lg-forgot{
  padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--face-ui); font-size:1.4rem; font-weight:500; color:var(--soft);
  transition:color var(--speed) var(--easing);
}
.lg-forgot:hover,.lg-forgot:focus-visible{color:var(--ink); outline:none; text-decoration:underline; text-underline-offset:.28em}
.lg-hint{font-family:var(--face-ui); font-size:1.35rem; font-weight:500; color:var(--soft)}
.lg-row [hidden]{display:none}

.lg-field input{
  display:block; width:100%; height:5.6rem; box-sizing:border-box; margin:0;
  padding:0 1.8rem; border:0; border-radius:1.6rem;
  background:var(--lg-fill); color:var(--ink); caret-color:var(--spark);
  -webkit-appearance:none; appearance:none;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500;
  transition:background var(--speed) var(--easing), box-shadow var(--speed) var(--easing);
}
.lg-field input:hover{background:var(--lg-fill-hi)}
.lg-field input:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--ink)}
.lg-field input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--lg-err)}
.lg-field input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:inset 0 0 0 4rem var(--lg-fill);
}

.lg-pw{position:relative}
.lg-pw input{padding-right:8.4rem}
.lg-show{
  position:absolute; right:.8rem; top:50%; translate:0 -50%;
  height:4rem; padding:0 1.2rem; border:0; border-radius:999px; background:none; cursor:pointer;
  font-family:var(--face-ui); font-size:1.4rem; font-weight:600; color:var(--soft);
  transition:color var(--speed) var(--easing), background var(--speed) var(--easing);
}
.lg-show:hover{color:var(--ink); background:var(--lg-fill-hi)}
.lg-show:focus-visible{color:var(--ink); outline:2px solid var(--ink); outline-offset:-2px}

.lg-err{
  margin:.8rem 0 0; font-family:var(--face-ui); font-size:1.4rem; font-weight:500; line-height:1.35; color:var(--lg-err);
}
.lg-err[hidden]{display:none}

/* the name field opens in place when the page turns to Create an account */
.lg-reveal{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--speed-slow) var(--power3-out)}
.lg-reveal_in{min-height:0; overflow:hidden}
.lg-reveal .lg-field{opacity:0; transition:opacity var(--speed) var(--easing)}
.lg-page.is-create .lg-reveal{grid-template-rows:1fr}
.lg-page.is-create .lg-reveal .lg-field{opacity:1; transition-delay:.12s}

/* the action */
.lg-go{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:5.6rem; margin-top:2.8rem; border:0; border-radius:999px;
  background:var(--ink); color:var(--ground); cursor:pointer;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:600;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing), transform var(--speed) var(--power3-out);
}
.lg-go:hover,.lg-go:focus-visible{background:#6E60EE; color:#fff; outline:none}
.lg-go:active{transform:scale(.985)}
.lg-status{
  margin:1.4rem 0 0; min-height:2rem; text-align:center;
  font-family:var(--face-ui); font-size:1.45rem; font-weight:500; line-height:1.4; color:var(--ink);
}
.lg-fine{
  margin:2.4rem 0 0; text-align:center;
  font-family:var(--face-ui); font-size:1.35rem; line-height:1.5; color:var(--soft);
}
.lg-fine[hidden]{display:none}
.lg-fine a{color:var(--ink); text-decoration:underline; text-underline-offset:.24em; text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent)}
.lg-fine a:hover{text-decoration-color:var(--ink)}

/* the swap: the heading comes in again rather than changing under the eye */
.lg-h.is-in{animation:lg-in var(--speed-slow) var(--power3-out)}
@keyframes lg-in{from{opacity:0; transform:translateY(.8rem)}}

@media (max-width:768px){
  .lg{padding-top:clamp(3.2rem, 7vh, 6rem)}
  .lg-sub{margin-bottom:2.8rem}
}
@media (prefers-reduced-motion:reduce){
  .lg-reveal,.lg-reveal .lg-field,.lg-pbtn,.lg-go,.lg-field input{transition:none}
  .lg-h.is-in{animation:none}
}

/* ============================================================
   CONFIRM YOUR EMAIL (13 September 2026) — six boxes in the field's grey,
   the demo note that stands in for the email, and the two ways on.
   ============================================================ */
.lg-sub b{color:var(--ink); font-weight:600; overflow-wrap:anywhere}
.lg-go:disabled{opacity:.6; cursor:progress}
.lg-swap:disabled{color:var(--soft); cursor:default; text-decoration-color:transparent}
.cf-code{margin:0; padding:0; border:0; min-width:0}
.cf-boxes{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:.8rem}
.cf-box{
  display:block; width:100%; height:6.8rem; box-sizing:border-box; margin:0; padding:0; border:0; border-radius:1.6rem;
  background:var(--lg-fill); color:var(--ink); caret-color:var(--spark); text-align:center;
  -webkit-appearance:none; appearance:none;
  font-family:var(--face-ui); font-size:2.8rem; font-weight:600; font-variant-numeric:tabular-nums;
  transition:background var(--speed) var(--easing), box-shadow var(--speed) var(--easing);
}
.cf-box:hover{background:var(--lg-fill-hi)}
.cf-box:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--ink)}
.cf-boxes.is-bad .cf-box{box-shadow:inset 0 0 0 1.5px var(--lg-err)}
.cf-boxes.is-shake{animation:cf-shake .38s var(--easing)}
@keyframes cf-shake{20%,60%{transform:translateX(-.6rem)} 40%,80%{transform:translateX(.6rem)}}
.cf-code + .lg-err{margin-top:1.2rem}
.cf-demo{
  margin:2.8rem 0 0; padding:1.6rem 1.8rem; border-radius:1.6rem;
  border:1.5px dashed color-mix(in srgb, var(--ink) 24%, transparent);
  font-family:var(--face-ui); font-size:1.4rem; font-weight:500; line-height:1.45; color:var(--soft);
}
.cf-demo[hidden]{display:none}
.cf-demo b{
  display:block; margin-top:.6rem; color:var(--ink);
  font-size:2.4rem; font-weight:600; letter-spacing:.2em; font-variant-numeric:tabular-nums;
}
.cf-more{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.2rem 2rem; margin-top:2.4rem; font-family:var(--face-ui); font-size:1.5rem; font-weight:500}
@media (max-width:420px){
  .cf-boxes{gap:.6rem}
  .cf-box{height:5.8rem; font-size:2.4rem; border-radius:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .cf-boxes.is-shake{animation:none}
  .cf-box{transition:none}
}

/* the demo login: the same pill, drawn instead of filled, a step below */
.lg-demo{margin-top:2.4rem; background:transparent; color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 45%, transparent)}
.lg-demo:hover,.lg-demo:focus-visible{background:color-mix(in srgb, var(--ink) 8%, transparent)}