/*
 * Sign in, register, two-factor, password help and emailed links (D-167): the public look of the home page (blue-led, D-168).
 * The palette, display face, grain, glows, seal mark and tape come from shared/theme/public.css (root: pvPublic).
 * Wide screens: a story panel on the left, the form in a taped card on the right. Phones: header + card.
 */

.pvAuth,
.pvAuth *,
.pvAuth *::before,
.pvAuth *::after {
  box-sizing: border-box;
}

.pvAuth {
  /* Full-height controls on the card regardless of density (the shared rules follow --pv-field-h). */
  --pv-field-h: var(--pv-control-h-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  overflow-x: clip;
}

/* ---------------------------------------------------------------- the story */
.pvAuth__story {
  position: sticky;
  top: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-8);
  height: calc(100vh - 2 * var(--pv-space-4));
  margin: var(--pv-space-4) 0 var(--pv-space-4) var(--pv-space-4);
  padding: var(--pv-space-8) var(--pv-space-10);
  border-radius: 36px;
  background: var(--pv-public-paper-2);
  overflow: hidden;
}

.pvAuth__brandRow {
  display: flex;
  align-items: center;
}

.pvAuth__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-2);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
}

.pvAuth__brand:focus-visible {
  outline: 2px solid var(--pv-public-primary);
  outline-offset: 3px;
}

/* The back link spans the card's width (to line up with it): ring only its words. */
.pvAuth__home:focus-visible {
  outline: none;
}

html .pvAuth__home:focus-visible .sapMText {
  border-radius: 4px;
  outline: 2px solid var(--pv-public-primary);
  outline-offset: 4px;
}

.pvAuth__brand:has(img) .pvPublic__mark {
  display: none;
}

html .pvAuth__logo img,
html img.pvAuth__logo {
  max-height: 42px;
  max-width: 200px;
  object-fit: contain;
}

html .pvAuth__orgName.sapMText {
  font-size: 1.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvAuth__storyBody {
  margin-block: auto; /* centred in the panel, clear of the seal below */
  padding-bottom: var(--pv-space-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pv-space-3);
  max-width: 34rem;
}

html .pvAuth__storyTitle.sapMTitle,
html .pvAuth__storyAccent.sapMText {
  font-size: clamp(2.3rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.06;
  word-spacing: .04em;
}

html .pvAuth__storyTitle.sapMTitle {
  color: var(--pv-public-ink);
}

.pvAuth__storyAccentWrap {
  position: relative;
  padding-bottom: .12em;
}

html .pvAuth__storyAccent.sapMText {
  font-family: var(--pv-public-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--pv-public-primary);
}

.pvAuth__underline {
  position: absolute;
  left: -2%;
  right: -4%;
  bottom: -.14em;
  height: .4em;
  background: var(--pv-public-accent);
  -webkit-mask: url("../../shared/img/public/underline.svg") center / 100% 100% no-repeat;
  mask: url("../../shared/img/public/underline.svg") center / 100% 100% no-repeat;
  animation: pvAuthDraw 900ms cubic-bezier(.65, 0, .35, 1) 300ms both;
}

.pvAuth__points {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-3);
  margin: var(--pv-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.pvAuth__point {
  --tone: var(--pv-public-primary);
  --tone-soft: var(--pv-public-accent-soft);
  display: flex;
  align-items: center;
  gap: var(--pv-space-3);
  font-weight: var(--pv-fw-semibold);
}

.pvAuth__point--teal { --tone: var(--pv-public-teal); --tone-soft: var(--pv-public-teal-soft); }
.pvAuth__point--violet { --tone: var(--pv-public-violet); --tone-soft: var(--pv-public-violet-soft); }

html .pvAuth__point .sapUiIcon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 1rem;
}

/* Wax seal, a turning stamp and confetti in the panel's lower corner. */
.pvAuth__seal {
  position: absolute;
  right: 18%;
  bottom: 9%;
  width: 104px;
  height: 104px;
  animation: pvAuthWobble 7s ease-in-out infinite;
}

.pvAuth__sealBody {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--pv-public-primary);
  -webkit-mask: url("../../shared/img/public/seal.svg") center / contain no-repeat;
  mask: url("../../shared/img/public/seal.svg") center / contain no-repeat;
}

html .pvAuth__sealBody .sapUiIcon {
  color: var(--pv-public-sun);
  font-size: 2.1rem;
}

.pvAuth__sealRibbon {
  position: absolute;
  top: 58%;
  width: 28px;
  height: 64px;
  background: var(--pv-public-primary-active);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.pvAuth__sealRibbon--left { left: 24px; transform: rotate(16deg); }
.pvAuth__sealRibbon--right { right: 24px; transform: rotate(-16deg); }

.pvAuth__stamp {
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -80px;
  width: 300px;
  height: 300px;
  background: var(--pv-public-primary);
  opacity: .12;
  -webkit-mask: url("../../shared/img/public/stamp.svg") center / contain no-repeat;
  mask: url("../../shared/img/public/stamp.svg") center / contain no-repeat;
  animation: pvAuthSpin 40s linear infinite;
}

.pvAuth__confetti {
  position: absolute;
  animation: pvAuthBob 6s ease-in-out infinite;
}

.pvAuth__confetti--1 {
  right: 10%;
  top: 14%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pv-public-sun);
}

.pvAuth__confetti--2 {
  right: 42%;
  bottom: 16%;
  width: 54px;
  height: 18px;
  background: var(--pv-public-violet);
  -webkit-mask: url("../../shared/img/public/squiggle.svg") center / contain no-repeat;
  mask: url("../../shared/img/public/squiggle.svg") center / contain no-repeat;
  animation-duration: 7.5s;
  animation-delay: -2s;
}

.pvAuth__confetti--3 {
  right: 6%;
  bottom: 34%;
  width: 22px;
  height: 22px;
  border: 4px solid var(--pv-public-teal);
  border-radius: 50%;
  animation-duration: 8s;
  animation-delay: -4s;
}

/* ---------------------------------------------------------------- the form side */
.pvAuth__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pv-space-6);
  padding: var(--pv-space-10) var(--pv-space-6);
}

.pvAuth__home {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-2);
  align-self: center;
  width: 100%;
  max-width: 440px;
  padding: var(--pv-space-1) 0;
  color: var(--pv-public-ink-soft);
  font-weight: var(--pv-fw-semibold);
  text-decoration: none;
  transition: color var(--pv-dur-fast);
}

.pvAuth__home:hover {
  color: var(--pv-public-primary);
}

html .pvAuth__home .sapUiIcon {
  color: inherit;
  font-size: .9rem;
}

.pvAuth__card {
  width: 100%;
  max-width: 440px;
  padding: var(--pv-space-10) var(--pv-space-8) var(--pv-space-8);
  border: 1px solid var(--pv-public-line);
  border-radius: 26px;
  background: var(--pv-public-card);
  box-shadow: var(--pv-public-shadow);
}

html .pvAuth__stack > .sapMFlexItem {
  margin-bottom: var(--pv-space-4);
}

html .pvAuth__stack > .sapMFlexItem:last-child {
  margin-bottom: 0;
}

html .pvAuth__title.sapMTitle {
  font-size: 2rem;
  line-height: 1.12;
}

html .pvAuth .sapMInputBaseContentWrapper,
html .pvAuth .sapMBtnInner {
  height: var(--pv-control-h-lg);
}

html .pvAuth .sapMInputBaseInner,
html .pvAuth .sapMBtnContent {
  line-height: calc(var(--pv-control-h-lg) - 2px);
}

html .pvAuth .sapMBtnIcon + .sapMBtnContent,
html .pvAuth .sapMBtnContent + .sapMBtnIcon {
  margin-inline: var(--pv-space-2) 0;
}

.pvAuth__switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: var(--pv-space-2);
  padding-top: var(--pv-space-4);
  border-top: 1px dashed var(--pv-public-line);
}

/* "Keep me signed in" and "Forgot password?" on one line. */
.pvAuth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pv-space-3);
  flex-wrap: wrap;
}

.pvAuth__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pv-space-1);
}

html .pvAuth__powered.sapMText {
  color: var(--pv-public-ink-soft);
  font-size: var(--pv-fs-sm);
}

/* ---------------------------------------------------------------- motion */
@keyframes pvAuthDraw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes pvAuthWobble {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(6deg); }
}

@keyframes pvAuthBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes pvAuthSpin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------- narrower screens: header + card */
@media (max-width: 960px) {
  .pvAuth {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The story shrinks to a header: brand only. */
  .pvAuth__story {
    position: relative;
    height: auto;
    margin: var(--pv-space-3) var(--pv-space-3) 0;
    padding: var(--pv-space-3) var(--pv-space-5);
    border-radius: 24px;
  }

  .pvAuth__storyBody,
  .pvAuth__seal,
  .pvAuth__stamp,
  .pvAuth__confetti {
    display: none;
  }

  .pvAuth__brandRow {
    justify-content: center;
  }

  .pvAuth__side {
    justify-content: flex-start;
    padding: var(--pv-space-6) var(--pv-space-4) var(--pv-space-8);
  }
}

@media (max-width: 480px) {
  .pvAuth__card {
    padding: var(--pv-space-8) var(--pv-space-5) var(--pv-space-6);
    border-radius: 22px;
  }

  html .pvAuth__title.sapMTitle {
    font-size: 1.75rem;
  }
}