/* CHU GPT login page (design A2, CTO-approved 14 Aug 2026).
   Scoped via :has(a[href*="oauth/openid"]) so it applies to the auth screens
   only; the in-app theme is deliberately untouched. Single-theme by design:
   the login is a brand moment and stays light in both OS themes. */

body:has(main a[href*="oauth/openid"]) {
  background: #F7F1E8;
}

/* mascot watermark, 5% */
body:has(main a[href*="oauth/openid"]) main::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/assets/chu-peek.png") center 40% / auto 70vh no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* wattle curve rising from the bottom */
body:has(main a[href*="oauth/openid"]) main::after {
  content: "";
  position: fixed;
  left: -10vw;
  right: -10vw;
  bottom: -34vh;
  height: 48vh;
  background: #C1DF89;
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  z-index: 0;
}

/* the card */
body:has(main a[href*="oauth/openid"]) .w-authPageWidth {
  position: relative;
  z-index: 2;
  background: #FFFFFF !important;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(6, 39, 46, 0.12);
  padding: 2.2rem 2.4rem 2rem;
}

/* CHU GPT mascot inside the card (header copy hidden below) */
body:has(main a[href*="oauth/openid"]) .w-authPageWidth::before {
  content: "";
  display: block;
  height: 92px;
  background: url("/assets/chu-peek.png") center / contain no-repeat;
  margin: 0.2rem auto 1.4rem;
}

body:has(main a[href*="oauth/openid"]) .mt-6.h-10.w-full.bg-cover {
  display: none;
}

/* heading + subtitle (visual replacement; SR text unchanged) */
body:has(main a[href*="oauth/openid"]) main h1 {
  font-size: 0;
  margin-bottom: 1.6rem;
}
body:has(main a[href*="oauth/openid"]) main h1::before {
  content: "Welcome to CHU GPT";
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.2;
  color: #06272E;
}
body:has(main a[href*="oauth/openid"]) main h1::after {
  content: "Your AI assistant, built and run by CHU.";
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  color: #5E6E71;
  margin-top: 0.5rem;
}

/* sign-in button: pill, icon and text centred as one group */
body:has(main a[href*="oauth/openid"]) a[href*="oauth/openid"] {
  justify-content: center;
  gap: 0.65rem;
  border-radius: 9999px;
  border: 1.5px solid #CFCABE;
  background: #FFFFFF;
  color: #1C2E33;
  font-weight: 600;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
body:has(main a[href*="oauth/openid"]) a[href*="oauth/openid"] > * {
  margin: 0 !important; /* neutralise space-x-3 so gap alone spaces the pair */
}
body:has(main a[href*="oauth/openid"]) a[href*="oauth/openid"] svg {
  flex: none;
  display: block;
}
body:has(main a[href*="oauth/openid"]) a[href*="oauth/openid"]:hover {
  background: #F4FBF8;
  border-color: #00A86E;
}

/* helper line under the button */
body:has(main a[href*="oauth/openid"]) a[href*="oauth/openid"]::after {
  display: none;
}
body:has(main a[href*="oauth/openid"]) .mt-2.flex.gap-x-2 {
  flex-wrap: wrap;
}
body:has(main a[href*="oauth/openid"]) .mt-2.flex.gap-x-2::after {
  content: "Use your CHU account";
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.82rem;
  color: #8A968F;
  margin-top: 0.85rem;
}

/* footer */
body:has(main a[href*="oauth/openid"]) footer,
body:has(main a[href*="oauth/openid"]) [role="contentinfo"] {
  position: relative;
  z-index: 2;
  color: #4A6A50;
}

/* the SPA shell paints its own theme background over body; force the cream
   ground on the auth screens in both themes */
body:has(main a[href*="oauth/openid"]) .relative.flex.min-h-screen.flex-col {
  background: #F7F1E8 !important;
}