/* /Pages/Auth/Index.cshtml.rz.scp.css */
/* Auth/Index redesign (2026-09-06, revised). Scoped to this page only via ASP.NET Core CSS
   isolation -- SignedIn/Logout/InvalidReturnUrl/Error keep their existing shared .login-card look
   in site.css, unaffected by anything below. Auth/Verify later got its own scoped
   Verify.cshtml.css (2026-09-07) reusing this same .auth-submit button style, so the two
   sequential steps of one login journey look consistent -- see that file's own header comment.
   Reuses the brand orange/violet custom properties already defined on :root in site.css rather
   than redeclaring them.

   IMPORTANT: rules for <form>, <input>, <label>, <a>, and any <img src="~/..."> on this page
   live in site.css instead, not here -- ASP.NET Core's CSS isolation does not add its scope
   attribute to elements touched by other Tag Helpers, so a scoped selector targeting any of
   those never matches the rendered markup (confirmed via the actual served HTML: <div>/<p>/
   <span>/<button> elements get the b-xxxx attribute, <form>/<input>/<label>/<a>/<img> do not).
   See the matching comment in site.css. */

.auth-shell[b-61n9xqtow6] {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.auth-card[b-61n9xqtow6] {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 26rem;
  padding: 2.5rem 2.25rem 2.25rem;
  background-color: #fff;
  border: 1px solid #dde1e5;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(20, 17, 15, 0.04), 0 20px 48px -20px rgba(20, 17, 15, 0.28);
}

/* The one deliberate flourish on the card -- a two-colour brand rule rather than a plain white
   box. */
.auth-card[b-61n9xqtow6]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-violet));
}

.auth-lede[b-61n9xqtow6] {
  margin: 0.75rem 0 1.75rem;
  color: #5b574f;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

/* The official Singpass button asset -- sizing for the <img> inside it is in site.css (see the
   note above); this only covers the <button> itself, which scopes fine. */
.auth-singpass-button[b-61n9xqtow6] {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.auth-singpass-button:focus-visible[b-61n9xqtow6] {
  outline: 2px solid var(--brand-orange);
  outline-offset: 3px;
  border-radius: 0.75rem;
}

.auth-divider[b-61n9xqtow6] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: #9a968d;
  font-size: 0.8rem;
}

.auth-divider[b-61n9xqtow6]::before,
.auth-divider[b-61n9xqtow6]::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #dde1e5;
}

.auth-field[b-61n9xqtow6] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

/* The floating-label positioning context -- a plain <div>, scopes fine. The <input>/<label>
   rules that make the floating label actually work are in site.css (see the note above). */
.auth-input-group[b-61n9xqtow6] {
  position: relative;
}

.auth-submit[b-61n9xqtow6] {
  width: 100%;
  min-height: 2.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--brand-orange);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.auth-submit:hover[b-61n9xqtow6],
.auth-submit:focus-visible[b-61n9xqtow6] {
  background-color: #d9640f;
}

.auth-submit:focus-visible[b-61n9xqtow6] {
  outline: 2px solid #d9640f;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-submit:active[b-61n9xqtow6] {
    transform: translateY(1px);
  }
}

.auth-legal[b-61n9xqtow6] {
  margin: 1.5rem 0 0;
  color: #9a968d;
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 480px) {
  .auth-card[b-61n9xqtow6] {
    padding: 2rem 1.5rem;
  }
}
/* /Pages/Auth/Logout.cshtml.rz.scp.css */
/* Auth/Logout: a short, single-purpose confirmation rather than a multi-field form, so unlike
   Index/Verify's left-aligned prose this one centers everything -- closer to a dialog than a
   page. Violet, not orange: orange is reserved sitewide for the "get me in" actions elsewhere in
   this journey (Index's Log in, Verify's Verify); violet is the app's own secondary accent
   (site.css's own header comment), which reads correctly for this "leaving" counterpart. */
.auth-logout-card[b-htb25p9vja] {
  text-align: center;
}

.auth-logout-card h1[b-htb25p9vja] {
  margin-top: 0;
}

.auth-logout-icon[b-htb25p9vja] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: var(--brand-violet);
  background-color: rgba(115, 104, 168, 0.12);
  border-radius: 50%;
}

.auth-logout-icon svg[b-htb25p9vja] {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
}

.auth-logout-copy[b-htb25p9vja] {
  margin: 0 auto 1.5rem;
  max-width: 30ch;
  color: #78746c;
  font-size: 0.9rem;
  line-height: 1.5;
}

.auth-logout-confirm[b-htb25p9vja] {
  width: 100%;
  min-height: 2.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--brand-violet);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.auth-logout-confirm:hover[b-htb25p9vja],
.auth-logout-confirm:focus-visible[b-htb25p9vja] {
  background-color: #5c5190;
}

.auth-logout-confirm:focus-visible[b-htb25p9vja] {
  outline: 2px solid #5c5190;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-logout-confirm:active[b-htb25p9vja] {
    transform: translateY(1px);
  }
}

/* .auth-logout-cancel (the "Stay signed in" link) lives in site.css, not here: it's an
   asp-page-touched <a>, and ASP.NET Core's CSS isolation never stamps its scope attribute onto
   any element a Tag Helper touches -- confirmed via the served HTML, same as Index.cshtml's own
   <a>/<form>/<input>/<label> elements (see site.css's own note on that). A scoped rule here
   would be silently dead code. */

/* /Pages/Auth/SignedIn.cshtml.rz.scp.css */
/* Auth/SignedIn: the successful destination of the primary orange journey (Index's Log in,
   Verify's Verify), so the icon badge stays orange, not violet -- violet is reserved for this
   journey's "leaving" counterpart (Auth/Logout). Same centered, dialog-like shape as Logout for
   the same reason: a short status page, not a form. */
.auth-signedin-card[b-2r5qb797w4] {
  text-align: center;
}

.auth-signedin-card h1[b-2r5qb797w4] {
  margin-top: 0;
}

.auth-signedin-icon[b-2r5qb797w4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: var(--brand-orange);
  background-color: rgba(250, 118, 22, 0.12);
  border-radius: 50%;
}

.auth-signedin-icon svg[b-2r5qb797w4] {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
}

/* .auth-signedin-copy itself scopes fine (a plain <p>), but its inline <a asp-page="..."> does
   not -- same CSS-isolation gotcha as Logout's own link -- so that one rule lives in site.css. */
.auth-signedin-copy[b-2r5qb797w4] {
  margin: 0 auto;
  max-width: 32ch;
  color: #78746c;
  font-size: 0.9rem;
  line-height: 1.5;
}
/* /Pages/Auth/Verify.cshtml.rz.scp.css */
/* Auth/Verify (2026-09-07): the submit button now matches Auth/Index's own .auth-submit exactly
   (full-width, brand-orange, rounded) instead of a plain Bootstrap .btn.btn-primary, so the two
   sequential steps of one login journey look like the same product. Scoped to this page only via
   ASP.NET Core CSS isolation -- see Index.cshtml.css's own note on why <form>/<input>/<label>
   rules stay in site.css while <button>/<p> rules like these live here instead. SignedIn/Logout/
   InvalidReturnUrl/Error still keep the plain shared .login-card look this page used to have. */

.auth-submit[b-615bxr3rs1] {
  width: 100%;
  min-height: 2.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--brand-orange);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.auth-submit:hover[b-615bxr3rs1],
.auth-submit:focus-visible[b-615bxr3rs1] {
  background-color: #d9640f;
}

.auth-submit:focus-visible[b-615bxr3rs1] {
  outline: 2px solid #d9640f;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-submit:active[b-615bxr3rs1] {
    transform: translateY(1px);
  }
}

.auth-hint[b-615bxr3rs1] {
  margin: -0.5rem 0 0.75rem;
  color: #9a968d;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Same floating-label field shape as Auth/Index's own Email field (.auth-input/.auth-label
   already live in the global site.css, since ASP.NET Core's CSS isolation never scopes an
   asp-for-touched <input>/<label> -- see that file's own note). .auth-field and
   .auth-input-group both wrap plain <div>s, though, so -- like Index.cshtml.css's own copies of
   these exact two rules -- they need restating here per page rather than being shared
   automatically. Missing .auth-input-group's position: relative first (this page's own label
   escaped all the way up to .login-card's positioning context instead) is exactly why this note
   exists now. */
.auth-field[b-615bxr3rs1] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.auth-input-group[b-615bxr3rs1] {
  position: relative;
}

/* The countdown ring reuses the app's own orange-to-violet gradient -- already the top accent
   bar on every card in the app (site.css's .login-card::before) -- so waiting for a resend
   reads as part of the same visual system rather than a generic spinner. It resolves into a
   plain refresh glyph in brand violet once ready: violet is reserved sitewide as the secondary
   accent (site.css's own header comment), leaving orange spent entirely on the Verify button. */
.auth-resend[b-615bxr3rs1] {
  margin: 0 0 1.25rem;
}

.auth-resend-button[b-615bxr3rs1] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #9a968d;
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.auth-resend-button:not(:disabled)[b-615bxr3rs1] {
  color: var(--brand-violet);
}

.auth-resend-button:not(:disabled):hover[b-615bxr3rs1],
.auth-resend-button:not(:disabled):focus-visible[b-615bxr3rs1] {
  color: #5c5190;
}

.auth-resend-button:disabled[b-615bxr3rs1] {
  cursor: default;
}

.auth-resend-button:not(:disabled):focus-visible[b-615bxr3rs1] {
  outline: 2px solid #5c5190;
  outline-offset: 2px;
}

.auth-resend-glyph[b-615bxr3rs1] {
  position: relative;
  display: inline-flex;
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
}

.auth-resend-ring[b-615bxr3rs1] {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.auth-resend-ring-track[b-615bxr3rs1] {
  fill: none;
  stroke: #eee1d8;
  stroke-width: 2.5;
}

.auth-resend-ring-progress[b-615bxr3rs1] {
  fill: none;
  stroke: url(#resend-ring-gradient);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.auth-resend-count[b-615bxr3rs1] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
  color: #78746c;
}

.auth-resend-icon[b-615bxr3rs1] {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.8rem;
  height: 0.8rem;
  fill: currentColor;
  opacity: 0;
  transform: scale(0.4) rotate(-45deg);
}

/* A one-shot ripple, not a repeating one: it only ever plays once, the instant the wait ends
   (JS adds .is-unlocking exactly then), echoing the ring it replaces without turning the whole
   control into a spinner. */
.auth-resend-burst[b-615bxr3rs1] {
  fill: none;
  stroke: var(--brand-violet);
  stroke-width: 2;
  opacity: 0;
  transform-origin: 16px 16px;
}

.auth-resend-button:not(.is-waiting) .auth-resend-ring[b-615bxr3rs1],
.auth-resend-button:not(.is-waiting) .auth-resend-count[b-615bxr3rs1] {
  opacity: 0;
}

.auth-resend-button:not(.is-waiting) .auth-resend-icon[b-615bxr3rs1] {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: no-preference) {
  .auth-resend-ring-progress[b-615bxr3rs1] {
    transition: stroke-dashoffset 1s linear;
  }

  .auth-resend-ring[b-615bxr3rs1],
  .auth-resend-count[b-615bxr3rs1] {
    transition: opacity 0.2s ease;
  }

  /* The one moment worth spending real character on: the wait resolving into an action. A
     gentle overshoot (back-out easing) instead of a plain ease makes the icon feel like it
     springs into place rather than merely appearing. */
  .auth-resend-icon[b-615bxr3rs1] {
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .auth-resend-count.is-ticking[b-615bxr3rs1] {
    animation: auth-resend-tick-b-615bxr3rs1 0.4s ease-out;
  }

  .auth-resend-button.is-unlocking .auth-resend-burst[b-615bxr3rs1] {
    animation: auth-resend-burst-b-615bxr3rs1 0.6s ease-out;
  }

  @keyframes auth-resend-tick-b-615bxr3rs1 {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    45% {
      transform: scale(1.22);
      opacity: 0.5;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes auth-resend-burst-b-615bxr3rs1 {
    0% {
      opacity: 0.55;
      transform: scale(0.7);
    }

    100% {
      opacity: 0;
      transform: scale(1.7);
    }
  }
}
/* /Pages/Shared/_AuthLayout.cshtml.rz.scp.css */
/* Chromeless layout for Auth/Index only (no header/nav, no footer) -- every other page keeps
   using _Layout.cshtml untouched. Scoped via ASP.NET Core CSS isolation.

   The backdrop is this page's one deliberate flourish, grounded in the brand's own "Find Your
   Place" property identity rather than a generic gradient blob: two soft brand-colour washes
   plus a faint skyline silhouette along the bottom edge. The card itself stays plain white and
   quiet so it still reads as the clear focal point.

   IMPORTANT: the body-level rules (margin, min-height, background) live in site.css as
   `.auth-body` instead of here as a plain `body` selector -- ASP.NET Core's CSS isolation never
   stamps the scope attribute onto a layout's own <html>/<head>/<body> tags (only elements
   nested inside them), so a scoped `body { ... }` selector here would silently match nothing.
   See the matching comment in site.css and in Index.cshtml.css. */

.auth-backdrop[b-2hkv87p9g0] {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 0;
  height: 20vh;
  min-height: 130px;
  max-height: 210px;
  pointer-events: none;
}

.auth-backdrop svg[b-2hkv87p9g0] {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-backdrop rect[b-2hkv87p9g0] {
  fill: rgba(28, 26, 23, 0.05);
}
/* /Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand[b-urvmw8n17u] {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

a[b-urvmw8n17u] {
  color: #0077cc;
}

.btn-primary[b-urvmw8n17u] {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active[b-urvmw8n17u], .nav-pills .show > .nav-link[b-urvmw8n17u] {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.border-top[b-urvmw8n17u] {
  border-top: 1px solid #e5e5e5;
}
.border-bottom[b-urvmw8n17u] {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow[b-urvmw8n17u] {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy[b-urvmw8n17u] {
  font-size: 1rem;
  line-height: inherit;
}