/* ============================================================
   COMMUNITY — the Discord link
   ------------------------------------------------------------
   The one thing on the site that leaves the site, so it is the
   one thing allowed a colour that is not the workshop's amber:
   Discord's own blurple, used sparingly (an outline, a mark, a
   hover fill) so the page still reads as one product rather
   than as somebody else's badge dropped into it.

   Loaded after auth.css and devlog.css; its breakpoints match
   the gate's (900px tablet, 600px phone).
   ============================================================ */

:root {
    --discord: #5865f2;
    --discord-strong: #7983f5;
    --discord-ink: #ffffff;
}

/* ---------- Header ---------- */

.auth-bar-discord {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    /* The mark is the label's size, not the button's: an oversized glyph beside
       11px type is the thing that makes a nav button look like an advert. */
    line-height: 1;
}

.auth-bar-discord svg { fill: var(--discord-strong); flex: none; }

.auth-bar-discord:hover {
    border-color: var(--discord);
    background: rgba(88, 101, 242, 0.12);
}

.auth-bar-discord:hover svg { fill: var(--discord-ink); }

/* ---------- Small-screen menu ---------- */

/* The panel's rows are deliberately uniform, so this one is marked by its glyph
   alone rather than by a filled row shouting over the navigation. */
.auth-menu-item-discord svg { fill: var(--discord-strong); }

.auth-menu-item-discord:hover,
.auth-menu-item-discord:focus-visible {
    border-color: var(--discord);
    background: rgba(88, 101, 242, 0.12);
}

/* ---------- Home page band ---------- */

.auth-community-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(28px, 4vh, 44px) clamp(20px, 4vw, 44px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    /* A blurple wash at the top edge instead of a filled card: the section is an
       invitation, not an interruption of the page it sits in. */
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(88, 101, 242, 0.16), transparent 62%),
        linear-gradient(180deg, var(--bg-2), var(--bg-1) 70%);
}

.auth-community-mark {
    display: inline-flex;
    margin-bottom: var(--sp-3);
}

.auth-community-mark svg { fill: var(--discord-strong); }

.auth-community .auth-section-title { font-size: clamp(22px, 2.8vw, 31px); }

.auth-community .auth-section-sub {
    margin-bottom: clamp(20px, 3vh, 30px);
    max-width: 52ch;
}

.auth-btn-discord {
    /* Not full width like the sign-up buttons: those are the page's decision
       points and this is an aside, so it is sized to its own text. */
    width: auto;
    min-width: 240px;
    text-decoration: none;
    border-color: var(--discord);
    background: var(--discord);
    color: var(--discord-ink);
}

.auth-btn-discord svg { fill: currentColor; flex: none; }

.auth-btn-discord:hover:not(:disabled) {
    border-color: var(--discord-strong);
    background: var(--discord-strong);
    color: var(--discord-ink);
}

/* ---------- Tablet and below ---------- */

@media (max-width: 900px) {
    /* The header is behind the hamburger at this width, so the only thing to
       adjust is the band, which loses its side padding before its content. */
    .auth-community-inner { padding-inline: clamp(16px, 4vw, 32px); }
}

/* ---------- Phone ---------- */

@media (max-width: 600px) {
    .auth-community-inner {
        /* Edge-to-edge, like the log entries: side borders at 360px cost more
           reading width than the frame is worth. */
        border-inline: 0;
        border-radius: 0;
        padding-inline: var(--sp-4);
    }

    .auth-btn-discord {
        width: 100%;
        min-width: 0;
        /* Thumb target, same as the hero's calls to action. */
        min-height: 52px;
    }

    .auth-community .auth-section-sub { font-size: 14px; }
}