/*
 * The access terminal.
 *
 * One 420px column in the middle of the shell. Everything here is a form, so
 * the only real work is making the inputs feel like the rest of the design
 * rather than like a browser's defaults.
 */

.au-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.au-card { width: min(420px, 100%); animation: fadeUp .5s ease both; }

.au-head { text-align: center; margin-bottom: 30px; }

.au-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .34em;
  color: var(--dim);
  margin-bottom: 12px;
}

.au-title {
  margin: 0;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}

/* ---------------- the mode toggle ---------------- */

.au-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--tile);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 26px;
}

.au-tab {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  border: 0;
  border-radius: 999px;
  padding: 11px 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.au-tab.is-on { background: var(--green); color: #04120a; }

/* ---------------- providers ---------------- */

.au-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }

.au-pv {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 15px 0;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}

.au-pv:hover:not(.is-off) { filter: brightness(1.08); transform: translateY(-1px); }
.au-pv svg { width: 30px; height: 30px; display: block; }

/*
 * A provider with no credentials configured is drawn and visibly dead rather
 * than hidden. Hiding it makes the row jump around between deployments; a dim
 * button that says why when pressed is easier to reason about.
 */
.au-pv.is-off { filter: grayscale(1) brightness(.5); cursor: not-allowed; }

.au-or { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.au-or i { flex: 1; height: 1px; background: var(--rule); }
.au-or span { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--dim); }

/* ---------------- the form ---------------- */

.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--dim); margin-bottom: 7px; }

.au-field input {
  width: 100%;
  box-sizing: border-box;
  background: var(--tile);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease;
}

.au-field input:focus { border-color: var(--green); }
.au-field input::placeholder { color: var(--dim); }
.au-field[hidden] { display: none; }

.au-go {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 15px 0;
  margin-top: 6px;
  background: var(--green);
  color: #04120a;
  cursor: pointer;
  transition: filter .15s ease;
}

.au-go:hover:not(:disabled) { filter: brightness(1.12); }
.au-go:disabled { background: #141416; color: var(--dim); border-color: var(--edge); cursor: default; }
.au-go.is-done { background: #121215; color: var(--green); border-color: var(--green); cursor: default; }

/*
 * What new accounts actually get, which is the daily claim and coins for
 * watching. The design promised "500 COINS + 1 FREE CRATE" on signup and there
 * is no such grant anywhere in the wallet, so this says the true thing instead.
 * A reward that does not arrive is worse than no reward on the button.
 */
.au-perk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--legendary);
  border: 1px dashed rgba(255, 214, 110, .35);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.au-foot-line { text-align: center; font-size: 12px; letter-spacing: .1em; color: var(--dim); margin-top: 6px; }
.au-foot-line button {
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  background: none;
  border: 0;
  padding: 0;
  color: var(--green);
  cursor: pointer;
  text-decoration: underline;
}

.au-note {
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.6;
  text-align: center;
  color: var(--danger);
  min-height: 0;
}

.au-note[hidden] { display: none; }
.au-note.is-good { color: var(--green); }

.au-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--dim);
}

@media (max-width: 860px) {
  .au-title { font-size: 32px; }
  .au-body { padding: 24px 16px; }
  .au-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}