/* SuiteDash's own sign-in look: downloaded only by SuiteDash's own sign-in pages, never by a customer's.
   Every rule starts with the .login.own-login body classes so it outranks the app-wide login rules
   without !important. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/unbounded-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

.login.own-login {
  --own-navy: #0C1929;
  --own-navy-raised: #12233A;
  --own-navy-sunken: #0A1626;
  --own-card: rgba(12, 25, 41, 0.82);
  --own-blue: #3FB6FF;
  --own-on-blue: #04202F;
  --own-text: #FFFFFF;
  --own-text-muted: rgba(255, 255, 255, 0.72);
  --own-line: rgba(255, 255, 255, 0.14);
  --own-star: #F5C044;
  --own-band-end: #2A4A6A;
  --own-font-sans: "Instrument Sans", system-ui, sans-serif;
  --own-font-display: "Unbounded", var(--own-font-sans);
  --own-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --own-radius-pill: 999px;
  --own-radius-card: 1rem;
  --own-radius-media: 0.5rem;
  --own-fade: 0.6s var(--sd-motion-ease, ease-out);
  background-color: var(--own-navy);
  color: var(--own-text);
  font-family: var(--own-font-sans);
}

/* The form side, on the sign-in page and every sibling step. */

.login.own-login .split-container {
  background-color: var(--own-navy);
  font-family: var(--own-font-sans);
  color: var(--own-text);
}

.login.own-login .split-container .panel-1 {
  background-color: var(--own-navy);
}

.login.own-login .form .form-control {
  border-color: var(--own-line);
  background-color: var(--own-navy-sunken);
  color: var(--own-text);
}

.login.own-login .form .form-control::placeholder {
  color: var(--own-text-muted);
}

.login.own-login .split-container .btn.btn-primary {
  border-color: var(--own-blue);
  background-color: var(--own-blue);
  color: var(--own-on-blue);
  box-shadow: 0 0.5rem 1.5rem rgba(63, 182, 255, 0.28);
}

.login.own-login .split-container .btn.btn-primary:hover,
.login.own-login .split-container .btn.btn-primary:active {
  border-color: var(--own-blue);
  background-color: var(--own-blue);
  color: var(--own-on-blue);
  opacity: 0.92;
}

/* The Google and Microsoft buttons sit on navy; their label is its own element with its own colour. */

.login.own-login .split-container .sd-google-signin-btn,
.login.own-login .split-container .sd-microsoft-signin-btn {
  border-color: var(--own-line);
  background: var(--own-navy-raised);
  box-shadow: none;
}

.login.own-login .split-container .sd-google-signin-btn:hover,
.login.own-login .split-container .sd-microsoft-signin-btn:hover {
  border-color: var(--own-blue);
  background: var(--own-navy-raised);
}

.login.own-login .split-container .sd-signin-btn-label {
  color: var(--own-text);
}

.login.own-login .split-container .having-trouble,
.login.own-login .split-container .panel-footer :any-link {
  color: var(--own-blue);
}

.login.own-login .split-container .panel-footer,
.login.own-login .split-container .rememberMe {
  color: var(--own-text-muted);
}

.login.own-login .split-container .panel-footer {
  position: static;
}

/* Every control shows where keyboard focus is. */

.login.own-login .form .form-control:focus-visible,
.login.own-login .split-container .btn:focus-visible,
.login.own-login .split-container .having-trouble:focus-visible,
.login.own-login .split-container .panel-footer :any-link:focus-visible,
.login.own-login .own-panel__dot:focus-visible,
.login.own-login .own-panel__pause:focus-visible,
.login.own-login .own-panel__eyebrow-link:focus-visible,
.login.own-login .own-panel-social__link:focus-visible,
.login.own-login .own-panel-card__link:focus-visible {
  outline: 2px solid var(--own-blue);
  outline-offset: 2px;
}

.login.own-login .split-container .btn.btn-primary:focus-visible {
  outline-color: var(--own-text);
}

/* Words screen readers hear but the page does not show. */

.login.own-login .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The brand panel: its group, card, controls and social row. */

.login.own-login .own-panel__eyebrow,
.login.own-login .own-panel-card__kicker,
.login.own-login .own-panel-phone__line {
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  margin: 0;
  font-family: var(--own-font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
}

.login.own-login .own-panel__eyebrow-link {
  color: inherit;
  text-decoration: none;
}

.login.own-login .own-panel__eyebrow-link:hover {
  text-decoration: underline;
}

.login.own-login .own-panel__eyebrow::before,
.login.own-login .own-panel-card__kicker::before,
.login.own-login .own-panel-phone__line::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--own-blue);
}

.login.own-login .own-panel-card {
  position: relative;
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid var(--own-line);
  border-radius: var(--own-radius-card);
  background-color: var(--own-card);
}

.login.own-login .own-panel-card__kicker {
  color: var(--own-text-muted);
}

.login.own-login .own-panel-card__stars {
  display: flex;
  gap: 0.375rem;
  margin: 0;
  color: var(--own-star);
}

.login.own-login .own-panel-card__star {
  width: 1rem;
  height: 1rem;
}

.login.own-login .own-panel-card__lead {
  margin: 0;
  color: var(--own-text);
  font-family: var(--own-font-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
}

/* A stat leads with its figure, so its headline is the largest type on the card. */

.login.own-login .own-panel-card[data-card-type="stat"] .own-panel-card__lead {
  font-size: 2.5rem;
  line-height: 1.1;
}

.login.own-login .own-panel-card__words {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.login.own-login .own-panel-card__attribution {
  margin: 0;
  font-family: var(--own-font-mono);
  font-size: 0.8125rem;
  color: var(--own-text-muted);
}

.login.own-login .own-panel-card__name {
  color: var(--own-text);
}

.login.own-login .own-panel-card__link {
  font-weight: 600;
  color: var(--own-blue);
}

.login.own-login .own-panel__controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.login.own-login .own-panel__controls[hidden] {
  display: none;
}

.login.own-login .own-panel__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--own-line);
  border-radius: var(--own-radius-pill);
  background-color: var(--own-navy-raised);
  color: var(--own-text);
}

.login.own-login .own-panel__pause-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* Each dot is a 24px target around the small pill it draws. */

.login.own-login .own-panel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--own-radius-pill);
  background-color: transparent;
}

.login.own-login .own-panel__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--own-radius-pill);
  background-color: var(--own-text-muted);
}

.login.own-login .own-panel__dot.is-active {
  width: 2rem;
}

.login.own-login .own-panel__dot.is-active::before {
  width: 1.5rem;
  background-color: var(--own-blue);
}

/* Every card shares one grid cell, so the stage is as tall as its tallest card and the controls never move;
   the cell is as wide as the group, never as wide as a card's longest word. */

.login.own-login .own-panel__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.login.own-login .own-panel__stage > .own-panel-card {
  grid-area: 1 / 1;
  transition: opacity var(--own-fade);
}

.login.own-login .own-panel__stage > .own-panel-card.is-offstage {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--own-fade), visibility 0s linear 0.6s;
}

.login.own-login .own-panel-card__media {
  display: none;
}

.login.own-login .own-panel-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.login.own-login .own-panel-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--own-line);
  border-radius: var(--own-radius-pill);
  background-color: var(--own-navy-raised);
  color: var(--own-text);
}

.login.own-login .own-panel-social__link:hover {
  border-color: var(--own-blue);
}

.login.own-login .own-panel-social__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.login.own-login .own-panel-social__link--youtube {
  border-color: var(--own-blue);
  color: var(--own-blue);
}

/* The phone band: one line and the social row under the form. The line runs as text, so it wraps. */

.login.own-login .own-panel-phone__line {
  display: block;
  overflow-wrap: anywhere;
}

.login.own-login .own-panel-phone__line::before {
  display: inline-block;
  margin-right: 0.625rem;
}

.login.own-login .own-panel-phone {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.5rem 3rem;
  border-top: 1px solid var(--own-line);
  background-image: linear-gradient(180deg, var(--own-navy) 0%, var(--own-band-end) 100%);
}

.login.own-login .own-panel-phone .own-panel-social {
  justify-content: center;
}

@media (min-width: 768px) {
  .login.own-login .split-container .panel-footer {
    position: absolute;
  }

  /* The form takes two fifths of the page (never narrower than the form needs), the panel the rest. */

  .login.own-login .split-container .panel.login-panel-left {
    flex: 0 0 max(40%, 26rem);
    max-width: none;
  }

  .login.own-login .split-container .panel.login-panel-right {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .login.own-login .own-panel-phone {
    display: none;
  }

  .login.own-login .split-container .own-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-left: 1px solid var(--own-line);
    background-color: var(--own-navy);
    background-image: none;
  }

  .login.own-login .own-panel__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--own-panel-art-image, none) center / cover no-repeat;
    opacity: 0;
    transition: opacity var(--own-fade);
  }

  .login.own-login .own-panel__art.is-art-loaded {
    opacity: 1;
  }

  .login.own-login .own-panel__group {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: min(33.75rem, 100% - 4rem);
  }

  .login.own-login .own-panel-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--own-radius-media);
    background: var(--own-panel-card-image, none) center / cover no-repeat;
    opacity: 0;
    transition: opacity var(--own-fade);
  }

  .login.own-login .own-panel-card__media.is-image-loaded {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login.own-login .own-panel__art,
  .login.own-login .own-panel__stage > .own-panel-card,
  .login.own-login .own-panel__stage > .own-panel-card.is-offstage,
  .login.own-login .own-panel-card__media {
    transition: none;
  }

  .login.own-login .own-panel__pause {
    display: none;
  }
}