/* /discord/ — the Discord holder gate (js/discord.js). Reuses site.css: tokens, header, buttons, the step heads,
   the wallet rows, the WalletConnect pop-up, the footer. ONE container, three flat steps inside it: rules,
   spacing and colour, never a box inside the box (the owner's rule); anything that must stop the visitor goes in
   a dialog. Mobile first — most holders verify from a phone. */

/* ---------- before js/discord.js knows the server (the inline script in discord/index.html) ----------
   A personal link, another server's ?server= or no server at all: the head, the nav, steps 2-3 and the footer wait
   unseen (their space kept) so nobody sees the Hood Lords copy flash before their own server's. */
html.dc-wait .dc-head, html.dc-wait .dc-brand, html.dc-wait .dc .nav, html.dc-wait #step-wallet, html.dc-wait #step-result, html.dc-wait .foot { visibility: hidden; }

/* ---------- header: the wordmark + "Discord" ---------- */
.dc-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.dc-brand-tag {
  padding-left: .7rem; border-left: 1px solid var(--line);
  font: 700 var(--step--1) var(--narrow); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim);
}
@media (max-width: 440px) { .dc .nav { display: none; } }   /* the X link is in the footer too */

/* ---------- head ---------- */
.dc-main { position: relative; overflow: clip; }
.dc-head, .dc-gate, .dc-meta { width: min(100% - 2 * var(--gutter), 720px); margin-inline: auto; }
.dc-head { padding: clamp(2rem, 7vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.dc-head > * { animation: rise .8s var(--ease-out) both; }
.dc-head > *:nth-child(2) { animation-delay: .08s; }
.dc-head > *:nth-child(3) { animation-delay: .16s; }
.dc-head > *:nth-child(4) { animation-delay: .24s; }
.dc-mark {
  margin: 0 0 .8rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 13vw, 6.5rem); line-height: .88; letter-spacing: .01em; padding-bottom: .05em;
  color: var(--lime);
}
.dc-sub { margin: 0; font-size: var(--step-1); line-height: 1.35; max-width: 34ch; color: var(--bone); }
/* Another server (Lords Verification): "Verify your <collection>" with "for <server>." under it, a size down —
   collection and server names run long, so the headline is sized for them, not for "Get into the Hood." */
.dc-tenant .dc-mark { font-size: clamp(2.5rem, 9.5vw, 5rem); overflow-wrap: anywhere; }
.dc-mark .dc-for { display: block; margin-top: .12em; font-size: .56em; line-height: 1; color: var(--bone); }
.dc-tenant .dc-head .eyebrow { display: flex; align-items: center; gap: .55rem; }
.dc-eyebrow-icon { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: cover; }
.dc-eyebrow-icon--none, .dc-srv-icon--none {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  background: var(--ink-3); color: var(--lime); font: 700 .8rem var(--narrow); letter-spacing: 0;
}
/* the server's own name in the header: its icon (round, like the Hood Lords avatar) and the name, cut short on a phone */
.dc-brand-srv { min-width: 0; }
.dc-brand-srv > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18ch; }
.dc-brand-srv .dc-srv-icon { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--lime); object-fit: cover; }
.dc-brand-srv .dc-srv-icon--none { width: 32px; height: 32px; border: 2px solid var(--lime); font-size: .95rem; }
/* a white-labelled server: its logo beside its icon (https only, js/discord.js), and its tagline under the headline */
.dc-brand-logo { height: 32px; width: auto; max-width: 96px; object-fit: contain; flex: none; }
.dc-tagline { margin: -.2rem 0 .9rem; max-width: 40ch; font: 700 var(--step-0)/1.3 var(--narrow); letter-spacing: .06em; color: var(--lime); overflow-wrap: anywhere; }
@media (max-width: 400px) { .dc-brand-logo { max-width: 64px; } }
@media (prefers-reduced-motion: reduce) { .dc-head > * { animation: none; } }

/* ---------- the one container ---------- */
.dc-gate {
  border: 3px solid var(--lime-dim);
  background: color-mix(in oklch, var(--lime) 4%, var(--ink));
  padding: clamp(1.25rem, 4vw, 2rem);
  animation: rise .7s var(--ease-out) .2s both;
}
/* A phone: the container runs edge to edge, so the rows get the whole width. */
@media (max-width: 520px) {
  .dc-gate { width: 100%; border-width: 3px 0; padding: 1.4rem var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .dc-gate { animation: none; } }

.dc-steps { list-style: none; margin: 0; padding: 0; }
.dc-step + .dc-step { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.dc-step .step-head { font-size: var(--step-0); letter-spacing: .1em; margin-bottom: .6rem; }
.dc-step .step-lede { font-size: var(--step-0); color: var(--bone-dim); margin-bottom: .9rem; }
.dc-step .step-lede:last-child { margin-bottom: 0; }
/* not reachable yet: the head stays readable (the path is visible), the number goes quiet */
.dc-step.is-waiting .step-head { color: var(--bone-dim); }
.dc-step.is-waiting .step-n { background: var(--ink-3); color: var(--bone-dim); }
.dc-step.is-done .step-n { background: transparent; color: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); }
.dc-muted { opacity: .8; }

/* ---------- step 1 ---------- */
.dc-discord-btn { min-width: 16rem; }
@media (max-width: 520px) { .dc-discord-btn { width: 100%; } }
.dc-note { margin: .8rem 0 0; font-size: var(--step--1); color: var(--bone-dim); max-width: 60ch; }
.dc-note:empty { display: none; }
.dc-note.is-bad { color: color-mix(in oklch, var(--red) 80%, var(--bone)); }   /* small text: a touch lighter than --red */
.dc-working::after { content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .5em; border-radius: 50%; background: var(--lime); animation: dc-pulse 1s ease-in-out infinite; }

/* a personal link from Discord that ran out: said plainly over the Connect Discord button (text, not a box) */
.dc-link-gone { margin: 0 0 .7rem; font-size: var(--step-0); line-height: 1.4; color: var(--bone); max-width: 52ch; }
.dc-link-gone b { color: var(--lime); font-weight: 700; }
.dc-link-gone .link-btn { margin-left: .2rem; }
.dc-link-gone + .step-lede, .dc-link-carry + .step-lede { font-size: var(--step--1); }
.dc-link-gone.is-warn { color: color-mix(in oklch, var(--red) 70%, var(--bone)); }   /* "Not me": a forwarded link */
.dc-link-carry { margin: 0 0 .7rem; font-size: var(--step--1); }
/* "Is this you?" — the question under the account, then That's me / Not me */
.dc-ask { margin: 1rem 0 0; font: 700 var(--step-1) var(--narrow); letter-spacing: .03em; color: var(--bone); }
.dc-ask + .dc-actions { margin-top: .7rem; }
.dc-ask ~ .hint b { color: var(--bone); }

.dc-who { display: flex; align-items: center; gap: .85rem; }
.dc-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--lime); object-fit: cover; }
.dc-avatar--none { display: inline-grid; place-items: center; background: var(--ink-3); color: var(--lime); font: 700 1.15rem var(--narrow); }
.dc-who-name { margin: 0; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dc-who-name b { font: 700 var(--step-1) var(--narrow); letter-spacing: .03em; color: var(--bone); overflow-wrap: anywhere; }
.dc-who-name span { margin-top: .15rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--lime-dim); }
.dc-who-name span em { font-style: normal; text-transform: none; letter-spacing: .03em; color: var(--bone-dim); }   /* the display name, as written */
.dc-who .link-btn { margin-left: auto; white-space: nowrap; }

/* ---------- step 2 ---------- */
.dc .connected-line { margin-top: 0; padding-top: 0; border-top: 0; max-width: none; }   /* the step's own rule is enough */
.dc .connected-line code, .dc-status code, .dc-line code, .dc .acct-list code, .dc-pick code {
  font-family: ui-monospace, Menlo, monospace; font-size: .92em; color: var(--bone);
}
.dc-pick { margin-top: .9rem; }
.dc-pick-lede { margin: 0; color: var(--bone); font-size: var(--step--1); }
.dc-pick-lede b { color: var(--lime); font-family: var(--narrow); letter-spacing: .06em; text-transform: uppercase; }
.dc-pick .hint { margin-top: .6rem; }
.dc-banished { margin-left: auto; font: 700 var(--step--1) var(--narrow); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklch, var(--red) 80%, var(--bone)); }

/* progress / error line — text, not a box */
.dc-status { margin: .9rem 0 0; color: var(--bone-dim); font-size: var(--step--1); max-width: 60ch; overflow-wrap: anywhere; }
.dc-verdict .dc-status { margin-top: .8rem; }
.dc .cw-go { white-space: nowrap; }
#add-wallet[hidden] { display: none; }
.dc-status:empty { display: none; }
.dc-status.is-busy { color: var(--bone); }
.dc-status.is-busy::before {
  content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .55em; vertical-align: .05em;
  border-radius: 50%; background: var(--lime); animation: dc-pulse 1s ease-in-out infinite;
}
.dc-status.is-bad { color: color-mix(in oklch, var(--red) 80%, var(--bone)); }
.dc-status.is-bad .link-btn { color: var(--lime); }
.dc-status.is-good { color: var(--lime); }
.dc-status b { color: inherit; }
#stop-wait { margin-top: .7rem; }
@keyframes dc-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dc-status.is-busy::before, .dc-working::after { animation: none; } }

/* ---------- step 3: the verdict ---------- */
.dc-verdict-mark {
  margin: 0 0 .45rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 4.5rem); line-height: .9; color: var(--lime);
}
.dc-verdict-mark.is-no { color: var(--bone-dim); }
.dc-verdict > .dc-verdict-mark { animation: rise .5s var(--ease-out) both; }
.dc-line { margin: .4rem 0 0; color: var(--bone); max-width: 52ch; }
.dc-line b { color: var(--lime); }
.dc-line a { color: var(--lime); }
.dc-dim { color: var(--bone-dim); font-size: var(--step--1); }
.dc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.dc-verdict .hint { margin-top: .8rem; }
@media (max-width: 520px) { .dc-actions .btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .dc-verdict > .dc-verdict-mark { animation: none; } }

/* the off state (verification not switched on) sits alone in the container — and so does the no-server state
   (no ?server=, no link, no session: "Which server?"), in the same words-and-buttons shape */
.dc-off-mark { margin: 0 0 .5rem; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 11vw, 4.5rem); line-height: .9; color: var(--lime); }
.dc-off-line { margin: 0; font-size: var(--step-1); line-height: 1.35; color: var(--bone); }
.dc-off-line b { color: var(--lime); font-weight: 700; }
.dc-noserver .dc-link-gone { margin: 0 0 .8rem; }
.dc-noserver .hint { margin-top: 1rem; }

/* ---------- step 3: linked wallets — plain divider rows ---------- */
.dc-verdict:not([hidden]) + .dc-linked { margin-top: 1.75rem; }
.dc-linked-head {
  margin: 0 0 .5rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim);
}
.dc-wallets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dc-wallets li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center;
  padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.dc-w-addr { grid-column: 1; font-family: ui-monospace, Menlo, monospace; font-size: var(--step-0); color: var(--bone); }
.dc-w-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 .8rem; font-size: var(--step--1); color: var(--bone-dim); }
.dc-w-what { font: 700 var(--step--1) var(--narrow); letter-spacing: .08em; text-transform: uppercase; }
.dc-wallets li.is-good .dc-w-what { color: var(--lime); }
.dc-w-when { opacity: .85; }
.dc-w-chain { font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dim); }   /* a server that checks more than one chain's wallets */
.dc-wallets .link-btn { grid-column: 2; grid-row: 1 / span 2; }
#add-wallet { margin-top: 1rem; }
#wallet-how + .dc-s2-who { margin-top: -.5rem; }
.dc-s2-who b { color: var(--lime); font-family: var(--narrow); letter-spacing: .03em; }

/* ---------- footer counter ---------- */
.dc-meta { margin: 1.25rem auto 0; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.dc-meta:empty { padding-bottom: clamp(2.5rem, 6vw, 4rem); }