/* The appeal page. The header, title, cards, callouts, pills, marks, numbered steps and pill links come from
   styles.css; this file only lays out what's particular to undoing Howie's actions. */

#message { font-weight: 700; }

#signed-out { display: grid; gap: 0.75rem; justify-items: center; text-align: center; }
#signed-out .big-btn { margin: 0.25rem 0; }

.account { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
/* The Discord username: bold, with a highlighter stroke in Discord's colour behind its lower half. The stroke is a
   lighter tint so the black text stays readable. */
.account-name {
  font-weight: 700;
  overflow-wrap: anywhere;
  padding: 0 0.15rem;
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--blurple) 45%, transparent) 55%);
}

.loading { font-weight: 700; opacity: 0.75; }

.actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.action {
  display: grid;
  gap: 0.6rem;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  background: #fff;
}
.actions .empty { margin: 0; font-weight: 700; }

/* Server names are chosen by server owners, so each one sits in its own box with its icon, isolated from the
   page's own wording and from right-to-left tricks. */
.server {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.25rem 0.8rem 0.25rem 0.25rem;
  background: var(--soft);
  border: 2px solid var(--ink);
  border-radius: 999px;
  justify-self: start;
}
.server-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  font-weight: 700;
  background: var(--cyan);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.server-icon img { width: 100%; height: 100%; object-fit: cover; }
.server-name {
  unicode-bidi: isolate;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.server.is-gone .server-name { font-style: italic; font-weight: 400; }
.server.is-gone .server-icon { background: var(--soft); }

/* An action's pill, date and state: "Banned  October 10, 2026  ! Still in effect". */
.action-state { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.95rem; }
.state-date { opacity: 0.7; margin-right: 0.3rem; }
.state-words { display: inline-flex; align-items: center; gap: 0.45rem; }

.rejoin { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding-top: 0.6rem; border-top: 2px dashed #ccc; }
.rejoin a.pill-link { background: var(--green); }
.rejoin .quiet { flex-basis: 100%; }

/* The undo card: the button, the CAPTCHA that appears under it once pressed, and the note sit centered; the heading
   and explanation stay left. */
.undo-card { display: grid; gap: 0.9rem; justify-items: start; background: #fff7c2; }
.undo-card p { margin: 0; }
.undo-card #undo,
.undo-card #turnstile,
.undo-card #undo-hint { justify-self: center; }
.undo-card #undo { margin: 0.25rem 0; }
.undo-card #undo-hint { text-align: center; }
#undo:disabled { opacity: 0.5; cursor: default; transform: none; }
#turnstile:empty { display: none; }