/* The veil, and the two controls the application gains when it has accounts.
 *
 * It borrows `app.css` rather than restating it: the same background, the same
 * `.sky`, the same wordmark. What is here is only what the sign-in page adds,
 * so that a change to the product's surface reaches this page too instead of
 * leaving one screen looking like last month's.
 */

/* ------------------------------------------------------------------ veil -- */

.veil-page { min-height: 100vh; }

.veil {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  position: relative;
  z-index: 1;
}

.veil-card {
  width: min(28rem, 100%);
  text-align: center;
}

.veil-card .wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
}
.veil-card .wordmark svg { width: 2rem; height: 2rem; }

.veil-card h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 .5rem;
  letter-spacing: -0.01em;
}

.veil-lede {
  margin: 0 0 2rem;
  opacity: .72;
}

.doors {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
}

/* THE GOOGLE DOOR IS TWO ELEMENTS STACKED, and this is the whole trick.
 * Google renders its own button and will not be restyled; ours is underneath
 * and is what anybody sees. Theirs is laid over it at zero opacity, so the
 * click lands on the real thing and the picture is ours. */
.door {
  position: relative;
  width: min(20rem, 100%);
}
#google-slot {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
  overflow: hidden;
}
#google-slot > * { width: 100% !important; }

.door-face {
  width: min(20rem, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .8125rem 1rem;
  border-radius: .625rem;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  /* OFF UNTIL IT WORKS. `.on` is added by `auth.js` only once the door can
   * actually be pressed - a lit button that does nothing is worse than a
   * missing one, because nobody reports it. */
  opacity: .35;
  pointer-events: none;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.door-face.on { opacity: 1; pointer-events: auto; }
.door-face:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); }
.door-face:focus-visible { outline: 2px solid var(--acid, #c8ff00); outline-offset: 2px; }
.door-face[disabled] { opacity: .5; pointer-events: none; }
.door-face svg { width: 1.125rem; height: 1.125rem; flex: none; }

.auth-err {
  margin: 1.25rem 0 0;
  padding: .75rem .875rem;
  border-radius: .5rem;
  border: 1px solid rgba(255, 120, 120, .3);
  background: rgba(255, 80, 80, .08);
  color: #ffb4b4;
  font-size: .875rem;
  text-align: left;
}

.veil-legal {
  margin: 1.75rem 0 0;
  font-size: .8125rem;
  opacity: .6;
  line-height: 1.5;
}
.veil-legal a { color: inherit; text-underline-offset: 2px; }

.veil-grant {
  margin: .75rem 0 0;
  font-size: .8125rem;
  opacity: .45;
}

/* ------------------------------------------------------- in the product -- */

/* The balance, in the chrome beside the run clock. It is a live number: it
 * falls every few seconds while a run spends, which is the entire reason it is
 * on screen rather than on a billing page. */
#quota {
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  opacity: .65;
  white-space: nowrap;
}
#quota.low { color: #ffcc66; opacity: 1; }
#quota.out { color: #ff8080; opacity: 1; }

#signout { font-size: .8125rem; opacity: .6; }
#signout:hover { opacity: 1; }

@media (max-width: 560px) {
  #quota { display: none; }
}