/* link.html: Discord Linked Roles sign-in. One cream board on the night checker. */

.link {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 40px;
  padding-block: 40px 64px;
}
.link__logo img { width: min(260px, 70vw); }

.link__card {
  position: relative;
  width: min(100%, 520px);
  padding: 36px 36px 32px;
  text-align: center;
}
.link__card h1 { font-size: clamp(2rem, 7vw, 2.6rem); margin-bottom: .4em; }
.link__card p { margin: 0 0 1em; }
.link__card .btn { margin-top: .4em; }
@media (max-width: 480px) { .link__card { padding-inline: 20px; } }

/* Gribble stands on the board's top-right corner */
.link__gribble {
  position: absolute;
  top: -108px;
  right: 18px;
  width: 74px;
  filter: drop-shadow(0 3px 0 var(--ink));
  pointer-events: none;
}

.link__muted { color: var(--ink-soft); font-size: .95rem; }

.link__form { display: grid; gap: 14px; margin: 1.2em 0; text-align: left; }
.link__form label { display: grid; gap: 4px; font-size: .95rem; }
.link__form input {
  font: 700 1.05rem "Nunito", sans-serif;
  color: var(--ink);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  padding: .6em .75em;
}
.link__form .btn { justify-self: center; }
.link__error { color: var(--red-dark); margin: 0; }

.link__roles {
  list-style: none;
  margin: 1em 0 1.2em;
  padding: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}
.link__roles li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: .55em .8em;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-soft);
}
.link__roles li.is-on { background: #d9f2c9; color: var(--ink); }
.link__roles span { font-size: .9rem; text-align: right; }
.link__win { color: var(--goblin-dark); }