/* The red bar, the sign-in steps, the recovery code, the account in the rail. */

/* The bar's z-index stays inside the page, under the drawer and its backdrop. */
.main {
  isolation: isolate;
}

/* An invitation, not a warning: the base never stops working, so the bar that asks for
   an account is quiet. It goes red only when the account has gone somewhere else, which
   really does take the modules with it - see .account-bar.is-lost. */
.account-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto 22px;
  padding: 12px 14px 12px 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow);
}

.account-bar.is-lost {
  background: var(--late);
  border-color: var(--late);
  color: #fff;
}

.account-bar.is-lost .btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.account-bar .btn {
  margin-left: auto;
  background: #fff;
  border-color: #fff;
  color: var(--late);
}

.input-code {
  width: 11ch;
  font: 600 26px/1 var(--display);
  letter-spacing: 0.18em;
  text-align: center;
}

.btn-flush {
  padding: 0;
  height: auto;
  margin-top: 6px;
}

.btn-wide {
  width: 100%;
  justify-content: center;
}

.recovery-code {
  margin: 18px 0;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--sunk);
  font: 600 22px/1.3 Consolas, "Cascadia Mono", monospace;
  letter-spacing: 0.04em;
  text-align: center;
  user-select: text;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}

.check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.rail-link {
  padding: 0;
  border: 0;
  background: none;
  color: #cfe0d3;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.rail-link:hover {
  color: #fff;
}

.rail-warn {
  color: #f0b7a8;
}

.rail-link:disabled {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}

/* Asks to be pressed: after the payment and before the backup can be made. */
.rail-blink {
  font-weight: 700;
  animation: rail-blink 1.1s ease-in-out infinite;
}

@keyframes rail-blink {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-blink {
    animation: none;
    color: #fff;
  }
}

.drawer .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.choice-years .choice-item {
  padding: 14px 10px 12px;
  font-size: 14px;
}

.choice-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
}

.choice-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.check-plain {
  align-items: flex-start;
  margin-top: 12px;
  font-weight: 400;
}

.check-plain input {
  flex: none;
  margin-top: 2px;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.terms-heading {
  margin: 18px 0 6px;
  font-size: 15px;
}

.terms-text {
  margin: 0 0 8px;
  line-height: 1.5;
}