/* The signed-out forge: the site's landing banner full screen, with the
   sign-in card centred on both axes, like a backend login.

   Loaded only for visitors who are not signed in (templates/custom/
   header.tmpl). With sign-in required, the only pages they reach are the
   auth pages (sign-in, two-factor, passkey), which all render as
   .page-content.user, so the layout keys on that class and leaves any
   other page (a 404, for one) on the stock layout. Colours come from the
   theme's --wz-* roles; the scrim stays dark in both themes because the
   banner is a night scene, as on the site's landing. */

body:has(.page-content.user) {
  --wz-night: #0b060b;
  min-height: 100dvh;
  background: var(--wz-night);
}
body:has(.page-content.user)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse 70% 80% at 50% 50%,
      color-mix(in oklab, var(--wz-night) 20%, transparent),
      color-mix(in oklab, var(--wz-night) 70%, transparent)
    ),
    url("../img/banner-1200w.webp") 30% 45% / cover no-repeat;
}
@media (width <= 50rem) {
  body:has(.page-content.user)::before {
    background-image:
      radial-gradient(
        ellipse 90% 70% at 50% 50%,
        color-mix(in oklab, var(--wz-night) 30%, transparent),
        color-mix(in oklab, var(--wz-night) 75%, transparent)
      ),
      url("../img/banner-800w.webp");
    background-position: 0 0, 18% 50%;
  }
}
@media (width > 75rem), (resolution > 1.5x) and (width > 50rem) {
  body:has(.page-content.user)::before {
    background-image:
      radial-gradient(
        ellipse 70% 80% at 50% 50%,
        color-mix(in oklab, var(--wz-night) 20%, transparent),
        color-mix(in oklab, var(--wz-night) 70%, transparent)
      ),
      url("../img/banner.webp");
  }
}

/* No navbar: nothing behind it is reachable without signing in. */
body:has(.page-content.user) #navbar {
  display: none;
}

/* Centre the card in the viewport. */
body:has(.page-content.user) .full.height {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 0;
}
.page-content.user {
  display: grid;
  flex: 1;
  place-items: center;
  padding: 1.5rem 1rem 4.5rem;
}
/* Fomantic's .ui.page.grid pads itself by a percentage of its width, which
   collapses a narrow centred grid to nothing. Forgejo's root size is 14px,
   so lengths here are in px where they must match the site. */
.page-content.user > .ui.grid {
  width: 100%;
  max-width: 400px;
  margin: 0 !important;
  padding: 0 !important;
}
.page-content.user > .ui.grid > .column {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-content.user :is(.ui.container, form.ui.form) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* The card: header and segment read as one raised surface. */
.page-content.user :is(.ui.container, form.ui.form):has(> .ui.top.attached.header) {
  filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.45)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.25));
}
.page-content.user .ui.top.attached.header:not(.segment) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 2.25rem 1.5rem 0.25rem;
  border: 1px solid var(--wz-border);
  border-bottom: 0;
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
  background: var(--wz-raised);
  color: var(--wz-strong);
  font-family: var(--wz-font-reading);
  font-size: 1.375rem;
  font-weight: 400;
  text-align: center;
}
/* The runic wordmark (decorative; the page title names the site). */
.page-content.user .ui.top.attached.header:not(.segment)::before {
  content: "";
  width: 10rem;
  aspect-ratio: 4834 / 714;
  background: var(--wz-accent);
  mask: url("../img/wordmark.svg") center / contain no-repeat;
}
.page-content.user .ui.attached.segment {
  margin: 0;
  padding: 1.25rem 1.75rem 1.75rem;
  border: 1px solid var(--wz-border);
  border-top: 0;
  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  background: var(--wz-raised);
}
.page-content.user .ui.form .field > label {
  color: var(--wz-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.page-content.user .ui.form input:not([type="checkbox"]) {
  min-height: 44px;
  background: var(--wz-surface);
}
.page-content.user .ui.primary.button {
  min-height: 44px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* The OAuth divider and an empty provider list leave nothing to show. */
.page-content.user .divider:empty {
  display: none;
}

/* Password reset needs a mail server, which this forge has none of; the
   admin resets passwords from the command line. Hide the second box with
   the "forgot password" link (the passkey error box next to it stays; it
   is hidden until a passkey attempt fails). The box carries the header
   classes too, hence :not(.segment) on the card header rules above. */
.page-content.user .ui.container:has(a[href$="/user/forgot_password"]) > .segment {
  display: none !important;
}

/* A way back to the library for anyone who lands here by accident
   (templates/custom/body_inner_post.tmpl). */
.wz-back {
  position: fixed;
  inset-inline: 0;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
}
.wz-back a[href] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.75rem;
  color: #e6ded5;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.wz-back a[href]:hover {
  color: #fff;
}

/* One entrance, as the site's landing: the banner settles, the card rises. */
@media (prefers-reduced-motion: no-preference) {
  body:has(.page-content.user)::before {
    animation: wz-banner-settle 1600ms var(--wz-ease) backwards;
  }
  .page-content.user > .ui.grid {
    animation: wz-card-rise 700ms var(--wz-ease) 120ms backwards;
  }
}
@keyframes wz-banner-settle {
  from {
    opacity: 0.4;
    scale: 1.03;
  }
}
@keyframes wz-card-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

/* Short viewports (phone in landscape): let the page scroll instead. */
@media (height <= 34rem) {
  .page-content.user {
    place-items: start center;
    padding-block: 1rem 4rem;
  }
}