/*
 * Everything every page shares. The design itself is inline-styled — that is how it came out of the
 * design tool and rewriting it into classes would be a lot of churn for no gain — so what lives here
 * is only the part inline styles cannot express: resets, pseudo-classes, keyframes and the handful
 * of states the pages toggle.
 */

html,
body {
  margin: 0;
  padding: 0;
  background: #0e0e0e;
}

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

a {
  color: #ededed;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
}

input::placeholder {
  color: #7a7a7a;
}

input:focus {
  outline: none;
  border-color: rgba(0, 114, 255, 0.55);
}

button:disabled,
a[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

@keyframes fosiaCaret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

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

/* The busy state on any button that talks to the network. */
.fosia-spinner {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ededed;
  border-radius: 50%;
  animation: fosiaSpin 620ms linear infinite;
}

/*
 * Form errors. Every page that can fail has one of these sitting empty until something goes wrong,
 * so a failure never has to move the layout around to be seen.
 */
.fosia-error {
  display: none;
  padding: 11px 13px;
  border: 1px solid rgba(255, 90, 90, 0.35);
  border-radius: 10px;
  background: rgba(255, 90, 90, 0.08);
  color: #ff9b9b;
  font-size: 14px;
  line-height: 1.45;
}

.fosia-error[data-shown="1"] {
  display: block;
}

.fosia-note {
  display: none;
  padding: 11px 13px;
  border: 1px solid rgba(0, 114, 255, 0.35);
  border-radius: 10px;
  background: rgba(0, 114, 255, 0.08);
  color: #9ccbff;
  font-size: 14px;
  line-height: 1.45;
}

.fosia-note[data-shown="1"] {
  display: block;
}

@media (max-width: 900px) {
  [data-cards] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}