/* =========================================================================
   Guilds — dragon's-lair hero stage.
   Loaded only on /guilds via the extra_css block in templates/guilds/home.html.
   Scoped under .guilds-root so nothing here can leak into other surfaces.
   Mirrors the visual contract of Oracle (.oracle-gate-root / og-*) and
   Exchange (.exchange-root / ex-*): parallax ambient → gradient hero →
   reveal-animated content stack.
   ========================================================================= */

.guilds-root {
    --gld-blood:        #dc4a4a;
    --gld-blood-soft:   #e08a8a;
    --gld-blood-mid:    #9c4a4a;
    --gld-blood-deep:   #6b2e2e;
    --gld-blood-deeper: #3a1414;
    --gld-ember:        #f59e0b;
    --gld-ember-soft:   #fbbf24;
    --gld-ember-cream:  #fde68a;
    --gld-ink:          #0a0608;
    --gld-ink-mid:      #15080a;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 110% 70% at 50% -8%, rgba(220, 74, 74, 0.16) 0%, transparent 56%),
        linear-gradient(180deg, #0a0608 0%, #110709 42%, #0f070a 100%);
}

/* ---------- Ambient layer (parallax background) ---------- */

.guilds-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.guilds-ambient__parallax {
    position: absolute;
    inset: -6%;
    will-change: transform;
    transform: translate(
        calc(var(--gld-mx, 0px) * 0.42),
        calc(var(--gld-my, 0px) * 0.32)
    );
    transition: transform 110ms ease-out;
}

.guilds-ambient__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.guilds-ambient__depth {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0%, rgba(156, 74, 74, 0.10) 38%, transparent 62%),
        linear-gradient(180deg, rgba(15, 6, 8, 0.25) 0%, transparent 28%, transparent 68%, rgba(15, 6, 8, 0.55) 100%),
        radial-gradient(ellipse 120% 80% at 50% -10%, rgba(220, 74, 74, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 80% 55% at 50% 105%, rgba(245, 158, 11, 0.10) 0%, transparent 60%);
}

/* Smouldering "ember beams" — sweep across the hero like distant firelight. */
.guilds-ambient__beams {
    position: absolute;
    inset: -15% -20%;
}

.guilds-beam {
    position: absolute;
    width: 140%;
    height: 38%;
    left: -20%;
    transform-origin: 50% 50%;
    filter: blur(1px);
    mix-blend-mode: screen;
    animation: gld-beam-pulse 32s ease-in-out infinite;
    background: linear-gradient(
        102deg,
        transparent 0%,
        rgba(220, 74, 74, 0.16) 42%,
        rgba(245, 158, 11, 0.22) 50%,
        rgba(220, 74, 74, 0.14) 58%,
        transparent 100%
    );
}

.guilds-beam--1 {
    top: -8%;
    transform: rotate(-11deg) translateX(calc(var(--gld-mx, 0px) * -0.4));
    animation-delay: 0s;
}

.guilds-beam--2 {
    top: 32%;
    transform: rotate(-8deg) scaleY(0.85) translateX(calc(var(--gld-mx, 0px) * 0.35));
    animation-delay: -10s;
    animation-duration: 38s;
}

.guilds-beam--3 {
    bottom: -12%;
    transform: rotate(-14deg) translateX(calc(var(--gld-mx, 0px) * 0.2));
    animation-delay: -18s;
    animation-duration: 44s;
}

@keyframes gld-beam-pulse {
    0%, 100% { opacity: 0.16; }
    50%      { opacity: 0.30; }
}

/* Dragon-scale tile pattern — overlapping crescents in oxblood/ember, masked
   to a soft vignette (replaces the exchange fine chart-grid). */
.guilds-ambient__scales {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 100% 50%,
            transparent 22%,
            rgba(220, 74, 74, 0.085) 22%,
            rgba(220, 74, 74, 0.085) 24%,
            transparent 24%),
        radial-gradient(circle at 0% 50%,
            transparent 22%,
            rgba(245, 158, 11, 0.055) 22%,
            rgba(245, 158, 11, 0.055) 24%,
            transparent 24%);
    background-size: 36px 22px;
    background-position: 0 0, 18px 11px;
    mask-image: radial-gradient(ellipse 92% 62% at 50% 34%, black 0%, transparent 74%);
    opacity: 0.55;
}

/* Mountain skyline + perched keep silhouette (SVG layered: dim far range,
   stronger near range, and an ember-tinted keep crowning the tallest peak).
   Replaces the exchange tower-bar silhouette with a dragon-country horizon. */
.guilds-ambient__skyline {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 0;
    height: clamp(140px, 24vw, 220px);
    pointer-events: none;
    opacity: 0.78;
    transform: translateX(calc(var(--gld-mx, 0px) * 0.18));
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0,220L0,160L120,110L240,135L360,85L480,120L600,90L720,120L840,80L960,115L1080,95L1200,120L1200,220Z' fill='rgba(220,74,74,0.20)'/%3E%3Cpath d='M0,220L0,190L80,150L160,180L260,110L320,160L420,75L500,140L560,65L620,130L720,90L820,150L900,100L980,160L1060,110L1140,150L1200,130L1200,220Z' fill='rgba(106,30,30,0.55)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    filter: drop-shadow(0 -10px 22px rgba(220, 74, 74, 0.20));
    animation: gld-skyline-breathe 14s ease-in-out infinite;
}

@keyframes gld-skyline-breathe {
    0%, 100% { opacity: 0.72; }
    50%      { opacity: 0.86; }
}

/* Lake of smouldering coals at the foreground — small dim glow blobs scattered
   in front of the mountain range. Replaces the exchange perspective floor. */
.guilds-ambient__coals {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -6%;
    height: 40%;
    pointer-events: none;
    background-image:
        radial-gradient(circle 2px at 28% 62%, rgba(252, 211, 77, 0.85), transparent 65%),
        radial-gradient(circle 3px at 64% 18%, rgba(245, 158, 11, 0.70), transparent 65%),
        radial-gradient(circle 4px at 42% 78%, rgba(220, 74, 74, 0.55), transparent 65%),
        radial-gradient(circle 5px at 78% 48%, rgba(220, 74, 74, 0.50), transparent 60%),
        radial-gradient(circle 2px at 12% 30%, rgba(252, 211, 77, 0.65), transparent 65%);
    background-size: 96px 56px, 132px 78px, 174px 96px, 218px 118px, 80px 48px;
    background-position: 0 0, 48px 28px, 0 0, 86px 50px, 24px 12px;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 32%, rgba(0, 0, 0, 0.85) 60%, black 100%);
    opacity: 0.65;
    filter: blur(0.4px);
    animation: gld-coals-breathe 6s ease-in-out infinite;
    transform: translateX(calc(var(--gld-mx, 0px) * -0.08));
}

@keyframes gld-coals-breathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.92; }
}

.guilds-noise {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='gldn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gldn)'/%3E%3C/svg%3E");
    opacity: 0.042;
}

/* ---------- Rising embers (drifting particles) ---------- */

.guilds-embers {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.guilds-ember {
    position: absolute;
    left: var(--gld-ex, 10%);
    bottom: -8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gld-ember-soft);
    box-shadow:
        0 0 10px rgba(251, 191, 36, 0.65),
        0 0 18px rgba(220, 74, 74, 0.4);
    opacity: 0;
    animation: gld-ember-rise var(--gld-ed, 22s) var(--gld-edelay, 0s) linear infinite;
}

@keyframes gld-ember-rise {
    0% {
        bottom: -8px;
        opacity: 0;
        transform: translateX(0) scale(1);
    }
    12% { opacity: 0.65; }
    50% { transform: translateX(-22px) scale(1.05); }
    88% { opacity: 0.4; }
    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(-46px) scale(0.6);
    }
}

/* ---------- Content (above ambient) ---------- */

.guilds-content {
    position: relative;
    z-index: 2;
    padding: 0 var(--spacing-6) var(--spacing-8);
    /* Block any vertical scrollbar from ever painting on this
       container. The page (``html``) owns the only legitimate
       vertical scroll context, so a scrollbar here would be a
       transient artifact (tab-panel fade-in, async content
       hydration, mobile chat-immersive layout shifts) rather
       than something the user could actually use. ``overflow-y:
       clip`` shuts that down without creating a scroll
       container — content stays in its natural flow and the
       page-level scroll keeps working as expected. */
    overflow-y: clip;
}

@media (max-width: 768px) {
    .guilds-content {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
}

/* ---------- Stage head (icon title → kicker → big gradient headline → subtitle) ---------- */

.guilds-stage-head {
    text-align: center;
    padding: clamp(1.6rem, 4vw, 2.8rem) var(--spacing-6) clamp(1rem, 2.4vw, 1.6rem);
    border-bottom: 0;
    box-shadow: none;
}

.guilds-stage-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff5f0;
    text-shadow: 0 0 28px rgba(220, 74, 74, 0.20);
}

.guilds-stage-title i {
    color: var(--gld-blood-soft);
    filter: drop-shadow(0 0 12px rgba(220, 74, 74, 0.55));
}

.gld-headline {
    margin: 0 auto 1.1rem;
    text-align: center;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    font-weight: 400;
}

.gld-headline-kicker {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-family: 'Sora', sans-serif;
    font-size: clamp(13px, 2vw, 16px);
    font-weight: 600;
    color: rgba(224, 138, 138, 0.85);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.guilds-coming-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(220, 74, 74, 0.45);
    background: rgba(106, 30, 30, 0.32);
    color: #fde68a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.guilds-coming-pill i {
    color: var(--gld-ember-soft);
    font-size: 0.95em;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.55));
}

.gld-headline-main {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    /* Size matches `.og-headline-main` on /oracle ("Active Offerings
       Contracts") so the two page-level stage headlines stay visually
       consistent across the Guild Hall and the Oracle stage. */
    font-size: clamp(1.8rem, 6vw, 2.85rem);
    font-weight: 800;
    /* Plus Jakarta Sans needs ~1.25em of vertical space to fully contain
       its ascenders + descenders. The Oracle gate uses 1.08 here, but
       on Guilds the headline is wrapped in `.gld-headline` which carries
       `overflow: hidden` (used by the chat-immersive collapse animation
       on this page only). With a sub-1.25 line-height, the descender of
       the `y` in "Forge your" overflows its own line box and gets clipped
       — especially visible when the headline wraps and the gradient
       "Guild" sits on the next line. Bumping to 1.2 gives descenders the
       room they need without meaningfully changing the visual rhythm. */
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #fff5f0;
}

.gld-headline-active {
    color: #ffffff;
}

.gld-gradient-text {
    background: linear-gradient(
        135deg,
        #f7c8c8 0%,
        var(--gld-blood) 22%,
        var(--gld-ember) 52%,
        var(--gld-ember-soft) 78%,
        var(--gld-blood-soft) 100%
    );
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gld-gradient-shift 5s ease infinite;
}

@keyframes gld-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.gld-subtitle {
    font-family: 'Sora', sans-serif;
    font-size: clamp(15px, 2.2vw, 17px);
    line-height: 1.78;
    color: rgba(255, 235, 230, 0.66);
    margin: 0 auto 1.2rem;
    max-width: 620px;
    text-align: center;
}

/* ---------- Feature stack (stats grid + coming-soon card) ---------- */

.guilds-feature-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    max-width: 920px;
    margin: 0 auto;
}

.guilds-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(220, 74, 74, 0.30);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(58, 20, 20, 0.62) 0%, rgba(26, 10, 12, 0.74) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.06),
        0 18px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.guilds-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 12px;
    background: rgba(20, 8, 10, 0.55);
    border: 1px solid rgba(220, 74, 74, 0.14);
}

.guilds-stat-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #6b2e2e, #2a0e0e);
    color: var(--gld-ember-cream);
    font-size: 0.8rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.16),
        0 0 12px rgba(220, 74, 74, 0.25);
}

.guilds-stat-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.18rem;
    font-weight: 800;
    color: #fff5f0;
    letter-spacing: -0.01em;
}

.guilds-stat-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(224, 138, 138, 0.85);
    text-align: center;
}

@media (max-width: 640px) {
    .guilds-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Feature card — Coming-Soon panel with ember glow. */
.guilds-feature-card {
    position: relative;
    border-radius: 22px;
    padding: 1.5px;
    background: linear-gradient(
        140deg,
        rgba(220, 74, 74, 0.55) 0%,
        rgba(245, 158, 11, 0.32) 32%,
        rgba(58, 20, 20, 0.18) 62%,
        rgba(220, 74, 74, 0.42) 100%
    );
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(220, 74, 74, 0.10);
    isolation: isolate;
}

.guilds-feature-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(245, 158, 11, 0.22) 0%, transparent 60%);
    opacity: 0.5;
    filter: blur(24px);
    z-index: -1;
    pointer-events: none;
}

.guilds-feature-card__inner {
    border-radius: 20px;
    padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
    background:
        radial-gradient(ellipse 90% 70% at 50% 0%, rgba(220, 74, 74, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(26, 10, 12, 0.92) 0%, rgba(12, 6, 8, 0.96) 100%);
    text-align: center;
}

.guilds-feature-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.42);
    background: rgba(106, 50, 18, 0.32);
    color: #fde68a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}

.guilds-feature-card__badge i {
    color: var(--gld-ember-soft);
    font-size: 0.95em;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.45));
}

.guilds-feature-card__title {
    margin: 0 0 0.55rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.4rem, 3.4vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff5f0;
    text-shadow: 0 0 28px rgba(220, 74, 74, 0.18);
}

.guilds-feature-card__body {
    margin: 0 auto 1.2rem;
    max-width: 580px;
    font-family: 'Sora', sans-serif;
    font-size: clamp(14px, 2vw, 15.5px);
    line-height: 1.7;
    color: rgba(255, 235, 230, 0.7);
}

.guilds-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 640px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    text-align: left;
}

.guilds-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(58, 20, 20, 0.45);
    border: 1px solid rgba(220, 74, 74, 0.18);
    color: #f7d9d3;
    font-family: 'Sora', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.guilds-feature-list li i {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b3535, #3a1414);
    color: var(--gld-ember-cream);
    font-size: 0.75rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 0 10px rgba(220, 74, 74, 0.22);
}

@media (max-width: 560px) {
    .guilds-feature-list {
        grid-template-columns: 1fr;
    }
}

/* ---------- Reveal animations (intersection-observer based) ---------- */

.guilds-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.guilds-stage-head.guilds-reveal { transition-delay: 0.06s; }
.guilds-feature-stack > .guilds-reveal:nth-child(1) { transition-delay: 0.14s; }
.guilds-feature-stack > .guilds-reveal:nth-child(2) { transition-delay: 0.22s; }

.guilds-reveal.guilds-reveal--in {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Trim the .feed-main inner padding so the ambient layer spans edge-to-edge. */
.feed-layout > .feed-main:has(.guilds-root) {
    padding: 0;
}

/* ---------- Tabs (segmented pill control: Guilds / My Guild) ---------- */

.guilds-tabs-section {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    /* This wrapper holds BOTH the segmented pill row AND all three
       tab panels (Guilds / My Guild / Guild Chat). During the
       ``.guilds-reveal`` intro animation it carries a transform
       (``translateY(20px) → 0``) that promotes it onto its own
       compositor layer, and during chat-immersive transitions it
       can briefly absorb a few stray pixels of overflow as the
       hero collapse and chat panel grow settle. ``overflow-y:
       clip`` shuts down any scrollbar painting on this surface
       without creating a scroll container, so the y-axis layout
       stays open to ``position: sticky`` and the page-level
       scroll keeps owning the only legitimate scroll context. */
    overflow-y: clip;
}

.guilds-tabs {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(220, 74, 74, 0.30);
    background: rgba(20, 10, 12, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.05),
        0 8px 22px rgba(0, 0, 0, 0.40);
}

.guilds-tab {
    /* Each tab shares the row width equally so the bar fills the column. */
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: rgba(224, 200, 200, 0.82);
    padding: 9px 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.guilds-tab i {
    font-size: 0.92em;
    opacity: 0.85;
    color: var(--gld-blood-soft);
}

.guilds-tab:hover {
    color: #fff5f0;
    border-color: rgba(220, 74, 74, 0.40);
    background: rgba(106, 30, 30, 0.22);
}

.guilds-tab.is-active {
    background: linear-gradient(135deg, rgba(220, 74, 74, 0.50) 0%, rgba(106, 30, 30, 0.62) 100%);
    border-color: rgba(245, 158, 11, 0.50);
    color: #fff5f0;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.12),
        0 0 22px rgba(220, 74, 74, 0.30);
}

.guilds-tab.is-active i {
    color: var(--gld-ember-soft);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.45));
}

/* Tab panels */
.guilds-tab-panel {
    display: none;
    /* ``overflow: clip`` (rather than ``hidden``) hides any transient
       overflow during the fade-in animation without creating a
       scroll container — so the panel never flashes its own
       scrollbar as the layout settles. ``clip`` also blocks the
       scrollbar from appearing while async content (chat history,
       roster rows, leaderboard rows) loads in and grows the panel
       row-by-row. Page scroll is unaffected because the panel
       itself sizes to its content, so there's nothing to clip. */
    overflow: clip;
}

.guilds-tab-panel.is-active {
    display: block;
    animation: gld-tab-fade 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    /* Belt-and-braces with the parent's ``overflow: clip``: an
       explicit ``overflow-y: hidden`` on the active panel guarantees
       no vertical scrollbar ever paints on the panel itself (older
       browsers without ``overflow: clip`` support still get the
       hidden treatment, and we sidestep any subtle layer-promotion
       quirks that can briefly resurface a scrollbar during the
       transform-based fade-in animation). Page scroll is unaffected
       — the body/html chain still owns the only scroll context. */
    overflow-y: hidden;
}

@keyframes gld-tab-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Guild leaderboard table ---------- */

/* Toolbar above the leaderboard — currently holds the guild-name search
   input. Sits flush against the shell visually but is its own row so
   it can grow (filters / sort dropdowns) later without disturbing the
   table layout. */
.guilds-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

/* Charter / Enlisted CTA rides on the right end of the search toolbar. */
.guilds-table-toolbar > .guilds-charter-btn {
    margin-left: auto;
    flex-shrink: 0;
}

.guilds-table-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 420px;
    background: rgba(20, 10, 12, 0.78);
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 999px;
    padding: 0 0.85rem 0 2.2rem;
    height: 38px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.guilds-table-search:focus-within {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow:
        0 0 0 2px rgba(245, 158, 11, 0.12),
        0 0 18px rgba(220, 74, 74, 0.18);
}

.guilds-table-search-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: rgba(255, 235, 230, 0.45);
    pointer-events: none;
}

.guilds-table-search:focus-within .guilds-table-search-icon {
    color: var(--gld-ember-soft);
}

.guilds-table-search-input {
    flex: 1 1 auto;
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff5f0;
    font-size: 0.92rem;
    font-family: inherit;
    padding: 0;
    line-height: 36px;
    /* Strip the default WebKit search controls so the clear button is
       the only affordance and the input looks consistent across UAs. */
    appearance: none;
    -webkit-appearance: none;
}

.guilds-table-search-input::-webkit-search-cancel-button,
.guilds-table-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.guilds-table-search-input::placeholder {
    color: rgba(255, 235, 230, 0.4);
}

.guilds-table-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: rgba(220, 74, 74, 0.22);
    color: rgba(255, 235, 230, 0.85);
    cursor: pointer;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    flex: 0 0 auto;
    transition: background 0.16s ease, color 0.16s ease;
}

.guilds-table-search-clear:hover,
.guilds-table-search-clear:focus-visible {
    background: rgba(220, 74, 74, 0.4);
    color: #fff5f0;
    outline: none;
}

.guilds-table-search-clear[hidden] {
    display: none;
}

/* No-results state for the leaderboard search — only visible when a
   query is active and matches zero rows. Reuses the empty-state visual
   language so it doesn't feel like a different surface. */
.guilds-table-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: rgba(255, 235, 230, 0.72);
}

.guilds-table-no-results[hidden] {
    display: none;
}

.guilds-table-shell {
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 18px;
    background: rgba(20, 10, 12, 0.78);
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.06),
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(220, 74, 74, 0.10);
    overflow: hidden;
}

.guilds-table-wrap {
    /* No horizontal scroll — every column is sized so the table fits the
     * shell on any viewport, and the guild-name cell truncates with an
     * ellipsis if needed. */
    overflow-x: hidden;
}

.guilds-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Column sizing via <colgroup>. Every fixed column is sized to fit *both*
 * its header text ("FOUNDER", "MEMBERS", "RENOWN", etc.) and its content
 * chip after horizontal padding. Guild gets ``width: auto`` so it absorbs
 * the rest and its name ellipsizes when long. */
.guilds-table col.guilds-table-col-rank    { width: 76px; }
.guilds-table col.guilds-table-col-leader  { width: min(172px, 28vw); }
.guilds-table col.guilds-table-col-members { width: 104px; }
.guilds-table col.guilds-table-col-renown  { width: 116px; }
.guilds-table col.guilds-table-col-name    { width: auto; }

.guilds-table th,
.guilds-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(220, 74, 74, 0.12);
    font-size: 0.92rem;
    color: rgba(255, 235, 230, 0.88);
    /* Clip overflow inside fixed-width columns so the long "FOUNDER" header
     * text or a wide avatar doesn't bleed into the neighbouring cell. The
     * Guild name cell is the only one that holds free text — its <span>
     * already ellipsizes via white-space: nowrap + text-overflow. */
    overflow: hidden;
}

/* Centred chip cells — keep the member count in the middle of its narrow
 * column. Founder reads left-aligned (avatar + name + handle); renown is
 * right-aligned.
 * Columns: 1 Rank · 2 Guild · 3 Founder · 4 Members · 5 Renown */
.guilds-table th:nth-child(4),
.guilds-table td:nth-child(4) {
    text-align: center;
}
.guilds-table th:nth-child(5),
.guilds-table td:nth-child(5) {
    text-align: right;
}

.guilds-table tbody tr:last-child td {
    border-bottom: none;
}

.guilds-table thead th {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gld-ember-cream);
    background: linear-gradient(180deg, rgba(106, 30, 30, 0.46) 0%, rgba(58, 20, 20, 0.36) 100%);
    border-bottom-color: rgba(245, 158, 11, 0.24);
    white-space: nowrap;
}

.guilds-table tbody tr {
    transition: background 0.16s ease;
}

.guilds-table tbody tr:hover {
    background: rgba(220, 74, 74, 0.10);
}

.guilds-table-row-ghost {
    pointer-events: none;
}

.guilds-table-row-ghost td {
    color: rgba(255, 235, 230, 0.28) !important;
}

.guilds-table-row-ghost .guilds-table-rank,
.guilds-table-row-ghost .guilds-table-name-crest,
.guilds-table-row-ghost .guilds-table-renown i {
    opacity: 0.45;
}

/* Rank pill */
.guilds-table-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(220, 74, 74, 0.18);
    border: 1px solid rgba(220, 74, 74, 0.36);
    color: var(--gld-blood-soft);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.guilds-table-rank--gold {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.55);
    color: var(--gld-ember-cream);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.30);
}

.guilds-table-rank--silver {
    background: rgba(200, 200, 200, 0.14);
    border-color: rgba(220, 220, 220, 0.32);
    color: #ececec;
}

.guilds-table-rank--bronze {
    background: rgba(180, 100, 60, 0.18);
    border-color: rgba(205, 130, 80, 0.36);
    color: #ddae8a;
}

/* Guild name cell (crest + name) — flex so the inner label can shrink and
 * ellipsize. The parent <td> also gets `min-width: 0` so it doesn't push
 * the row wider than the column. */
.guilds-table-cell-name {
    min-width: 0;
}

.guilds-table-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-weight: 700;
    color: #fff5f0;
    text-decoration: none;
    transition: transform 0.16s ease;
}

a.guilds-table-name:hover,
a.guilds-table-name:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

a.guilds-table-name:hover .guilds-table-name-label,
a.guilds-table-name:focus-visible .guilds-table-name-label {
    color: var(--gld-ember-cream);
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.40);
}

a.guilds-table-name:hover .guilds-charter-preview-crest,
a.guilds-table-name:focus-visible .guilds-charter-preview-crest {
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.22),
        0 0 14px rgba(245, 158, 11, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.45);
}

.guilds-table-name-crest {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: linear-gradient(135deg, #8b3535, #3a1414);
    color: var(--gld-ember-cream);
    font-size: 0.7rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 0 8px rgba(220, 74, 74, 0.22);
}

/* Founder cell — avatar plus stacked display name / @username (mirror roster). */
.guilds-table-cell-leader {
    min-width: 0;
    text-align: left;
}

.guilds-table-leader-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.25;
    max-width: 100%;
    min-width: 0;
    border-radius: 10px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    color: inherit;
    text-decoration: none;
}

.guilds-table-leader-strip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
}

.guilds-table-leader-strip--empty {
    opacity: 0.45;
}

.guilds-table-leader-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.guilds-table-leader-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff5f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-table-leader-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 235, 230, 0.52);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-table-leader-link:hover,
.guilds-table-leader-link:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.guilds-table-leader-link:hover .guilds-table-leader-avatar,
.guilds-table-leader-link:focus-visible .guilds-table-leader-avatar {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 0 12px rgba(245, 158, 11, 0.40);
}

.guilds-table-leader-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(220, 74, 74, 0.36);
    background: linear-gradient(135deg, #8b3535, #3a1414);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.14),
        0 0 8px rgba(220, 74, 74, 0.22);
    color: var(--gld-ember-cream);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.guilds-table-leader-avatar--placeholder {
    /* Placeholder uses the same chip — first letter is the content. */
    letter-spacing: 0.02em;
}

.guilds-table-renown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gld-ember-cream);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

.guilds-table-renown i {
    color: var(--gld-ember-soft);
    font-size: 0.86em;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.40));
}

/* Empty state inside the table shell (below the table) */
.guilds-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.4rem 1.5rem 1.6rem;
    text-align: center;
    border-top: 1px solid rgba(220, 74, 74, 0.18);
    background: rgba(15, 6, 8, 0.55);
}

.guilds-table-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b3535, #3a1414);
    color: var(--gld-ember-cream);
    font-size: 1.05rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 0 14px rgba(220, 74, 74, 0.28);
}

.guilds-table-empty-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff5f0;
}

.guilds-table-empty-body {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 235, 230, 0.68);
    max-width: 460px;
}

/* ---------- My Guild empty state ---------- */

.guilds-my-empty {
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 18px;
    padding: 2.4rem 1.5rem 2.6rem;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(26, 10, 12, 0.78) 0%, rgba(15, 6, 8, 0.86) 100%);
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.06),
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(220, 74, 74, 0.10);
    text-align: center;
}

.guilds-my-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b3535, #3a1414);
    color: var(--gld-ember-cream);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.20),
        0 0 22px rgba(220, 74, 74, 0.32);
}

.guilds-my-empty-title {
    margin: 0 0 0.55rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff5f0;
}

.guilds-my-empty-body {
    margin: 0 auto;
    max-width: 460px;
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 235, 230, 0.72);
}

/* ---------- My Guild summary card ----------
   Rendered on the "My Guild" tab once the viewer has chartered. Shares the
   crest gradient with the charter preview by reusing
   ``.guilds-charter-preview-crest`` + ``data-style`` (large variant). */

.guilds-my-card {
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 18px;
    padding: 1.4rem 1.6rem 1.5rem;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 158, 11, 0.12) 0%, transparent 65%),
        linear-gradient(180deg, rgba(26, 10, 12, 0.82) 0%, rgba(15, 6, 8, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.08),
        0 20px 44px rgba(0, 0, 0, 0.50),
        0 0 36px rgba(220, 74, 74, 0.12);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.guilds-my-card-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}

.guilds-my-card-headline {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.guilds-my-card-name {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.2rem, 2.6vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff5f0;
    text-shadow: 0 0 18px rgba(220, 74, 74, 0.22);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-my-card-motto {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 0.92rem;
    line-height: 1.4;
    color: rgba(255, 235, 230, 0.78);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.guilds-my-card-motto-text {
    font-style: italic;
}

/* Tiny pencil chip that sits next to the motto for the founder.
   Sized so the row's baseline doesn't visibly shift when the chip
   is added; on hover it warms up to the ember palette. */
.guilds-my-card-motto-edit {
    appearance: none;
    border: 1px solid rgba(245, 158, 11, 0.30);
    background: rgba(106, 50, 18, 0.28);
    color: var(--gld-ember-cream);
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.guilds-my-card-motto-edit:hover {
    background: rgba(120, 60, 22, 0.50);
    border-color: rgba(245, 158, 11, 0.55);
    color: #fff5e1;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.guilds-my-card-motto-edit:focus-visible {
    outline: none;
    border-color: rgba(245, 158, 11, 0.65);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.30);
}

/* Empty-state variant — the founder has not picked a motto yet, so
   the row collapses to a single "Add a motto" CTA chip. */
.guilds-my-card-motto--empty {
    font-style: normal;
    color: rgba(255, 235, 230, 0.55);
}

.guilds-my-card-motto-add {
    appearance: none;
    border: 1px dashed rgba(245, 158, 11, 0.35);
    background: rgba(106, 50, 18, 0.18);
    color: var(--gld-ember-cream);
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.guilds-my-card-motto-add:hover {
    background: rgba(120, 60, 22, 0.42);
    border-color: rgba(245, 158, 11, 0.60);
    border-style: solid;
    color: #fff5e1;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

.guilds-my-card-motto-add:focus-visible {
    outline: none;
    border-color: rgba(245, 158, 11, 0.70);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28);
}

/* Counter chip on the edit-motto modal — turns ember when the user
   crosses ~90% of the cap as a soft "you're nearly out of room" cue. */
#guildsEditMottoCounter.is-near-cap {
    color: var(--gld-ember-cream);
}

.guilds-my-card-founder {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: rgba(255, 235, 230, 0.62);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.guilds-my-card-founder i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.50));
}

.guilds-my-card-founder strong {
    color: rgba(255, 235, 230, 0.92);
    font-weight: 700;
    text-transform: none;
}

.guilds-my-card-founder-link {
    color: var(--gld-ember-cream);
    font-weight: 700;
    text-transform: none;
    text-decoration: none;
    transition: color 0.16s ease, text-shadow 0.16s ease;
}

.guilds-my-card-founder-link:hover,
.guilds-my-card-founder-link:focus-visible {
    color: #fde68a;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
    outline: none;
}

/* Level badge — Roman numeral on the right end of the header. */
.guilds-my-card-level {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background:
        linear-gradient(180deg, rgba(106, 50, 18, 0.45) 0%, rgba(58, 20, 20, 0.55) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.14),
        0 6px 14px rgba(0, 0, 0, 0.40),
        0 0 18px rgba(245, 158, 11, 0.18);
}

.guilds-my-card-level-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 235, 230, 0.68);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.guilds-my-card-level-roman {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--gld-ember-cream);
    line-height: 1;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
}

/* Renown progress bar — fire-tinted segment of the way toward the next level. */
.guilds-my-card-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guilds-my-card-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 0.84rem;
    color: rgba(255, 235, 230, 0.82);
}

.guilds-my-card-progress-meta i {
    color: var(--gld-ember-soft);
    margin-right: 4px;
}

.guilds-my-card-progress-meta strong {
    color: var(--gld-ember-cream);
    font-weight: 800;
}

.guilds-my-card-progress-next {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: rgba(255, 235, 230, 0.62);
    letter-spacing: 0.02em;
}

.guilds-my-card-progress-max {
    color: var(--gld-ember-cream);
}

.guilds-my-card-progress-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(20, 8, 10, 0.85) 0%, rgba(10, 4, 5, 0.95) 100%);
    border: 1px solid rgba(220, 74, 74, 0.30);
    overflow: hidden;
}

.guilds-my-card-progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(220, 74, 74, 0.78) 0%,
        rgba(245, 158, 11, 0.90) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.30),
        0 0 12px rgba(245, 158, 11, 0.50);
    border-radius: 999px;
    transition: width 0.35s ease;
}

/* Stat tiles — 4-up on desktop, 2-up on phones. */
.guilds-my-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.guilds-my-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0.7rem 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(220, 74, 74, 0.22);
    background:
        linear-gradient(180deg, rgba(58, 20, 20, 0.50) 0%, rgba(26, 10, 12, 0.70) 100%);
}

.guilds-my-card-stat-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(106, 30, 30, 0.55);
    color: var(--gld-ember-soft);
    font-size: 0.78rem;
    margin-bottom: 2px;
}

.guilds-my-card-stat-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff5f0;
    line-height: 1.05;
}

.guilds-my-card-stat-cap {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 235, 230, 0.52);
    margin-left: 1px;
}

.guilds-my-card-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    color: rgba(255, 235, 230, 0.58);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* ---------- Notoriety row (Posts / Likes / Reposts) ----------
   Sibling block inside ``.guilds-my-card`` that hosts the second row of
   three stat tiles. The header + thin ember divider above visually couple
   it to the first stats grid so the two rows read as one paired set. */

.guilds-my-card-notoriety {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(245, 158, 11, 0.18);
}

.guilds-my-card-notoriety-head {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.guilds-my-card-notoriety-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--gld-ember-cream);
}

.guilds-my-card-notoriety-title i {
    color: var(--gld-ember-soft);
    font-size: 0.84em;
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45));
}

.guilds-my-card-notoriety-sub {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 235, 230, 0.62);
}

/* ---------- Reusable crest-preview size variants ----------
   The crest gradients are owned by ``.guilds-charter-preview-crest[data-style=X]``
   blocks further down the file. These variants only override geometry so the
   same element renders correctly in the leaderboard (sm), sidebar (xs), and
   My Guild card (lg) contexts. */

.guilds-charter-preview-crest.guilds-charter-preview-crest--xs {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 6px;
    font-size: 0.72rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.42),
        0 0 8px rgba(220, 74, 74, 0.24);
}

.guilds-charter-preview-crest.guilds-charter-preview-crest--sm {
    /* Compact crest used in the leaderboard's Guild cell. Double-class
     * selector is intentional — the base ``.guilds-charter-preview-crest``
     * rule is declared *after* this one and would otherwise win the
     * cascade and reinflate the crest back to 44px. */
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 6px;
    font-size: 0.7rem;
}

.guilds-charter-preview-crest.guilds-charter-preview-crest--lg {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 14px;
    font-size: 1.7rem;
}

/* ---------- Right-sidebar top-guilds list ---------- */

.guilds-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guilds-sidebar-item {
    /* The grid lives on the inner ``.guilds-sidebar-link`` so the whole row
       is a single click-target; the <li> just owns the list spacing. */
    padding: 0;
}

.guilds-sidebar-link {
    display: grid;
    grid-template-columns: 16px auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.16s ease, transform 0.16s ease;
}

.guilds-sidebar-link:hover,
.guilds-sidebar-link:focus-visible {
    background: rgba(220, 74, 74, 0.10);
    transform: translateX(2px);
    outline: none;
}

.guilds-sidebar-link:hover .guilds-sidebar-name,
.guilds-sidebar-link:focus-visible .guilds-sidebar-name {
    color: var(--gld-ember-cream);
}

.guilds-sidebar-link:hover .guilds-charter-preview-crest,
.guilds-sidebar-link:focus-visible .guilds-charter-preview-crest {
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.22),
        0 0 12px rgba(245, 158, 11, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.4);
}

.guilds-sidebar-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 235, 230, 0.58);
    text-align: right;
}

.guilds-sidebar-name {
    font-family: 'Sora', sans-serif;
    font-size: 0.86rem;
    color: rgba(255, 235, 230, 0.88);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-sidebar-renown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--gld-ember-cream);
    white-space: nowrap;
}

.guilds-sidebar-renown i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.45));
}

/* ---------- Leaderboard cell decorations ---------- */

.guilds-table-name-text {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.guilds-table-name-label {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: #fff5f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Motto is no longer rendered in the leaderboard table — kept hidden here
 * just in case an older partial leaks one in. */
.guilds-table-name-motto {
    display: none;
}

.guilds-table-members {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: rgba(255, 235, 230, 0.92);
}

.guilds-table-members-cap {
    color: rgba(255, 235, 230, 0.45);
    font-weight: 600;
}

.guilds-table-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(106, 50, 18, 0.30);
    color: var(--gld-ember-cream);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

/* ---------- Enlisted badge (Charter button placeholder when in a guild) ---- */

.guilds-charter-btn.guilds-charter-btn--enlisted {
    cursor: default;
    pointer-events: none;
    color: rgba(255, 235, 230, 0.62);
    border-color: rgba(220, 74, 74, 0.22);
    background: linear-gradient(180deg, rgba(58, 20, 20, 0.42) 0%, rgba(26, 10, 12, 0.55) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.06);
}

.guilds-charter-btn.guilds-charter-btn--enlisted i {
    color: var(--gld-ember-soft);
    filter: none;
}

@media (max-width: 540px) {
    .guilds-table th,
    .guilds-table td {
        font-size: 0.85rem;
    }
    .guilds-tab {
        padding: 7px 14px;
        font-size: 0.78rem;
    }
    /* "GUILD CHAT" wraps onto two lines in the segmented pill on
       phones — collapse the "Guild " prefix so the tab reads just
       "CHAT" and stays on a single line. */
    .guilds-tab-label-prefix {
        display: none;
    }
    .guilds-table-name-crest,
    .guilds-charter-preview-crest.guilds-charter-preview-crest--sm {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        font-size: 0.64rem;
    }
    .guilds-table-name-label {
        font-size: 0.78rem;
    }
    /* Shrink fixed columns a touch on small screens so the name column
     * keeps room to breathe before ellipsizing. */
    .guilds-table col.guilds-table-col-rank    { width: 56px; }
    .guilds-table col.guilds-table-col-leader  { width: min(140px, 36vw); }
    .guilds-table col.guilds-table-col-members { width: 80px; }
    .guilds-table col.guilds-table-col-renown  { width: 90px; }
    .guilds-table th,
    .guilds-table td {
        padding: 10px 6px;
    }
    .guilds-table-leader-avatar {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        font-size: 0.66rem;
    }
    .guilds-my-card {
        padding: 1.1rem 1rem 1.2rem;
    }
    .guilds-my-card-header {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .guilds-my-card-level {
        grid-column: 1 / span 2;
        flex-direction: row;
        justify-self: stretch;
        justify-content: space-between;
    }
    .guilds-my-card-level-roman {
        font-size: 1.3rem;
    }
    .guilds-my-card-stats {
        /* Stays at 3 cols on mobile so the two-row 3x2 grid still reads as
           a paired set; padding inside ``.guilds-my-card-stat`` shrinks
           below to keep each tile tappable. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .guilds-my-card-stat {
        padding: 0.55rem 0.4rem 0.6rem;
    }
    .guilds-my-card-stat-value {
        font-size: 0.96rem;
    }
    .guilds-my-card-stat-icon {
        width: 24px;
        height: 24px;
        font-size: 0.78rem;
    }
}

/* ---------- Tabs row (tabs centered, Charter button slotted right) ---------- */

.guilds-tabs-row {
    /* Tabs now own the full row width — the Charter / Enlisted control
     * moved into the search toolbar below so the tab bar can stretch
     * uninterrupted across the column. */
    display: flex;
    align-items: center;
}

.guilds-tabs-row > .guilds-tabs {
    flex: 1 1 auto;
    width: 100%;
}

/* The Charter call-to-action — scroll + label, ember-glow on hover. */
.guilds-charter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.55);
    background:
        linear-gradient(135deg, rgba(220, 74, 74, 0.42) 0%, rgba(106, 30, 30, 0.62) 60%, rgba(58, 20, 20, 0.78) 100%);
    color: var(--gld-ember-cream);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.14),
        0 8px 22px rgba(0, 0, 0, 0.40),
        0 0 20px rgba(245, 158, 11, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.guilds-charter-btn i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
    font-size: 0.95em;
}

.guilds-charter-btn:hover {
    color: #fff5f0;
    border-color: rgba(245, 158, 11, 0.85);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.22),
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(245, 158, 11, 0.32);
}

.guilds-charter-btn:active {
    transform: translateY(0);
}

.guilds-charter-btn:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    /* Toolbar wraps so the Charter button drops below the search input
     * on narrow screens instead of being squeezed. */
    .guilds-table-toolbar {
        flex-wrap: wrap;
    }
    .guilds-table-toolbar > .guilds-charter-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    /* Tabs stay edge-to-edge full width on mobile (already flex). */
}

/* ============================================================
   Charter modal — guild creation flow.
   Lives at the root of .guilds-root so it spans the viewport
   on top of the parallax ambient. Fixed positioning; scoped
   under .guilds-charter-modal so nothing leaks.
   ============================================================ */

.guilds-charter-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.4rem, 2vw, 1rem);
}

.guilds-charter-modal[hidden] {
    display: none;
}

.guilds-charter-modal-backdrop {
    position: absolute;
    inset: 0;
    /* Heavier solid black overlay (was 0.78 + a centered red ember glow).
       The ember glow + thinner overlay were letting the page's fire/ember
       layers tint the modal's top corners. */
    background: rgba(4, 2, 3, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: gld-charter-backdrop-in 0.25s ease-out both;
}

@keyframes gld-charter-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.guilds-charter-modal-shell {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 1rem);
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    padding: 1.5px;
    /* Uniform, low-saturation ring — avoids the bright red/amber glints that
       a multi-stop diagonal gradient placed at the top corners. */
    background: linear-gradient(
        180deg,
        rgba(106, 30, 30, 0.42) 0%,
        rgba(58, 20, 20, 0.32) 100%
    );
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 32px 80px rgba(0, 0, 0, 0.65),
        0 0 90px rgba(220, 74, 74, 0.18);
    animation: gld-charter-shell-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gld-charter-shell-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.guilds-charter-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 16.5px;
    /* Solid dark body — the prior top radial-gradient ember wash was
       brightening the upper corners and reading as "hot corners". */
    background: linear-gradient(180deg, rgba(26, 10, 12, 0.97) 0%, rgba(12, 6, 8, 0.99) 100%);
    overflow: hidden;
}

/* Header — compact single-line title with inline icon. */
.guilds-charter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem 0.55rem;
    border-bottom: 1px solid rgba(220, 74, 74, 0.18);
    background: linear-gradient(180deg, rgba(106, 30, 30, 0.30) 0%, transparent 100%);
}

.guilds-charter-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.98rem, 2.4vw, 1.08rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff5f0;
    text-shadow: 0 0 22px rgba(220, 74, 74, 0.20);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-charter-modal-title i {
    color: var(--gld-ember-soft);
    font-size: 0.92em;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
    flex: 0 0 auto;
}

.guilds-charter-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(220, 74, 74, 0.28);
    background: rgba(20, 8, 10, 0.65);
    color: rgba(255, 235, 230, 0.72);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
    flex: 0 0 auto;
    font-size: 0.85rem;
}

/* Persistent permanence banner — sits between header and body so the
   warning is visible on every stage of the charter flow. */
.guilds-charter-permanence-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 1rem;
    border-bottom: 1px solid rgba(220, 74, 74, 0.18);
    background:
        linear-gradient(180deg, rgba(106, 30, 30, 0.32) 0%, rgba(58, 20, 20, 0.20) 100%);
    color: rgba(255, 235, 230, 0.82);
    font-family: 'Sora', sans-serif;
    font-size: 0.72rem;
    line-height: 1.35;
}

.guilds-charter-permanence-bar i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
    flex: 0 0 auto;
    font-size: 0.78rem;
}

.guilds-charter-permanence-bar strong {
    color: var(--gld-ember-cream);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.guilds-charter-modal-close:hover {
    color: #fff5f0;
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(106, 30, 30, 0.45);
    transform: rotate(90deg);
}

.guilds-charter-modal-close:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

/* Body — scrollable inside the shell */
.guilds-charter-modal-body {
    padding: 0.7rem 1rem 0.75rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
}

.guilds-charter-modal-body::-webkit-scrollbar {
    width: 8px;
}

.guilds-charter-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.guilds-charter-modal-body::-webkit-scrollbar-thumb {
    background: rgba(220, 74, 74, 0.28);
    border-radius: 999px;
}

.guilds-charter-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(220, 74, 74, 0.45);
}

/* ---------- Preview crest (live updates as user picks icon/style/name/motto) ---------- */

.guilds-charter-preview-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(220, 74, 74, 0.20);
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(26, 10, 12, 0.65) 0%, rgba(15, 6, 8, 0.78) 100%);
}

.guilds-charter-preview-crest {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff5f0;
    font-size: 1.2rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 8px 18px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(220, 74, 74, 0.28);
    position: relative;
    overflow: hidden;
}

.guilds-charter-preview-crest i {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.guilds-charter-preview-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.guilds-charter-preview-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    color: #fff5f0;
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-charter-preview-motto {
    margin-top: 2px;
    font-family: 'Sora', sans-serif;
    font-style: italic;
    font-size: 0.78rem;
    color: rgba(255, 235, 230, 0.66);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Section heads (Crest Icon / Crest Style / Guild Identity) ---------- */

.guilds-charter-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.guilds-charter-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.guilds-charter-section-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gld-ember-cream);
}

.guilds-charter-section-hint {
    font-family: 'Sora', sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 235, 230, 0.55);
}

/* ---------- Icon picker grid ---------- */

.guilds-charter-icon-grid {
    display: grid;
    /* Fixed 8 columns; 16 icons per paginated page (8 × 2). Mobile drops
       to 5 columns (collapsing to 4 rows of 4 per page). */
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
}

/* Pagination strip — sits below the icon grid in the icon crest panel. */
.guilds-charter-icon-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.guilds-charter-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(220, 74, 74, 0.30);
    background: rgba(20, 8, 10, 0.65);
    color: rgba(255, 235, 230, 0.72);
    cursor: pointer;
    font-size: 0.82rem;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.guilds-charter-pagination-btn:hover:not(:disabled) {
    color: #fff5f0;
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(106, 30, 30, 0.45);
}

.guilds-charter-pagination-btn:active:not(:disabled) {
    transform: scale(0.94);
}

/* At endpoints (first / last page) the button stays visually muted but
   keeps the standard mouse pointer — no "not-allowed" cursor. */
.guilds-charter-pagination-btn:disabled {
    opacity: 0.32;
    cursor: pointer;
}

.guilds-charter-pagination-btn:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

.guilds-charter-pagination-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.guilds-charter-pagination-dot {
    width: 7px;
    height: 7px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: rgba(220, 74, 74, 0.32);
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.guilds-charter-pagination-dot:hover {
    background: rgba(220, 74, 74, 0.55);
}

.guilds-charter-pagination-dot.is-active {
    background: var(--gld-ember-soft);
    transform: scale(1.3);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.55);
}

.guilds-charter-pagination-dot:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

.guilds-charter-icon {
    position: relative;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(220, 74, 74, 0.20);
    background:
        linear-gradient(180deg, rgba(58, 20, 20, 0.55) 0%, rgba(26, 10, 12, 0.78) 100%);
    color: rgba(255, 235, 230, 0.78);
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

/* `display: inline-flex` above would otherwise override the `hidden`
   attribute's UA `display: none`, breaking icon pagination. Force the
   hide regardless of authored display value. Also apply to style tiles
   in case we ever paginate them too. */
.guilds-charter-icon[hidden],
.guilds-charter-style[hidden] {
    display: none !important;
}

.guilds-charter-icon i {
    position: relative;
    z-index: 1;
}

.guilds-charter-icon:hover:not(.is-locked) {
    color: #fff5f0;
    border-color: rgba(245, 158, 11, 0.55);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.10),
        0 6px 14px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(220, 74, 74, 0.22);
}

.guilds-charter-icon.is-active {
    color: #fff5f0;
    border-color: rgba(245, 158, 11, 0.75);
    background:
        radial-gradient(ellipse 100% 100% at 50% 0%, rgba(245, 158, 11, 0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(106, 30, 30, 0.78) 0%, rgba(58, 20, 20, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.16),
        0 0 0 1px rgba(245, 158, 11, 0.35),
        0 0 18px rgba(245, 158, 11, 0.30);
}

.guilds-charter-icon.is-active i {
    color: var(--gld-ember-cream);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.55));
}

.guilds-charter-icon:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

/* Trader-only icons — gem badge in corner */
.guilds-charter-icon--trader {
    border-color: rgba(245, 158, 11, 0.30);
}

/* Trader-tier badge — emerald circle with a white gem at the corner of
   any trader-only icon tile. Signals "premium" at a glance. */
.guilds-charter-icon-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #ffffff;
    font-size: 7px;
    z-index: 2;
    box-shadow:
        0 0 5px rgba(16, 185, 129, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Locked trader tiles: visually muted but still clickable — they navigate
   to /upgrade rather than selecting. Cursor stays a pointer to signal action.
   The locked badge stays the same emerald + white as the unlocked one so
   users recognize the trader-tier marker regardless of their status. */
.guilds-charter-icon--trader.is-locked {
    cursor: pointer;
    opacity: 0.52;
    filter: grayscale(0.55);
}

.guilds-charter-icon--trader.is-locked .guilds-charter-icon-badge {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #ffffff;
    box-shadow:
        0 0 5px rgba(16, 185, 129, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.guilds-charter-icon--trader.is-locked:hover {
    opacity: 0.95;
    filter: grayscale(0);
    transform: translateY(-1px);
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.12),
        0 6px 14px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(16, 185, 129, 0.28);
}

.guilds-charter-icon--trader.is-locked:hover .guilds-charter-icon-badge {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #ffffff;
    box-shadow:
        0 0 6px rgba(16, 185, 129, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* ---------- Style picker grid ---------- */

.guilds-charter-style-grid {
    display: grid;
    /* Fixed 4 columns × 5 rows = 20 styles → no half-empty trailing row.
       Mobile collapses to 2 columns × 10 rows (still a full matrix). */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.guilds-charter-style {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 10px;
    border: 1px solid rgba(220, 74, 74, 0.20);
    background: linear-gradient(180deg, rgba(58, 20, 20, 0.55) 0%, rgba(26, 10, 12, 0.78) 100%);
    color: rgba(255, 235, 230, 0.84);
    font-family: 'Sora', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    text-align: left;
}

.guilds-charter-style-swatch {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.20),
        0 0 0 1px rgba(0, 0, 0, 0.40);
}

.guilds-charter-style-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-charter-style:hover:not(.is-locked) {
    color: #fff5f0;
    border-color: rgba(245, 158, 11, 0.55);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.10),
        0 6px 14px rgba(0, 0, 0, 0.35);
}

.guilds-charter-style.is-active {
    color: #fff5f0;
    border-color: rgba(245, 158, 11, 0.75);
    background:
        radial-gradient(ellipse 100% 100% at 50% 0%, rgba(245, 158, 11, 0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(106, 30, 30, 0.78) 0%, rgba(58, 20, 20, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.16),
        0 0 0 1px rgba(245, 158, 11, 0.35),
        0 0 18px rgba(245, 158, 11, 0.30);
}

.guilds-charter-style:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

/* Trader-tier badge on a style tile — same emerald + white gem as the
   icon-tile badge so the "trader only" marker is consistent across pickers. */
.guilds-charter-style-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #ffffff;
    font-size: 7px;
    box-shadow:
        0 0 5px rgba(16, 185, 129, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Locked trader style tiles — clickable, navigate to /upgrade. */
.guilds-charter-style--trader.is-locked {
    cursor: pointer;
    opacity: 0.55;
}

.guilds-charter-style--trader.is-locked .guilds-charter-style-badge {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #ffffff;
    box-shadow:
        0 0 5px rgba(16, 185, 129, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.guilds-charter-style--trader.is-locked .guilds-charter-style-swatch {
    filter: grayscale(0.55);
}

.guilds-charter-style--trader.is-locked:hover {
    opacity: 1;
    transform: translateY(-1px);
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.10),
        0 6px 14px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(16, 185, 129, 0.22);
}

.guilds-charter-style--trader.is-locked:hover .guilds-charter-style-swatch {
    filter: grayscale(0);
}

.guilds-charter-style--trader.is-locked:hover .guilds-charter-style-badge {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #ffffff;
    box-shadow:
        0 0 6px rgba(16, 185, 129, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* ============================================================
   Crest style swatch + preview-crest backgrounds.
   Each style id has BOTH:
   - .guilds-charter-style--<id> .guilds-charter-style-swatch  (small swatch)
   - .guilds-charter-preview-crest[data-style="<id>"]          (the full preview)
   So the tile swatch and the live preview always look identical.
   ============================================================ */

/* --- Common (static) styles --- */

.guilds-charter-style--oxblood .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="oxblood"] {
    background: linear-gradient(135deg, #8b3535 0%, #6b2424 50%, #3a1414 100%);
}

.guilds-charter-style--forge .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="forge"] {
    background: linear-gradient(135deg, #f59e0b 0%, #c2410c 50%, #6b2412 100%);
}

.guilds-charter-style--slate .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="slate"] {
    background: linear-gradient(135deg, #475569 0%, #334155 50%, #1e293b 100%);
}

.guilds-charter-style--moss .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="moss"] {
    background: linear-gradient(135deg, #4a6b3a 0%, #2f4a2a 50%, #1a2e1a 100%);
}

.guilds-charter-style--wine .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="wine"] {
    background: linear-gradient(135deg, #6b1f3a 0%, #4a142a 50%, #2a0a18 100%);
}

.guilds-charter-style--ink .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="ink"] {
    background: linear-gradient(135deg, #1e2a4a 0%, #131b32 50%, #07091a 100%);
}

.guilds-charter-style--ash .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="ash"] {
    background: linear-gradient(135deg, #6b6258 0%, #3f3a33 50%, #1f1c18 100%);
}

.guilds-charter-style--parchment .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="parchment"] {
    background: linear-gradient(135deg, #e7d2a8 0%, #b89a6e 50%, #6b5436 100%);
}

.guilds-charter-style--parchment.is-active .guilds-charter-style-name,
.guilds-charter-preview-crest[data-style="parchment"] i {
    color: #2a1810;
}

/* --- Trader (animated) styles --- */

.guilds-charter-style--inferno .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="inferno"] {
    background: linear-gradient(
        130deg,
        #6b1414 0%,
        #dc4a4a 30%,
        #f59e0b 50%,
        #fbbf24 65%,
        #dc4a4a 82%,
        #6b1414 100%
    );
    background-size: 260% 260%;
    animation: gld-anim-inferno 6.5s ease-in-out infinite;
}

@keyframes gld-anim-inferno {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

.guilds-charter-style--aurora .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="aurora"] {
    background: linear-gradient(
        130deg,
        #7c3aed 0%,
        #06b6d4 28%,
        #ec4899 55%,
        #06b6d4 78%,
        #7c3aed 100%
    );
    background-size: 280% 280%;
    animation: gld-anim-aurora 8s ease-in-out infinite;
}

@keyframes gld-anim-aurora {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

.guilds-charter-style--bullion .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="bullion"] {
    background: linear-gradient(
        110deg,
        #92400e 0%,
        #d97706 22%,
        #fbbf24 38%,
        #fef3c7 50%,
        #fbbf24 62%,
        #d97706 78%,
        #92400e 100%
    );
    background-size: 260% 260%;
    animation: gld-anim-bullion 5.5s linear infinite;
}

@keyframes gld-anim-bullion {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
}

.guilds-charter-style--bullion.is-active .guilds-charter-style-name,
.guilds-charter-preview-crest[data-style="bullion"] i {
    color: #1a0a0a;
    filter: drop-shadow(0 1px 2px rgba(255, 220, 130, 0.65));
}

.guilds-charter-style--dragonscale .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="dragonscale"] {
    background:
        radial-gradient(circle at 100% 50%, transparent 22%, rgba(0, 0, 0, 0.22) 22%, rgba(0, 0, 0, 0.22) 24%, transparent 24%) 0 0 / 12px 8px,
        radial-gradient(circle at 0%   50%, transparent 22%, rgba(0, 0, 0, 0.18) 22%, rgba(0, 0, 0, 0.18) 24%, transparent 24%) 6px 4px / 12px 8px,
        linear-gradient(
            130deg,
            #064e3b 0%,
            #047857 28%,
            #fbbf24 50%,
            #047857 72%,
            #064e3b 100%
        );
    background-size: 12px 8px, 12px 8px, 260% 260%;
    animation: gld-anim-dragonscale 7.5s ease-in-out infinite;
}

@keyframes gld-anim-dragonscale {
    0%, 100% { background-position: 0 0, 6px 4px,   0% 50%; }
    50%      { background-position: 0 0, 6px 4px, 100% 50%; }
}

.guilds-charter-style--obsidian .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="obsidian"] {
    background: linear-gradient(
        130deg,
        #050505 0%,
        #1f0a0a 24%,
        #b91c1c 48%,
        #f97316 60%,
        #1f0a0a 80%,
        #050505 100%
    );
    background-size: 280% 280%;
    animation: gld-anim-obsidian 7s ease-in-out infinite;
}

@keyframes gld-anim-obsidian {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

.guilds-charter-style--frostfire .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="frostfire"] {
    background: linear-gradient(
        130deg,
        #0e7490 0%,
        #38bdf8 22%,
        #e0f2fe 38%,
        #fde68a 55%,
        #f59e0b 72%,
        #b45309 100%
    );
    background-size: 300% 300%;
    animation: gld-anim-frostfire 8s ease-in-out infinite;
}

@keyframes gld-anim-frostfire {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

.guilds-charter-style--rift .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="rift"] {
    background: linear-gradient(
        130deg,
        #0c0a1f 0%,
        #4c1d95 22%,
        #db2777 44%,
        #f0abfc 58%,
        #4c1d95 78%,
        #0c0a1f 100%
    );
    background-size: 300% 300%;
    animation: gld-anim-rift 9s ease-in-out infinite;
}

@keyframes gld-anim-rift {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

.guilds-charter-style--regalia .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="regalia"] {
    background: linear-gradient(
        110deg,
        #3b0764 0%,
        #6d28d9 22%,
        #c4b5fd 40%,
        #fbbf24 52%,
        #b45309 70%,
        #3b0764 100%
    );
    background-size: 280% 280%;
    animation: gld-anim-regalia 6.5s ease-in-out infinite;
}

@keyframes gld-anim-regalia {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

.guilds-charter-style--ironclad .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="ironclad"] {
    background: linear-gradient(
        130deg,
        #0f172a 0%,
        #334155 22%,
        #94a3b8 42%,
        #e2e8f0 52%,
        #94a3b8 64%,
        #475569 82%,
        #0f172a 100%
    );
    background-size: 280% 280%;
    animation: gld-anim-ironclad 7s linear infinite;
}

@keyframes gld-anim-ironclad {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
}

.guilds-charter-style--venom .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="venom"] {
    background: linear-gradient(
        130deg,
        #052e16 0%,
        #166534 22%,
        #84cc16 42%,
        #d9f99d 52%,
        #65a30d 68%,
        #166534 82%,
        #052e16 100%
    );
    background-size: 280% 280%;
    animation: gld-anim-venom 7.5s ease-in-out infinite;
}

@keyframes gld-anim-venom {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

.guilds-charter-style--lumen .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="lumen"] {
    background: linear-gradient(
        130deg,
        #082f49 0%,
        #0284c7 22%,
        #7dd3fc 42%,
        #f0f9ff 52%,
        #bae6fd 68%,
        #0ea5e9 82%,
        #082f49 100%
    );
    background-size: 280% 280%;
    animation: gld-anim-lumen 6s ease-in-out infinite;
}

@keyframes gld-anim-lumen {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

.guilds-charter-style--lumen.is-active .guilds-charter-style-name,
.guilds-charter-preview-crest[data-style="lumen"] i {
    color: #0c2e3f;
    filter: drop-shadow(0 1px 2px rgba(186, 230, 253, 0.65));
}

.guilds-charter-style--twilight .guilds-charter-style-swatch,
.guilds-charter-preview-crest[data-style="twilight"] {
    background: linear-gradient(
        130deg,
        #0f0a2b 0%,
        #4c1d95 22%,
        #db2777 38%,
        #fb923c 52%,
        #f59e0b 60%,
        #6d28d9 80%,
        #0f0a2b 100%
    );
    background-size: 300% 300%;
    animation: gld-anim-twilight 8s ease-in-out infinite;
}

@keyframes gld-anim-twilight {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Preview crest gets a subtle ambient overlay for any style so text/icon pops. */
.guilds-charter-preview-crest::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0, 0, 0, 0.25) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* ---------- Identity form fields ---------- */

.guilds-charter-fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.guilds-charter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.guilds-charter-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #fff5f0;
}

.guilds-charter-field-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guilds-charter-field-tag--lock {
    border: 1px solid rgba(220, 74, 74, 0.45);
    background: rgba(106, 30, 30, 0.40);
    color: var(--gld-blood-soft);
}

.guilds-charter-field-tag--edit {
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(106, 50, 18, 0.35);
    color: var(--gld-ember-cream);
}

.guilds-charter-input {
    width: 100%;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid rgba(220, 74, 74, 0.30);
    background: rgba(15, 6, 8, 0.78);
    color: #fff5f0;
    font-family: 'Sora', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.guilds-charter-input::placeholder {
    color: rgba(255, 235, 230, 0.30);
}

.guilds-charter-input:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.65);
    background: rgba(20, 10, 12, 0.85);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20);
}

.guilds-charter-field-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-family: 'Sora', sans-serif;
    font-size: 0.68rem;
    color: rgba(255, 235, 230, 0.55);
}

.guilds-charter-field-warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--gld-blood-soft);
    font-weight: 600;
}

.guilds-charter-field-warning i {
    color: var(--gld-ember-soft);
}

.guilds-charter-field-hint {
    color: rgba(255, 235, 230, 0.55);
}

.guilds-charter-field-count {
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 235, 230, 0.55);
    white-space: nowrap;
}

/* ---------- Footer (cost + actions) ---------- */

.guilds-charter-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem 0.75rem;
    border-top: 1px solid rgba(220, 74, 74, 0.18);
    background: linear-gradient(0deg, rgba(106, 30, 30, 0.30) 0%, transparent 100%);
    flex-wrap: wrap;
}

.guilds-charter-cost {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guilds-charter-cost-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 235, 230, 0.55);
}

.guilds-charter-cost-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--gld-ember-cream);
    letter-spacing: -0.01em;
}

.guilds-charter-cost-value i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.55));
}

.guilds-charter-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.guilds-charter-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.guilds-charter-action--ghost {
    border-color: rgba(220, 74, 74, 0.30);
    background: transparent;
    color: rgba(255, 235, 230, 0.74);
}

.guilds-charter-action--ghost:hover {
    color: #fff5f0;
    border-color: rgba(220, 74, 74, 0.55);
    background: rgba(106, 30, 30, 0.22);
}

.guilds-charter-action--primary {
    border-color: rgba(245, 158, 11, 0.65);
    background: linear-gradient(135deg, rgba(220, 74, 74, 0.62) 0%, rgba(106, 30, 30, 0.85) 100%);
    color: #fff5f0;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 8px 22px rgba(0, 0, 0, 0.40),
        0 0 22px rgba(245, 158, 11, 0.24);
}

.guilds-charter-action--primary i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
}

.guilds-charter-action--primary:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.26),
        0 12px 28px rgba(0, 0, 0, 0.50),
        0 0 32px rgba(245, 158, 11, 0.40);
}

.guilds-charter-action--primary:active {
    transform: translateY(0);
}

.guilds-charter-action--primary:disabled,
.guilds-charter-action--primary[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.30);
}

.guilds-charter-action:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

/* ---------- Charter confirmation modal ----------
   Compact "are you sure?" dialog stacked on top of the charter modal.
   Reuses the same dark-red / ember palette and gradient-ring motif so the
   confirmation feels continuous with the charter flow. */
.guilds-confirm-modal {
    position: fixed;
    inset: 0;
    /* One above the charter modal's max int. Since both portal to body
       and the charter modal sits first in tree order, this guarantees the
       confirm dialog wins the stack. */
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.4rem, 2vw, 1rem);
}

.guilds-confirm-modal[hidden] {
    display: none;
}

.guilds-confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 2, 3, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: gld-confirm-backdrop-in 0.18s ease-out both;
}

@keyframes gld-confirm-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.guilds-confirm-modal-shell {
    position: relative;
    width: min(420px, 100%);
    border-radius: 16px;
    padding: 1.5px;
    background: linear-gradient(
        180deg,
        rgba(106, 30, 30, 0.50) 0%,
        rgba(58, 20, 20, 0.38) 100%
    );
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 28px 70px rgba(0, 0, 0, 0.70),
        0 0 80px rgba(220, 74, 74, 0.22);
    animation: gld-confirm-shell-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gld-confirm-shell-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.guilds-confirm-modal-card {
    display: flex;
    flex-direction: column;
    border-radius: 14.5px;
    background: linear-gradient(180deg, rgba(26, 10, 12, 0.97) 0%, rgba(12, 6, 8, 0.99) 100%);
    overflow: hidden;
}

.guilds-confirm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem 0.55rem;
    border-bottom: 1px solid rgba(220, 74, 74, 0.18);
    background: linear-gradient(180deg, rgba(106, 30, 30, 0.28) 0%, transparent 100%);
}

.guilds-confirm-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff5f0;
}

.guilds-confirm-modal-title i {
    /* Bright glowing-gold scroll icon, matches the open-charter trigger. */
    color: #fde68a;
    font-size: 0.96em;
    filter:
        drop-shadow(0 0 6px rgba(251, 191, 36, 0.85))
        drop-shadow(0 0 14px rgba(245, 158, 11, 0.55));
}

.guilds-confirm-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(220, 74, 74, 0.28);
    background: rgba(20, 8, 10, 0.65);
    color: rgba(255, 235, 230, 0.72);
    cursor: pointer;
    font-size: 0.82rem;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.guilds-confirm-modal-close:hover {
    color: #fff5f0;
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(106, 30, 30, 0.40);
}

.guilds-confirm-modal-close:active {
    transform: scale(0.94);
}

.guilds-confirm-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    color: rgba(255, 235, 230, 0.92);
    font-family: 'Sora', sans-serif;
    font-size: 0.92rem;
    line-height: 1.45;
}

.guilds-confirm-question {
    margin: 0;
    font-size: 0.98rem;
    color: #fff5f0;
}

.guilds-confirm-target {
    color: var(--gld-ember-cream);
    font-weight: 800;
    /* Wraps long names without ballooning the dialog. */
    overflow-wrap: anywhere;
}

.guilds-confirm-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.40);
    background: rgba(106, 50, 18, 0.30);
    color: var(--gld-ember-cream);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.guilds-confirm-cost i {
    color: var(--gld-ember-soft);
}

.guilds-confirm-warning {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid rgba(220, 74, 74, 0.28);
    background: rgba(58, 20, 20, 0.42);
    color: rgba(255, 235, 230, 0.80);
    font-size: 0.78rem;
    line-height: 1.4;
}

.guilds-confirm-warning i {
    color: var(--gld-ember-soft);
    margin-top: 1px;
    flex: 0 0 auto;
}

/* The text body sits next to the icon as a single flex item. Without an
   explicit wrapper, each inline text run / <strong> between elements
   becomes its own anonymous flex item (laid out in a row with `gap`),
   which collapses the prose into narrow word-per-column stacks. Wrapping
   the copy in this span gives flex exactly one text child, and `min-width: 0`
   lets it shrink-wrap normally instead of getting stuck at min-content. */
.guilds-confirm-warning-text {
    flex: 1 1 auto;
    min-width: 0;
}

.guilds-confirm-warning strong {
    color: var(--gld-ember-cream);
    font-weight: 800;
}

/* Info variant — used inside the "insufficient Denari" modal where the
   tone is matter-of-fact rather than dangerous. Swaps the red callout
   palette for a calmer parchment / coin gold accent so the modal reads
   as guidance ("here's how to earn more") instead of a warning. */
.guilds-confirm-warning--info {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(70, 44, 12, 0.42);
}

.guilds-confirm-warning--info i {
    color: #fbbf24;
}

/* Inline error slot — populated by JS inside confirm modals (e.g. the
   request-to-join flow surfaces server-side rejections like "guild full"
   or "invite-only" here instead of dumping the user back to a flash toast). */
.guilds-confirm-error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 0;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid rgba(248, 113, 113, 0.42);
    background: rgba(127, 29, 29, 0.32);
    color: #fecaca;
    font-size: 0.78rem;
    line-height: 1.4;
}

.guilds-confirm-error[hidden] { display: none; }

.guilds-confirm-error i {
    color: #f87171;
    margin-top: 1px;
    flex: 0 0 auto;
}

.guilds-confirm-error-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Loading state for the primary confirm action — used while a request
   is in flight (e.g. the Send Request POST). Spinner is pure CSS so we
   don't need to swap markup, the icon just gets a subtle pulse + the
   button is disabled. */
.guilds-confirm-action.is-loading {
    opacity: 0.72;
    cursor: progress;
    pointer-events: none;
}

.guilds-confirm-action.is-loading i {
    animation: gld-confirm-spin 0.9s linear infinite;
}

@keyframes gld-confirm-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Anchor styled as a primary confirm-action — used by the "Earn Denari"
   button on the insufficient modal so it visually matches the existing
   <button> CTAs in the same footer. */
a.guilds-confirm-action {
    text-decoration: none;
}

.guilds-confirm-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0.6rem 1rem 0.75rem;
    border-top: 1px solid rgba(220, 74, 74, 0.18);
    background: linear-gradient(180deg, transparent 0%, rgba(58, 20, 20, 0.30) 100%);
}

.guilds-confirm-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.guilds-confirm-action--ghost {
    border-color: rgba(220, 74, 74, 0.30);
    background: transparent;
    color: rgba(255, 235, 230, 0.74);
}

.guilds-confirm-action--ghost:hover {
    color: #fff5f0;
    border-color: rgba(220, 74, 74, 0.55);
    background: rgba(106, 30, 30, 0.22);
}

.guilds-confirm-action--primary {
    border-color: rgba(245, 158, 11, 0.65);
    background: linear-gradient(135deg, rgba(220, 74, 74, 0.62) 0%, rgba(106, 30, 30, 0.85) 100%);
    color: #fff5f0;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 6px 16px rgba(0, 0, 0, 0.40),
        0 0 18px rgba(245, 158, 11, 0.22);
}

.guilds-confirm-action--primary i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
}

.guilds-confirm-action--primary:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.26),
        0 10px 22px rgba(0, 0, 0, 0.50),
        0 0 28px rgba(245, 158, 11, 0.40);
}

.guilds-confirm-action--primary:active {
    transform: translateY(0);
}

.guilds-confirm-action--primary:disabled,
.guilds-confirm-action--primary[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.guilds-confirm-action:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

@media (max-width: 540px) {
    .guilds-confirm-modal-shell {
        width: min(94vw, 420px);
    }
    .guilds-confirm-modal-footer {
        flex-wrap: wrap;
    }
    .guilds-confirm-action {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guilds-confirm-modal-backdrop,
    .guilds-confirm-modal-shell {
        animation: none !important;
    }
}

/* ---------- Stepper (Forge a crest -> Name & motto) ---------- */

.guilds-charter-stepper {
    list-style: none;
    margin: 0;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(220, 74, 74, 0.20);
    background: rgba(15, 6, 8, 0.55);
}

.guilds-charter-step {
    display: inline-flex;
    align-items: center;
}

.guilds-charter-step-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 3px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 235, 230, 0.50);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.guilds-charter-step-num {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(220, 74, 74, 0.32);
    background: rgba(58, 20, 20, 0.65);
    color: rgba(255, 235, 230, 0.55);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 800;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.guilds-charter-step-label {
    line-height: 1;
    white-space: nowrap;
}

.guilds-charter-step.is-active .guilds-charter-step-btn {
    color: #fff5f0;
}

.guilds-charter-step.is-active .guilds-charter-step-num {
    background: linear-gradient(135deg, #dc4a4a 0%, #6b2e2e 100%);
    border-color: rgba(245, 158, 11, 0.65);
    color: var(--gld-ember-cream);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.40);
}

.guilds-charter-step.is-complete .guilds-charter-step-btn {
    color: rgba(253, 230, 138, 0.85);
}

.guilds-charter-step.is-complete .guilds-charter-step-num {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.55) 0%, rgba(106, 50, 18, 0.65) 100%);
    border-color: rgba(245, 158, 11, 0.55);
    color: var(--gld-ember-cream);
}

.guilds-charter-step.is-complete .guilds-charter-step-num::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.6rem;
}

.guilds-charter-step.is-complete .guilds-charter-step-num-text {
    display: none;
}

.guilds-charter-step-btn:hover:not([disabled]) {
    color: #fff5f0;
}

.guilds-charter-step-btn:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

/* Future steps (after the current) — kept dim and not clickable until reached. */
.guilds-charter-step:not(.is-active):not(.is-complete) .guilds-charter-step-btn {
    cursor: default;
}

.guilds-charter-step-connector {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(220, 74, 74, 0.30) 0%,
        rgba(245, 158, 11, 0.30) 100%);
    list-style: none;
}

/* Hide labels on very narrow screens so the stepper stays one line. */
@media (max-width: 480px) {
    .guilds-charter-step-label {
        display: none;
    }
    .guilds-charter-step-btn {
        padding: 4px;
    }
}

/* ---------- Stages (1: Forge a crest / 2: Name & motto) ---------- */

.guilds-charter-stage {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.guilds-charter-stage[hidden] {
    display: none;
}

.guilds-charter-stage.is-active {
    animation: gld-charter-stage-fade 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes gld-charter-stage-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Crest tabs (Icon / Style) inside stage 1 ---------- */

.guilds-charter-crest-tabs {
    display: inline-flex;
    align-self: center;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(220, 74, 74, 0.24);
    background: rgba(15, 6, 8, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.04);
}

.guilds-charter-crest-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(224, 200, 200, 0.78);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.guilds-charter-crest-tab i {
    color: var(--gld-blood-soft);
    font-size: 0.92em;
    opacity: 0.85;
}

.guilds-charter-crest-tab:hover {
    color: #fff5f0;
    background: rgba(106, 30, 30, 0.22);
}

.guilds-charter-crest-tab.is-active {
    color: #fff5f0;
    background: linear-gradient(135deg, rgba(220, 74, 74, 0.50) 0%, rgba(106, 30, 30, 0.62) 100%);
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.12),
        0 0 16px rgba(220, 74, 74, 0.28);
}

.guilds-charter-crest-tab.is-active i {
    color: var(--gld-ember-soft);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}

.guilds-charter-crest-tab:focus-visible {
    outline: 2px solid var(--gld-ember-soft);
    outline-offset: 2px;
}

.guilds-charter-crest-panel[hidden] {
    display: none;
}

.guilds-charter-crest-panel:not([hidden]) {
    animation: gld-charter-stage-fade 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Footers — one per stage ---------- */

.guilds-charter-modal-footer[hidden] {
    display: none;
}

.guilds-charter-modal-footer.is-active {
    animation: gld-charter-stage-fade 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stage 1 footer hint — subtle cost reminder before commit. */
.guilds-charter-footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Sora', sans-serif;
    font-size: 0.74rem;
    color: rgba(255, 235, 230, 0.60);
}

.guilds-charter-footer-hint i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}

/* Mobile tweaks for the modal */
@media (max-width: 600px) {
    .guilds-charter-modal-shell {
        max-height: calc(100vh - 1rem);
    }
    .guilds-charter-modal-header,
    .guilds-charter-modal-body,
    .guilds-charter-modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .guilds-charter-preview-wrap {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .guilds-charter-preview-crest {
        align-self: center;
    }
    .guilds-charter-icon-grid {
        /* 4 cols × 4 rows on mobile = 16 icons per page (matches desktop
           page size for a consistent paginated layout). */
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .guilds-charter-style-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .guilds-charter-modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .guilds-charter-cost {
        align-items: flex-start;
    }
    .guilds-charter-actions {
        justify-content: stretch;
    }
    .guilds-charter-action {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .guilds-ambient__parallax {
        transform: none !important;
        transition: none;
    }

    .guilds-beam,
    .guilds-ambient__skyline,
    .guilds-ambient__coals,
    .guilds-ember,
    .gld-gradient-text,
    .guilds-tab-panel.is-active,
    .guilds-charter-modal-backdrop,
    .guilds-charter-modal-shell,
    .guilds-charter-stage.is-active,
    .guilds-charter-crest-panel:not([hidden]),
    .guilds-charter-style--inferno .guilds-charter-style-swatch,
    .guilds-charter-style--aurora .guilds-charter-style-swatch,
    .guilds-charter-style--bullion .guilds-charter-style-swatch,
    .guilds-charter-style--dragonscale .guilds-charter-style-swatch,
    .guilds-charter-style--obsidian .guilds-charter-style-swatch,
    .guilds-charter-style--frostfire .guilds-charter-style-swatch,
    .guilds-charter-style--rift .guilds-charter-style-swatch,
    .guilds-charter-style--regalia .guilds-charter-style-swatch,
    .guilds-charter-style--ironclad .guilds-charter-style-swatch,
    .guilds-charter-style--venom .guilds-charter-style-swatch,
    .guilds-charter-style--lumen .guilds-charter-style-swatch,
    .guilds-charter-style--twilight .guilds-charter-style-swatch,
    .guilds-charter-preview-crest[data-style="inferno"],
    .guilds-charter-preview-crest[data-style="aurora"],
    .guilds-charter-preview-crest[data-style="bullion"],
    .guilds-charter-preview-crest[data-style="dragonscale"],
    .guilds-charter-preview-crest[data-style="obsidian"],
    .guilds-charter-preview-crest[data-style="frostfire"],
    .guilds-charter-preview-crest[data-style="rift"],
    .guilds-charter-preview-crest[data-style="regalia"],
    .guilds-charter-preview-crest[data-style="ironclad"],
    .guilds-charter-preview-crest[data-style="venom"],
    .guilds-charter-preview-crest[data-style="lumen"],
    .guilds-charter-preview-crest[data-style="twilight"] {
        animation: none !important;
    }

    .guilds-ambient__skyline,
    .guilds-ambient__coals {
        transform: none !important;
    }

    .guilds-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   View-guild page (/guilds/g/<slug>)
   ------------------------------------------------------------
   Header card reuses ``.guilds-my-card-*`` styles from the
   ``My Guild`` tab; the only net-new pieces live here:

     - breadcrumb strip above the card
     - founder-handle link styling
     - roster section (head + table)
     - right-sidebar "about this guild" card
   ============================================================ */

.guilds-view-content {
    /* Same vertical rhythm as the leaderboard page so users don't notice
       a page-swap jump when navigating from /guilds to a guild profile.
       padding-top is 0 so the full-width hero banner sits flush against
       the page chrome — the hero supplies its own visual top edge. */
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-top: 0;
}

/* ===== Guild view hero — compact horizontal row =====
   Single row: back chevron on the left, "About <Guild Name>" stack on
   the right. Themed in oxblood + ember to match the rest of the Guilds
   surface. Sized to read as a chrome bar (~76px tall) so it doesn't
   dominate the page above the My Guild–style card. */

.guilds-view-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--spacing-6);
    /* Break out of .guilds-content's horizontal padding so the bar spans
     * edge-to-edge of the feed-main column. Mobile breakpoint below
     * matches .guilds-content's tighter padding. */
    margin: 0 calc(var(--spacing-6) * -1);
    border-top: 1px solid rgba(220, 74, 74, 0.22);
    border-bottom: 1px solid rgba(220, 74, 74, 0.28);
    background:
        radial-gradient(ellipse 70% 90% at 0% 50%, rgba(245, 158, 11, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(58, 20, 20, 0.68) 0%, rgba(26, 10, 12, 0.82) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.08),
        0 0 22px rgba(220, 74, 74, 0.12);
}

.guilds-view-back-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(220, 74, 74, 0.36);
    background: linear-gradient(180deg, rgba(106, 30, 30, 0.55) 0%, rgba(42, 16, 16, 0.78) 100%);
    color: var(--gld-ember-cream);
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.12),
        0 0 12px rgba(220, 74, 74, 0.20);
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease,
        color 0.16s ease;
}

.guilds-view-back-btn:hover,
.guilds-view-back-btn:focus-visible {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.55);
    background: linear-gradient(180deg, rgba(146, 50, 30, 0.65) 0%, rgba(58, 22, 18, 0.85) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 0 16px rgba(245, 158, 11, 0.32);
    transform: translateX(-2px);
    outline: none;
}

.guilds-view-back-btn i {
    transition: transform 0.16s ease;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.40));
}

.guilds-view-back-btn:hover i,
.guilds-view-back-btn:focus-visible i {
    transform: translateX(-2px);
}

.guilds-view-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.guilds-view-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff5f0;
}

.guilds-view-hero-kicker i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45));
}

.guilds-view-hero-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.15;
    color: #fff5f0;
    /* Ellipsize if a long guild name would otherwise wrap past the row. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-view-hero-title-active {
    color: #ffffff;
    margin-right: 0.35em;
}

/* Inline crest icon between "About" and the gradient guild name. Sits as a
 * lightweight glyph (no chip / box) so it reads as part of the headline
 * rather than competing with the larger crest tile in the card below. The
 * ember-soft color + drop-shadow mirrors the hero kicker's icon treatment
 * for visual continuity. */
.guilds-view-hero-title-crest {
    display: inline-block;
    margin-right: 0.35em;
    font-size: 0.92em;
    vertical-align: -0.05em;
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}

@media (max-width: 768px) {
    /* .guilds-content drops to --spacing-4 horizontal padding under 768px;
     * keep the hero's negative margin / padding in sync so it stays flush. */
    .guilds-view-hero {
        padding: 12px var(--spacing-4);
        margin: 0 calc(var(--spacing-4) * -1);
    }
}

@media (max-width: 540px) {
    .guilds-view-back-btn {
        width: 36px;
        height: 36px;
    }
    .guilds-view-hero-title {
        font-size: 1.1rem;
    }
    .guilds-view-hero-kicker {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }
}

/* ---------- legacy breadcrumb (kept around so any other consumer keeps
 *            rendering; the view page now uses the hero instead) ---------- */

.guilds-view-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(255, 235, 230, 0.62);
}

.guilds-view-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(220, 74, 74, 0.32);
    background: rgba(20, 10, 12, 0.65);
    color: rgba(255, 235, 230, 0.86);
    text-decoration: none;
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.guilds-view-breadcrumb-link:hover,
.guilds-view-breadcrumb-link:focus-visible {
    color: var(--gld-ember-cream);
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(106, 30, 30, 0.55);
    outline: none;
}

.guilds-view-breadcrumb-sep {
    color: rgba(255, 235, 230, 0.36);
}

.guilds-view-breadcrumb-current {
    color: rgba(255, 235, 230, 0.92);
    font-weight: 700;
    letter-spacing: 0.02em;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header card is the same shell as ``.guilds-my-card`` — only minor
   typography tweaks for the heading (because it's now the page title). */
.guilds-view-card .guilds-my-card-name {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

.guilds-view-founder-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(245, 158, 11, 0.35);
    transition: color 0.16s ease, border-color 0.16s ease;
}

.guilds-view-founder-link:hover,
.guilds-view-founder-link:focus-visible {
    color: var(--gld-ember-cream);
    border-bottom-color: rgba(245, 158, 11, 0.85);
    outline: none;
}

/* ---------- Roster section ---------- */

.guilds-roster-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    /* Pure-CSS load-time fade. We intentionally *don't* use the
     * .guilds-reveal IntersectionObserver path here — the roster sits
     * below the fold, so observer-gated reveals would only fire when the
     * user scrolled. The delay sequences it visually after the hero +
     * card finish their own reveal (0.06s + 0.85s transition). */
    animation: guilds-roster-fade-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

/* On the My Guild tab the roster follows ``.guilds-my-card`` directly
   inside the tab panel — there's no shared flex parent owning the gap,
   so give it explicit breathing room. The view page already manages
   spacing via ``.guilds-view-content``'s flex gap, so this selector
   only fires on the My Guild tab. */
.guilds-my-card + .guilds-roster-section {
    margin-top: 1.8rem;
}

@keyframes guilds-roster-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .guilds-roster-section {
        animation: none;
    }
}

.guilds-roster-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Row variant: pushes the "Manage Roster" trigger to the right side of
   the header (inline with the title). Falls back to stacked layout on
   narrow viewports so the trigger doesn't squeeze the title text. */
.guilds-roster-head--with-actions {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.guilds-roster-head--with-actions .guilds-roster-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Action cluster — Manage Roster + Leave Guild buttons share this
   wrapper so they sit side-by-side at the right edge of the roster
   header. Wraps to a second row under narrow viewports (the parent
   .guilds-roster-head--with-actions already has flex-wrap). */
.guilds-roster-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.guilds-roster-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    background: rgba(20, 10, 12, 0.6);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    color: var(--gld-ember-cream);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}

.guilds-roster-manage-btn i {
    color: var(--gld-ember-soft);
    font-size: 0.85rem;
}

.guilds-roster-manage-btn:hover,
.guilds-roster-manage-btn:focus-visible {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.18) 0%,
        rgba(220, 74, 74, 0.20) 100%);
    border-color: rgba(245, 158, 11, 0.6);
    color: #fff5f0;
    outline: none;
    transform: translateY(-1px);
}

/* Leave Guild — danger-tinted twin of .guilds-roster-manage-btn.
   Shown to every enlisted viewer except the founder (the leave API
   refuses owners with ``owner_cannot_leave``). The red accent telegraphs
   the destructive nature; the actual "are you sure?" confirmation lives
   in #guildsLeaveGuildModal. */
.guilds-roster-leave-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    background: rgba(20, 10, 12, 0.6);
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 999px;
    color: #fecaca;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}

.guilds-roster-leave-btn i {
    color: #f87171;
    font-size: 0.85rem;
}

.guilds-roster-leave-btn:hover,
.guilds-roster-leave-btn:focus-visible {
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.22) 0%,
        rgba(127, 29, 29, 0.32) 100%);
    border-color: rgba(252, 165, 165, 0.7);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.guilds-roster-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff5f0;
}

.guilds-roster-title i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.40));
}

.guilds-roster-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.40);
    color: var(--gld-ember-cream);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
}

.guilds-roster-sub {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 0.84rem;
    color: rgba(255, 235, 230, 0.62);
}

.guilds-roster-shell {
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 16px;
    background: rgba(20, 10, 12, 0.78);
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.06),
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(220, 74, 74, 0.10);
    overflow: hidden;
}

.guilds-roster-wrap {
    overflow-x: auto;
}

.guilds-roster-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.guilds-roster-table col.guilds-roster-col-rank    { width: 72px; }
.guilds-roster-table col.guilds-roster-col-rep     { width: 92px; }
.guilds-roster-table col.guilds-roster-col-posts   { width: 86px; }
.guilds-roster-table col.guilds-roster-col-likes   { width: 86px; }
.guilds-roster-table col.guilds-roster-col-reposts { width: 92px; }
.guilds-roster-table col.guilds-roster-col-role    { width: 130px; }
.guilds-roster-table col.guilds-roster-col-member  { width: auto; }

.guilds-roster-table th,
.guilds-roster-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(220, 74, 74, 0.12);
    font-size: 0.92rem;
    color: rgba(255, 235, 230, 0.88);
    overflow: hidden;
}

/* Last column (reposts) right-aligned, all engagement chip columns
   (Rep / Posts / Likes / Reposts) right-aligned so the numbers stack
   into clean rails. The first two columns (rank, member) stay left. */
.guilds-roster-table th:nth-child(n+3),
.guilds-roster-table td:nth-child(n+3) {
    text-align: right;
}

.guilds-roster-table thead th {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gld-ember-cream);
    background: linear-gradient(180deg, rgba(106, 30, 30, 0.46) 0%, rgba(58, 20, 20, 0.36) 100%);
    border-bottom-color: rgba(245, 158, 11, 0.24);
    white-space: nowrap;
}

.guilds-roster-table tbody tr {
    transition: background 0.16s ease;
}

.guilds-roster-table tbody tr:last-child td {
    border-bottom: none;
}

.guilds-roster-table tbody tr:hover {
    background: rgba(220, 74, 74, 0.10);
}

/* Founder row gets a faint ember wash so it reads first at a glance. */
.guilds-roster-row--owner {
    background: linear-gradient(
        90deg,
        rgba(245, 158, 11, 0.10) 0%,
        rgba(245, 158, 11, 0.04) 40%,
        transparent 100%
    );
}

.guilds-roster-row--owner:hover {
    background: linear-gradient(
        90deg,
        rgba(245, 158, 11, 0.16) 0%,
        rgba(245, 158, 11, 0.06) 40%,
        rgba(220, 74, 74, 0.10) 100%
    );
}

/* Rank pill — mirrors ``.guilds-table-rank`` */
.guilds-roster-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(220, 74, 74, 0.18);
    border: 1px solid rgba(220, 74, 74, 0.36);
    color: var(--gld-blood-soft);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
}

.guilds-roster-rank--gold {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.55);
    color: var(--gld-ember-cream);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.30);
}

.guilds-roster-rank--silver {
    background: rgba(200, 200, 200, 0.14);
    border-color: rgba(220, 220, 220, 0.32);
    color: #ececec;
}

.guilds-roster-rank--bronze {
    background: rgba(180, 100, 60, 0.18);
    border-color: rgba(205, 130, 80, 0.36);
    color: #ddae8a;
}

/* Member cell — avatar + name + handle stacked */
.guilds-roster-cell-member {
    min-width: 0;
}

.guilds-roster-member {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    max-width: 100%;
    transition: transform 0.16s ease;
}

.guilds-roster-member:hover,
.guilds-roster-member:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.guilds-roster-member:hover .guilds-roster-avatar,
.guilds-roster-member:focus-visible .guilds-roster-avatar {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 0 12px rgba(245, 158, 11, 0.40);
}

.guilds-roster-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(220, 74, 74, 0.36);
    background: linear-gradient(135deg, #8b3535, #3a1414);
    color: var(--gld-ember-cream);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.14),
        0 4px 10px rgba(0, 0, 0, 0.4);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.guilds-roster-avatar--placeholder {
    letter-spacing: 0.02em;
}

.guilds-roster-member-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.guilds-roster-member-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    color: #fff5f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-roster-member-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    color: rgba(255, 235, 230, 0.58);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-roster-trader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #2a1408;
    font-size: 0.55rem;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.55);
}

/* Role chip — colour-coded per role */
.guilds-roster-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(220, 74, 74, 0.36);
    background: rgba(220, 74, 74, 0.12);
    color: rgba(255, 235, 230, 0.88);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.guilds-roster-role i {
    font-size: 0.78em;
}

.guilds-roster-role--owner {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.55);
    color: var(--gld-ember-cream);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.guilds-roster-role--admin {
    background: rgba(192, 132, 252, 0.18);
    border-color: rgba(192, 132, 252, 0.42);
    color: #e9d5ff;
}

.guilds-roster-role--member {
    background: rgba(255, 235, 230, 0.08);
    border-color: rgba(255, 235, 230, 0.22);
    color: rgba(255, 235, 230, 0.82);
}

/* Reputation chip — mirrors ``.guilds-table-renown`` */
.guilds-roster-rep {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gld-ember-cream);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    white-space: nowrap;
}

.guilds-roster-rep i {
    color: var(--gld-ember-soft);
    font-size: 0.86em;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.40));
}

/* Generic engagement chip used by the Posts / Likes / Reposts columns.
   Variant modifier classes only swap the icon hue so the rail still
   reads as one consistent column visually. */
.guilds-roster-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 235, 230, 0.92);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    white-space: nowrap;
}

.guilds-roster-chip i {
    color: rgba(255, 235, 230, 0.58);
    font-size: 0.86em;
}

.guilds-roster-chip--likes i {
    color: #f87171;
    filter: drop-shadow(0 0 5px rgba(248, 113, 113, 0.40));
}

.guilds-roster-chip--reposts i {
    color: #34d399;
    filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.40));
}

/* Role badge inside the member cell (replaces the old role column).
   Sits next to the display name as a tiny chip so founders / admins
   read at a glance without consuming a full column. */
.guilds-roster-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.55rem;
    border: 1px solid transparent;
}

.guilds-roster-role-badge--owner {
    background: linear-gradient(135deg, #f59e0b 0%, #c2410c 100%);
    color: #2a1408;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.55);
}

.guilds-roster-role-badge--admin {
    background: linear-gradient(135deg, #c084fc 0%, #7c3aed 100%);
    color: #150624;
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.45);
}

/* Ghost / placeholder row — used to pad the final page up to ``page_size``
   so the table never visually "jumps" between pages. Same row height /
   structure as a real row, just heavily de-emphasized. */
.guilds-roster-row--ghost {
    pointer-events: none;
}

.guilds-roster-row--ghost td {
    color: rgba(255, 235, 230, 0.22) !important;
}

.guilds-roster-row--ghost .guilds-roster-rank,
.guilds-roster-row--ghost .guilds-roster-avatar,
.guilds-roster-row--ghost .guilds-roster-rep,
.guilds-roster-row--ghost .guilds-roster-chip {
    opacity: 0.40;
}

.guilds-roster-row--ghost .guilds-roster-member-name,
.guilds-roster-row--ghost .guilds-roster-member-handle {
    color: rgba(255, 235, 230, 0.22);
}

.guilds-roster-row--ghost:hover {
    background: transparent;
}

/* ---------- Pagination controls ---------- */

.guilds-roster-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0.9rem;
    padding: 0.4rem;
}

.guilds-roster-pagination[hidden] {
    display: none;
}

.guilds-roster-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(220, 74, 74, 0.36);
    background: rgba(20, 10, 12, 0.7);
    color: var(--gld-ember-cream);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease,
                transform 0.16s ease, color 0.16s ease;
    font-size: 0.78rem;
}

.guilds-roster-pagination-btn:hover,
.guilds-roster-pagination-btn:focus-visible {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(106, 30, 30, 0.55);
    transform: translateY(-1px);
    outline: none;
}

.guilds-roster-pagination-btn:active {
    transform: translateY(0);
}

/* Edge state — applied by guilds_roster.js when prev/next has nowhere
   left to go. We intentionally keep ``cursor: pointer`` and a normal
   hover affordance so the cursor never flips to ``not-allowed`` (a hard
   design requirement). Buttons are merely faded a touch so the user
   can still see they've hit the start / end of the list. */
.guilds-roster-pagination-btn.is-edge {
    opacity: 0.55;
    border-color: rgba(255, 235, 230, 0.22);
    background: rgba(20, 10, 12, 0.5);
    color: rgba(255, 235, 230, 0.6);
}

.guilds-roster-pagination-btn.is-edge:hover,
.guilds-roster-pagination-btn.is-edge:focus-visible {
    /* Hover at the edge nudges the chrome enough that the user knows
       the click registered, even though render() is a no-op. */
    opacity: 0.75;
    transform: none;
}

.guilds-roster-pagination-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: rgba(255, 235, 230, 0.78);
    min-width: 96px;
    text-align: center;
}

/* Empty state inside the roster section */
.guilds-roster-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px dashed rgba(220, 74, 74, 0.32);
    border-radius: 16px;
    background: rgba(15, 6, 8, 0.55);
}

.guilds-roster-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b3535, #3a1414);
    color: var(--gld-ember-cream);
    font-size: 1.05rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.18),
        0 0 14px rgba(220, 74, 74, 0.28);
}

.guilds-roster-empty-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff5f0;
}

.guilds-roster-empty-body {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 235, 230, 0.68);
    max-width: 460px;
}

/* ---------- Right-sidebar "about this guild" card ---------- */

.guilds-view-aside-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

.guilds-view-aside-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.guilds-view-aside-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 235, 230, 0.58);
}

.guilds-view-aside-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 235, 230, 0.92);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.guilds-view-aside-value--ember {
    color: var(--gld-ember-cream);
}

.guilds-view-aside-value--ember i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45));
}

.guilds-view-aside-pill {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid rgba(220, 74, 74, 0.36);
    background: rgba(220, 74, 74, 0.12);
    color: rgba(255, 235, 230, 0.88);
}

.guilds-view-aside-pill--member {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.55);
    color: var(--gld-ember-cream);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.22);
}

.guilds-view-aside-pill--locked {
    background: rgba(255, 235, 230, 0.06);
    border-color: rgba(255, 235, 230, 0.22);
    color: rgba(255, 235, 230, 0.72);
}

/* Roster-cap state — shown instead of the action pill when a guild has
   hit ``GUILD_MAX_MEMBERS``. Same muted treatment as ``--locked`` so the
   "I can't act on this right now" pills read as one family, but with a
   slightly cooler tint + the people-slash icon so the reason scans
   without hover. */
.guilds-view-aside-pill--full {
    background: rgba(220, 74, 74, 0.10);
    border-color: rgba(220, 74, 74, 0.34);
    color: rgba(255, 230, 230, 0.78);
}

.guilds-view-aside-pill--full i {
    color: rgba(252, 165, 165, 0.95);
}

.guilds-view-aside-pill--pending {
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.16),
        rgba(220, 74, 74, 0.12)
    );
    border-color: rgba(245, 158, 11, 0.42);
    color: #fff5e0;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.18);
}

.guilds-view-aside-pill--pending i {
    color: var(--gld-ember-soft, #fbbf24);
}

.guilds-view-aside-pill--info {
    background: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.32);
    color: #e9d5ff;
}

/* Action variant — used as a clickable <button> for the "Request to Join"
   CTA on the guild profile page. Inherits the pill chrome but adds the
   ember-gold palette + hover / focus affordances since the user can
   actually interact with this one. Reset default button styling
   (font-family, line-height) so the look matches the static pills. */
button.guilds-view-aside-pill--action {
    cursor: pointer;
    width: 100%;
    border: 1px solid rgba(245, 158, 11, 0.50);
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.22) 0%,
        rgba(220, 74, 74, 0.18) 100%);
    color: var(--gld-ember-cream);
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.2;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.16s ease;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.18);
}

button.guilds-view-aside-pill--action:hover,
button.guilds-view-aside-pill--action:focus-visible {
    border-color: rgba(245, 158, 11, 0.70);
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.32) 0%,
        rgba(220, 74, 74, 0.26) 100%);
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.32);
    transform: translateY(-1px);
    outline: none;
}

button.guilds-view-aside-pill--action:active {
    transform: translateY(0);
}

button.guilds-view-aside-pill--action i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}

/* Mobile-only "Request to Join" CTA above the roster.
   On desktop the right-aside houses the same affordance, but the aside
   drops below the roster on narrow screens, which buries the primary
   action for non-members. This pill mirrors the aside button so the
   CTA stays one tap above the fold on phones. Hidden by default and
   only revealed by the mobile breakpoint below. */
.guilds-view-request-join-mobile {
    display: none;
}

@media (max-width: 768px) {
    .guilds-view-request-join-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        margin: 0 0 0.9rem 0;
        padding: 0.75rem 1rem;
        border-radius: 999px;
        border: 1px solid rgba(245, 158, 11, 0.55);
        background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.24) 0%,
            rgba(220, 74, 74, 0.20) 100%);
        color: var(--gld-ember-cream);
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.95rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        cursor: pointer;
        box-shadow: 0 0 18px rgba(245, 158, 11, 0.20);
        transition:
            border-color 0.18s ease,
            background 0.18s ease,
            box-shadow 0.18s ease,
            transform 0.16s ease;
    }

    .guilds-view-request-join-mobile i {
        color: var(--gld-ember-soft);
        filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
    }

    .guilds-view-request-join-mobile:hover,
    .guilds-view-request-join-mobile:focus-visible {
        border-color: rgba(245, 158, 11, 0.75);
        background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.34) 0%,
            rgba(220, 74, 74, 0.28) 100%);
        box-shadow: 0 0 26px rgba(245, 158, 11, 0.34);
        transform: translateY(-1px);
        outline: none;
    }

    .guilds-view-request-join-mobile:active {
        transform: translateY(0);
    }

    /* "Guild Full" mobile variant — same shell as the action CTA but
       muted + non-interactive so it visually reads as a status badge
       rather than something the user can tap. Override the hover /
       active rules from the action variant so it stays still. */
    .guilds-view-request-join-mobile.guilds-view-request-join-mobile--full {
        cursor: default;
        border-color: rgba(220, 74, 74, 0.40);
        background: linear-gradient(135deg,
            rgba(220, 74, 74, 0.18) 0%,
            rgba(120, 50, 50, 0.18) 100%);
        color: rgba(255, 230, 230, 0.85);
        box-shadow: none;
    }

    .guilds-view-request-join-mobile.guilds-view-request-join-mobile--full:hover,
    .guilds-view-request-join-mobile.guilds-view-request-join-mobile--full:focus-visible {
        border-color: rgba(220, 74, 74, 0.40);
        background: linear-gradient(135deg,
            rgba(220, 74, 74, 0.18) 0%,
            rgba(120, 50, 50, 0.18) 100%);
        box-shadow: none;
        transform: none;
    }

    .guilds-view-request-join-mobile.guilds-view-request-join-mobile--full i {
        color: rgba(252, 165, 165, 0.95);
        filter: none;
    }
}

/* ---------- View-page mobile tweaks ---------- */

@media (max-width: 720px) {
    .guilds-roster-table th,
    .guilds-roster-table td {
        padding: 10px 8px;
        font-size: 0.82rem;
    }
    /* Mobile-only: collapse the table to Rank / Member / Rep. Posts,
       Likes, and Reposts columns are hidden entirely (header cell,
       body cell, AND the <col> in the colgroup so the remaining columns
       redistribute the freed width). The desktop layout still shows all
       six columns. */
    .guilds-roster-table col.guilds-roster-col-posts,
    .guilds-roster-table col.guilds-roster-col-likes,
    .guilds-roster-table col.guilds-roster-col-reposts,
    .guilds-roster-table thead th:nth-child(n+4),
    .guilds-roster-table tbody td:nth-child(n+4) {
        display: none;
    }

    /* Re-size the three columns we keep so the row fills the available
       width without needing a horizontal scroll. */
    .guilds-roster-table col.guilds-roster-col-rank   { width: 56px; }
    .guilds-roster-table col.guilds-roster-col-rep    { width: 84px; }
    .guilds-roster-table col.guilds-roster-col-member { width: auto; }

    .guilds-roster-wrap {
        /* No scroll axis at all on mobile — the three remaining columns
           fit the viewport, and ghost rows (below) are suppressed so
           the table is only as tall as the real members. Together these
           drop the table out of any "scrollable element" interaction
           and let the page scroll naturally past it. */
        overflow: visible;
    }

    /* Suppress ghost-padding rows on mobile. They exist on desktop so
       the table height never lurches between pages (visual stability),
       but on phones they pad short rosters with empty rows that read
       like a separate, scrollable section — so the table is forced to
       the height of its real members instead. */
    .guilds-roster-table tbody tr.guilds-roster-row--ghost {
        display: none;
    }

    .guilds-roster-avatar {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        font-size: 0.72rem;
    }
    .guilds-roster-member-name {
        font-size: 0.84rem;
    }
    .guilds-roster-member-handle {
        font-size: 0.68rem;
    }
    .guilds-view-breadcrumb-current {
        max-width: 160px;
    }
}

/* ===========================================================
   Chat-immersive mode — collapse the page hero copy.

   When the viewer flips to the Guild Chat tab we want as much
   vertical real estate as possible for the transcript. The
   ``is-chat-immersive`` class is toggled on ``#guildsPageRoot``
   by ``guilds_ambient.js``'s tab-switch path (kept in sync with
   the persisted active tab so a Guild-Chat-restored boot lands
   directly in the collapsed layout, no flash of hero chrome).

   What collapses: the gradient ``.gld-headline`` (with its
   "GUILD HALL" kicker pill nested inside) and the ``.gld-subtitle``
   marketing copy. What STAYS: the small ``.guilds-stage-title``
   row with the dragon icon + "Guilds" label — that's a thin
   wayfinding label that anchors the page so the tab strip
   doesn't read as floating at the top of an empty surface.

   Rather than ``display:none`` the copy — which would snap the
   tab strip up and look jarring — we transition opacity +
   max-height + the vertical margins to zero so the segmented
   pill row glides smoothly toward the top while the chat surface
   grows below it. The animatable ``max-height`` value is a
   generous ceiling that covers every breakpoint without clipping
   in the expanded state.
   =========================================================== */

/* The "Guilds" + dragon icon row at the very top of ``.guilds-stage-head``
   stays put in chat-immersive mode — it's a lightweight wayfinding label
   (no visual weight, no vertical pressure) and keeps the page from feeling
   decapitated when the rest of the hero collapses away. We only target
   the heavy chrome below it: the gradient headline and the subtitle copy. */
.gld-headline,
.gld-subtitle {
    /* Smooth collapse out of / back into chat-immersive mode.
       The opacity duration is shorter than the geometric one so
       the hero copy fades before it folds, which reads as
       "dismissed" rather than "squashed". */
    transition:
        opacity 0.22s ease,
        max-height 0.32s ease,
        margin-top 0.32s ease,
        margin-bottom 0.32s ease;
    max-height: 480px;
    overflow: hidden;
}

.guilds-root.is-chat-immersive .gld-headline,
.guilds-root.is-chat-immersive .gld-subtitle {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

/* Tighten the stage-head padding so the dragon row sits closer to the
   tab strip when the headline + subtitle are gone. The padding values
   are animated alongside the headline/subtitle collapse so the dragon
   row glides upward in sync rather than snapping.

   The opacity + transform entries here preserve the existing
   ``.guilds-reveal`` intro animation — declaring ``transition`` as a
   shorthand replaces any inherited list, so we have to re-state the
   reveal pair to keep the on-scroll fade-in working. */
.guilds-stage-head {
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        padding-top 0.32s ease,
        padding-bottom 0.32s ease;
}

.guilds-root.is-chat-immersive .guilds-stage-head {
    padding-top: clamp(0.6rem, 1.4vw, 1rem);
    padding-bottom: 0;
}

/* The chat surface gets back some of the vertical space the hero
   used to take, but the subtraction is intentionally generous so
   the panel still ends INSIDE the viewport — leaving the composer
   above the fold and visibly lifting the bottom edge of the chat
   off the page bottom (paired with .guilds-chat's margin-bottom).
   This matches the Atrium chat's behavior: the chat "rises" with
   the bottom of the page with a clear margin, instead of running
   all the way to the viewport edge. The 280px reservation accounts
   for the top nav + the compact stage head + the tab strip above,
   plus the bottom margin + a sliver of breathing room below.
   The 1040px ceiling keeps the chat from dominating huge monitors
   while still being taller than the non-immersive base layout. */
.guilds-root.is-chat-immersive .guilds-chat {
    height: clamp(420px, calc(100dvh - 280px), 1040px);
}

@supports not (height: 100dvh) {
    .guilds-root.is-chat-immersive .guilds-chat {
        height: clamp(420px, calc(100vh - 280px), 1040px);
    }
}

/* ===========================================================
   Guild Chat — embedded chat surface on the Guild Hall page.
   Lives inside ``#guildsPanelChat`` and mirrors the Atrium
   chat layout (left channel list + right message surface +
   composer), restyled with the guild palette (--gld-*) so it
   reads as "ember-forged" rather than "Atrium emerald".
   =========================================================== */

.guilds-chat {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    /* No gap — the two columns share a border so the surface reads as
       one slab (matches the Atrium chat seam). */
    gap: 0;
    /* Mirrors the Atrium pin-to-viewport pattern (see .atrium-chat):
     * the chat shrinks with the viewport so the composer is always
     * visible above the fold. The 220px subtraction reserves room for
     * the tab strip above and breathing room below; dvh tracks the
     * live viewport so mobile address-bar collapse doesn't clip the
     * composer. The 360px floor lets short windows still show a
     * usable thread + composer; the 1040px ceiling keeps the chat
     * from dominating huge monitors. */
    height: clamp(360px, calc(100dvh - 220px), 1040px);
    /* Visible breathing room below the chat — matches Atrium so the
     * composer doesn't kiss the viewport edge. */
    margin-bottom: calc(var(--spacing-8) + env(safe-area-inset-bottom, 0px));
    background: rgba(20, 10, 12, 0.78);
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 200, 0.06),
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(220, 74, 74, 0.10);
}

/* Safari < 15.4 lacks dvh — fall back to vh so the composer still
 * stays visible (slightly worse on mobile when the address bar moves). */
@supports not (height: 100dvh) {
    .guilds-chat {
        height: clamp(360px, calc(100vh - 220px), 1040px);
    }
}

/* Mobile-only Channels / Chat tab strip. Lives at the top of the
   chat root and toggles which child pane (channel list or message
   surface) is visible. Hidden on desktop where both panes sit
   side-by-side in the grid. Mirrors the segmented-pill aesthetic
   of the page-level guild tabs (.guilds-tabs) for visual continuity. */
.guilds-chat-mobile-tabs {
    display: none;
}

/* ---------- Left rail: channel list ---------- */

/* Outer aside owns the grid cell and clips the inner wrapper as the
   grid track shrinks during the collapse animation. Layout (flex column,
   min-height: 0) lives on ``.guilds-chat-channels-inner`` so the rail's
   contents keep their natural 220px footprint while the cell width
   tweens, instead of squishing pill-by-pill mid-transition. */
.guilds-chat-channels {
    overflow: hidden;
    border-right: 1px solid rgba(220, 74, 74, 0.22);
    background: rgba(15, 6, 8, 0.45);
    transition:
        opacity 0.22s ease,
        border-right-color 0.32s ease;
}

.guilds-chat-channels-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 220px;
    height: 100%;
}

.guilds-chat-channels-head {
    padding: 0.85rem 0.95rem 0.55rem;
    border-bottom: 1px solid rgba(220, 74, 74, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.guilds-chat-channels-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 235, 230, 0.6);
}

.guilds-chat-channels-title i {
    color: var(--gld-ember-soft);
    font-size: 0.7rem;
}

/* Collapse toggle — sits at the right edge of the channels rail
   header and shrinks the rail to zero so the chat surface can use
   the full width. The expand sibling (.guilds-chat-head-expand)
   takes over once the rail is hidden so the user can always toggle
   the rail back on. */
.guilds-chat-channels-collapse {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 235, 230, 0.55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.guilds-chat-channels-collapse i {
    font-size: 0.78rem;
}

.guilds-chat-channels-collapse:hover,
.guilds-chat-channels-collapse:focus-visible {
    color: var(--gld-ember-soft);
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.32);
    outline: none;
}

.guilds-chat-channel-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.guilds-chat-channel-list li {
    list-style: none;
    margin: 0;
}

/* Each pill + pencil pair shares a row. The pencil only appears for
   founders/admins (server gates the markup), and lives outside the
   pill button so a click on it never doubles as a channel switch. */
.guilds-chat-channel-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.guilds-chat-channel-row .guilds-chat-channel {
    flex: 1 1 auto;
}

.guilds-chat-channel {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    margin: 2px 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255, 235, 230, 0.78);
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

/* Pencil "edit channel" button — sits to the right of each pill in
   the channel list and is only rendered for admins/founders. The
   button stays understated by default and only ramps up the ember
   tone on hover so it never competes with the active-channel highlight. */
.guilds-chat-channel-edit {
    flex: 0 0 auto;
    width: 28px;
    margin: 2px 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 235, 230, 0.4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.guilds-chat-channel-edit i {
    font-size: 0.78rem;
}

.guilds-chat-channel-edit:hover,
.guilds-chat-channel-edit:focus-visible {
    color: var(--gld-ember-soft);
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.32);
    outline: none;
}

.guilds-chat-channel i {
    color: rgba(255, 235, 230, 0.5);
    font-size: 0.78rem;
    flex: 0 0 auto;
}

.guilds-chat-channel-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-chat-channel:hover,
.guilds-chat-channel:focus-visible {
    background: rgba(220, 74, 74, 0.10);
    color: #fff5f0;
    outline: none;
    border-color: rgba(220, 74, 74, 0.22);
}

.guilds-chat-channel.is-active {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.18) 0%,
        rgba(220, 74, 74, 0.22) 100%);
    border-color: rgba(245, 158, 11, 0.45);
    color: var(--gld-ember-cream);
    box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.12);
}

.guilds-chat-channel.is-active i {
    color: var(--gld-ember-soft);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}

.guilds-chat-channel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gld-ember-soft, #fbbf24);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.55);
    flex: 0 0 auto;
}

/* "+ New Channel" affordance — pinned at the bottom of the channel
   list when the viewer is a founder/admin. Same dimensions as a
   channel pill but with a dashed border so it reads as "add" rather
   than "select". */
.guilds-chat-channel-new {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: calc(100% - 0.8rem);
    margin: 0.25rem 0.4rem 0.6rem;
    padding: 0.5rem 0.65rem;
    background: transparent;
    border: 1px dashed rgba(245, 158, 11, 0.42);
    border-radius: 10px;
    color: rgba(245, 158, 11, 0.92);
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.guilds-chat-channel-new i {
    font-size: 0.78rem;
    flex: 0 0 auto;
}

.guilds-chat-channel-new:hover,
.guilds-chat-channel-new:focus-visible {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.7);
    color: var(--gld-ember-cream);
    outline: none;
}

/* ---------- New-channel modal form fields ---------- */

.guilds-chat-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 0.85rem;
}

.guilds-chat-field-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 235, 230, 0.68);
}

.guilds-chat-field-label-hint {
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 235, 230, 0.42);
    font-size: 0.7rem;
}

.guilds-chat-field-input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(20, 10, 12, 0.72);
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 10px;
    color: #fff5f0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.guilds-chat-field-input:focus {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.10);
}

.guilds-chat-field-input::placeholder {
    color: rgba(255, 235, 230, 0.4);
}

/* Note: the announce/text radio group was retired — the create-channel
   modal now only collects name + topic and the API defaults ``kind`` to
   ``text``. Admins can still create announce channels via the API
   directly; the UI just no longer surfaces the option. */

/* ---------- Red-themed scrollbars across the chat surface ----------

   Every scrollable element nested inside ``.guilds-chat`` (channel list,
   message feed, composer textarea, link-preview overflow) gets the same
   ember palette so the chat reads as a single themed plane. ``*`` keeps
   the cascade tight without us having to enumerate every selector. */
.guilds-chat *::-webkit-scrollbar,
.guilds-chat::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.guilds-chat *::-webkit-scrollbar-track,
.guilds-chat::-webkit-scrollbar-track {
    background: transparent;
}

.guilds-chat *::-webkit-scrollbar-thumb,
.guilds-chat::-webkit-scrollbar-thumb {
    background: rgba(220, 74, 74, 0.38);
    border-radius: 999px;
}

.guilds-chat *::-webkit-scrollbar-thumb:hover,
.guilds-chat::-webkit-scrollbar-thumb:hover {
    background: rgba(220, 74, 74, 0.62);
}

/* Firefox — uses a different (older) standard property set. */
.guilds-chat,
.guilds-chat * {
    scrollbar-color: rgba(220, 74, 74, 0.45) transparent;
    scrollbar-width: thin;
}

/* ---------- Right surface: head + feed + composer ---------- */

.guilds-chat-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.guilds-chat-head {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(220, 74, 74, 0.22);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 0 0 auto;
}

/* Horizontal row that holds the optional "show channels" expand
   button alongside the room name. Lives inside .guilds-chat-head
   (which is column-flex) so the topic still wraps onto its own
   line below. */
.guilds-chat-head-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.guilds-chat-head-room {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--gld-ember-cream);
    min-width: 0;
}

.guilds-chat-head-room i {
    color: rgba(255, 235, 230, 0.55);
    font-size: 0.85rem;
}

/* Expand toggle — restores the channel rail. Shown only while
   .guilds-chat carries .is-channels-collapsed; the [hidden]
   attribute is flipped by guilds_chat.js. */
.guilds-chat-head-expand {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    background: rgba(20, 10, 12, 0.5);
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 9px;
    color: rgba(255, 235, 230, 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.guilds-chat-head-expand i {
    font-size: 0.85rem;
}

.guilds-chat-head-expand:hover,
.guilds-chat-head-expand:focus-visible {
    color: var(--gld-ember-cream);
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.48);
    outline: none;
}

.guilds-chat-head-expand[hidden] {
    display: none;
}

/* Collapsed-rail state — toggled by .is-channels-collapsed on the
   .guilds-chat root. The first column tweens from 220px down to 0,
   and the inner wrapper's overflow gets clipped by the outer aside
   so the contents don't squish. The expand affordance in the chat
   head handles the way back. */
.guilds-chat.is-channels-collapsed {
    grid-template-columns: 0px minmax(0, 1fr);
}

.guilds-chat.is-channels-collapsed .guilds-chat-channels {
    opacity: 0;
    border-right-color: transparent;
}

/* Transition is gated by .guilds-chat--ready (added in JS via rAF
   right after the initial state is applied) so a stored "collapsed"
   preference doesn't pop the rail in on first paint. */
.guilds-chat--ready {
    transition: grid-template-columns 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Honour the OS-level reduced-motion preference — snap the rail
   instead of tweening for users who've opted out of motion. */
@media (prefers-reduced-motion: reduce) {
    .guilds-chat--ready,
    .guilds-chat-channels,
    .guilds-chat-head-expand {
        transition: none;
    }
}

.guilds-chat-head-topic {
    font-size: 0.78rem;
    color: rgba(255, 235, 230, 0.6);
    line-height: 1.35;
}

.guilds-chat-head-topic[hidden] { display: none; }

/* ---------- Message feed ---------- */

.guilds-chat-feed {
    list-style: none;
    margin: 0;
    padding: 0.75rem 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Anchor the message stream to the bottom of the scroll container.
   When the loaded content is shorter than the viewport, the
   pseudo-element grows to consume the remaining space, pushing the
   real messages flush to the composer (standard chat behaviour). When
   the content overflows, the pseudo collapses to 0 and the feed scrolls
   normally. The load-older anchor + empty-state placeholder sit AFTER
   this spacer in the layout (insertBefore preserves order), so they
   continue to live above the message rows when those exist. */
.guilds-chat-feed::before {
    content: '';
    flex: 1 1 auto;
    min-height: 0;
}

.guilds-chat-feed::-webkit-scrollbar { width: 8px; }
.guilds-chat-feed::-webkit-scrollbar-track { background: transparent; }
.guilds-chat-feed::-webkit-scrollbar-thumb {
    background: rgba(220, 74, 74, 0.28);
    border-radius: 999px;
}

.guilds-chat-empty {
    align-self: center;
    /* No ``margin: auto`` here — the feed has a ::before flex-spacer
       that already pushes content to the bottom. Forcing auto-margins
       on top of that double-anchors the empty state and produces a
       weird off-center placement. */
    margin: 1.5rem 0;
    color: rgba(255, 235, 230, 0.55);
    font-size: 0.85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.guilds-chat-empty[hidden] { display: none; }

.guilds-chat-empty i {
    color: var(--gld-ember-soft);
    font-size: 1.4rem;
}

.guilds-chat-load-older-wrap {
    align-self: center;
    margin: 0.25rem 0 0.5rem;
}

.guilds-chat-load-older-wrap[hidden] { display: none; }

.guilds-chat-load-older-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(20, 10, 12, 0.6);
    border: 1px solid rgba(220, 74, 74, 0.36);
    color: rgba(255, 235, 230, 0.78);
    cursor: pointer;
    font-size: 0.78rem;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.guilds-chat-load-older-btn:hover {
    background: rgba(106, 30, 30, 0.5);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fff5f0;
}

/* ---------- Message row ---------- */

/* Two-column layout: avatar-stack (avatar + favorited-item tile) on the
   left, name/handle/badges/body on the right. Mirrors the Atrium chat
   row so the surface feels native to anyone who has used the lobby. */
.guilds-chat-msg {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: flex-start;
    padding: 8px 8px;
    border-radius: 10px;
    transition: background 0.18s ease;
}

.guilds-chat-msg:hover {
    background: rgba(220, 74, 74, 0.05);
}

.guilds-chat-msg--own {
    background: linear-gradient(90deg,
        rgba(245, 158, 11, 0.04) 0%,
        rgba(220, 74, 74, 0.05) 100%);
}

.guilds-chat-msg-avatar-stack {
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.guilds-chat-msg-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(220, 74, 74, 0.7) 0%,
        rgba(106, 30, 30, 0.7) 100%);
    color: #fff5f0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    flex: 0 0 auto;
    border: 1px solid rgba(245, 158, 11, 0.32);
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

/* Image variant — drops the initial-circle background so the photo can
   fill the chip edge-to-edge. The border stays as a subtle ember ring. */
.guilds-chat-msg-avatar--img {
    background: rgba(20, 10, 12, 0.6);
    padding: 0;
}

.guilds-chat-msg-avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Favorite inventory tile rendered by the canonical feed partial.
   Force the panel + slot to match the chat avatar width so it sits
   cleanly beneath it; the global default cells (72px) come from the
   profile page and are way too large here. Same override pattern
   Atrium uses with --atr-fav-cell. */
.guilds-chat-msg-avatar-stack .discourse-inventory-feed-slots {
    margin: 0 auto;
    width: 44px;
    pointer-events: auto;
}

.guilds-chat-msg-avatar-stack .profile-inventory-slot-panel,
.guilds-chat-msg-avatar-stack .profile-inventory-slot {
    width: 44px;
    height: 44px;
    padding: 0;
    /* ``help`` (the ? cursor) — matches the global feed treatment
       in post_card.html. The favorite tile is a hover-only
       affordance (inventory mini-card tooltip), not a click
       target, so ``pointer`` would mislead users. */
    cursor: help;
}

.guilds-chat-msg-avatar-stack .discourse-inventory-feed-slots--placeholder {
    opacity: 0.55;
}

.guilds-chat-msg-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Top metadata row: [display name] [badges].
   The @handle pair sits on its OWN row beneath the byline (see
   ``.guilds-chat-msg-handle-row`` below), not inside it — that
   way @handle reads as a secondary attribution line rather than
   competing with the chips for byline real estate.

   ``flex-wrap: nowrap`` keeps the name + badges strictly on one
   line so that when a display name is too long it shrinks (with
   ``min-width: 0`` + ``overflow: hidden`` + ``text-overflow:
   ellipsis`` on ``.guilds-chat-msg-name``) instead of pushing the
   badges to a new line. */
.guilds-chat-msg-byline {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.55rem;
    margin-bottom: 1px;
    min-width: 0;
}

/* Display name. Allowed to ellipsize when the rendered display name
   pushes past the message column — without this, a long name carries
   the whole byline and squashes the timestamp/handle/badge chrome
   off the row.

   The combination of ``flex: 0 1 auto`` (default — grow:0, shrink:1)
   + ``min-width: 0`` lets the name shrink below its content size
   inside the parent flex byline; ``overflow: hidden`` +
   ``text-overflow: ellipsis`` + ``white-space: nowrap`` then renders
   the ``…`` once the name no longer fits. ``display: block`` is
   used over ``inline-block`` because block elements inside a flex
   container honor ``text-overflow: ellipsis`` more reliably across
   engines (some WebKit builds bail on ellipsis when an inline-block
   flex item is the shrinkee). */
.guilds-chat-msg-name {
    color: var(--gld-ember-cream);
    font-weight: 800;
    text-decoration: none;
    font-size: 0.95rem;
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-chat-msg-name:hover {
    text-decoration: underline;
}

/* @handle row — its own line beneath the byline, carrying the
   @handle + the date/time pill as a "who and when" attribution
   strip. Sits in normal flow (no ``margin-left: auto``) so it
   left-aligns under the display name. Internal ``flex-wrap: wrap``
   lets the timestamp drop below the @handle on very narrow
   surfaces if a long handle eats the row. */
.guilds-chat-msg-handle-row {
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
}

.guilds-chat-msg-handle {
    color: rgba(255, 235, 230, 0.55);
    text-decoration: none;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.01em;
    /* Ellipsize the @handle on the same logic as the display name —
       on narrow viewports a very long handle would otherwise crowd
       the timestamp pill off-screen. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-chat-msg-handle:hover {
    color: var(--gld-ember-soft);
    text-decoration: underline;
}

/* Date + time pill — sits next to the @handle, e.g. "May 16 · 2:14 PM".
   Stays in mono so it lines up with the @handle baseline; never
   shrinks below its content width thanks to ``white-space: nowrap``. */
.guilds-chat-msg-time {
    color: rgba(255, 235, 230, 0.45);
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Badges row — verified, moderator, oracle rank, trader, and any
   verified-domain chips. Reuses global .verified-badge,
   .moderator-badge, .oracle-rank-badge, .trader-badge,
   .domain-badge-inline rules from style.css.

   The chips now live INSIDE ``.guilds-chat-msg-byline`` (right
   after the display name) rather than on their own row below the
   handle. No vertical margin — they share the byline's baseline
   with the name and handle row. ``flex-shrink: 0`` keeps the chip
   strip from being squeezed when the byline tightens; the display
   name shrinks (and ellipses) first. */
.guilds-chat-msg-badges-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    flex-shrink: 0;
}

/* The trader/domain chips' canonical inline styles live inside the
   post_card.html <style> block, which never loads on the Guilds page —
   mirror them here so chips look right without dragging post_card in.
   Keep the emerald gradient + white text + shimmer in sync with the
   canonical trader badge (post_card.html, inbox.css, atrium.css) so
   the trader chip looks identical wherever it appears. */
.guilds-chat .trader-badge,
.guilds-chat-msg .trader-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px 3px;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    border: none;
    border-radius: 999px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    position: relative;
    overflow: hidden;
}

.guilds-chat .trader-badge::before,
.guilds-chat-msg .trader-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: guildsChatTraderShine 3s ease-in-out infinite;
}

@keyframes guildsChatTraderShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.guilds-chat .trader-badge i,
.guilds-chat-msg .trader-badge i {
    font-size: 9px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.guilds-chat .trader-badge span,
.guilds-chat-msg .trader-badge span {
    line-height: 1;
    display: inline-block;
}

.guilds-chat .domain-badge-inline,
.guilds-chat-msg .domain-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(20, 10, 12, 0.6);
    border: 1px solid var(--badge-color, rgba(255, 235, 230, 0.3));
    color: var(--badge-color, rgba(255, 235, 230, 0.7));
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.guilds-chat .domain-badge-inline i,
.guilds-chat-msg .domain-badge-inline i {
    font-size: 9px;
}

.guilds-chat .domain-badge-more,
.guilds-chat-msg .domain-badge-more {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(20, 10, 12, 0.6);
    border: 1px solid rgba(255, 235, 230, 0.18);
    color: rgba(255, 235, 230, 0.55);
    font-size: 10px;
    font-weight: 700;
}

/* Message body — text + optional link preview card. */
.guilds-chat-msg-body {
    color: rgba(255, 235, 230, 0.92);
    font-size: 0.92rem;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.guilds-chat-msg-body a {
    color: var(--gld-ember-soft);
    text-decoration: underline;
    text-decoration-color: rgba(245, 158, 11, 0.4);
}

/* @mentions: no underline on "@"; underline handle on hover only */
.guilds-chat-msg-body a.mention {
    text-decoration: none;
}
.guilds-chat-msg-body a.mention .mention-handle {
    text-decoration: none;
}
.guilds-chat-msg-body a.mention:hover .mention-handle {
    text-decoration: underline;
    text-decoration-color: rgba(245, 158, 11, 0.55);
}

.guilds-chat-msg-body a.mention.mention--guild-viewer-target {
    text-decoration: none;
    box-shadow:
        0 0 0 2px rgba(245, 158, 11, 0.55),
        0 0 18px rgba(245, 158, 11, 0.25);
    border-radius: 4px;
    padding: 0 2px;
    background: rgba(245, 158, 11, 0.12);
}

@keyframes guildsChatMentionPulse {
    0% {
        box-shadow:
            inset 0 0 0 0 rgba(245, 158, 11, 0),
            0 0 0 0 rgba(245, 158, 11, 0);
    }
    22% {
        box-shadow:
            inset 0 0 0 1px rgba(245, 158, 11, 0.35),
            0 0 0 6px rgba(245, 158, 11, 0.12);
    }
    100% {
        box-shadow:
            inset 0 0 0 0 rgba(245, 158, 11, 0),
            0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.guilds-chat-msg.guilds-chat-msg--mention-pulse {
    animation: guildsChatMentionPulse 2.4s ease-out 1;
    border-radius: 12px;
}

.guilds-chat-msg-body code,
.guilds-chat-msg-body pre {
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(220, 74, 74, 0.22);
    border-radius: 6px;
    padding: 1px 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
}

.guilds-chat-msg-body pre {
    padding: 8px 10px;
    overflow-x: auto;
    margin: 4px 0;
}

/* Tombstones — hidden / blocked messages. Inline single-row note that
   keeps the transcript continuous without surfacing sender data. */
.guilds-chat-msg--tombstone {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 4px 12px;
    color: rgba(255, 235, 230, 0.45);
    font-size: 0.78rem;
    font-style: italic;
}

.guilds-chat-msg-tombstone-icon i {
    color: rgba(255, 235, 230, 0.32);
}

/* Link preview card. */

.guilds-chat-link-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding: 8px;
    border: 1px solid rgba(220, 74, 74, 0.24);
    border-radius: 10px;
    background: rgba(20, 10, 12, 0.55);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.guilds-chat-link-card:hover {
    background: rgba(106, 30, 30, 0.32);
    border-color: rgba(245, 158, 11, 0.42);
}

.guilds-chat-link-card-img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 88px;
}

.guilds-chat-link-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.guilds-chat-link-card-title {
    color: var(--gld-ember-cream);
    font-weight: 700;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-chat-link-card-desc {
    color: rgba(255, 235, 230, 0.7);
    font-size: 0.78rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.guilds-chat-link-card-url {
    color: rgba(255, 235, 230, 0.45);
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Rendered attachments on chat rows ----------
   Image + .py/.ipynb download pills. Mirrors how DM / Atrium rows render
   the same shape, but tinted to the Guild Hall oxblood/amber palette.
   The image is wrapped in an anchor so clicking opens the full-res
   CloudFront URL in a new tab — same affordance as feed posts. */

.guilds-chat-msg-media-img-link {
    display: block;
    margin: 8px 0 4px;
    max-width: min(420px, 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, 0.22);
    background: rgba(15, 6, 8, 0.55);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.guilds-chat-msg-media-img-link:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.guilds-chat-msg-media-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
}

.guilds-chat-msg-media-code {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    padding: 10px 14px 10px 12px;
    max-width: min(360px, 100%);
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.32);
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(220, 74, 74, 0.22) 100%);
    color: #fff5f0;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-shadow: inset 0 1px 0 rgba(245, 158, 11, 0.18);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease;
}

.guilds-chat-msg-media-code:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(245, 158, 11, 0.25),
        0 8px 22px rgba(0, 0, 0, 0.45);
    text-decoration: none;
}

.guilds-chat-msg-media-code-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(15, 6, 8, 0.7);
    color: #f59e0b;
    font-size: 18px;
    flex: 0 0 auto;
}

.guilds-chat-msg-media-code-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.guilds-chat-msg-media-code-name {
    color: #fff5f0;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-chat-msg-media-code-kind {
    color: rgba(255, 235, 230, 0.72);
    font-size: 0.72rem;
    line-height: 1.2;
}

.guilds-chat-msg-media-code-dl {
    color: rgba(245, 158, 11, 0.85);
    font-size: 13px;
    flex: 0 0 auto;
}

/* ---------- Jump-to-latest pill ---------- */

.guilds-chat-jump {
    position: relative;
    align-self: center;
    margin: 0 auto;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b 0%, #dc4a4a 100%);
    color: #fff5f0;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(220, 74, 74, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    margin-top: -28px; /* hovers above the composer */
    margin-bottom: 6px;
}

.guilds-chat-jump:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(220, 74, 74, 0.45);
}

.guilds-chat-jump[hidden] { display: none; }

.guilds-chat-jump i { margin-right: 4px; }

/* ---------- Composer ---------- */

/* Guild-surface rate-limit banner — sits in the same band that the
   ``.guilds-chat-composer`` lives in, just above the composer chrome.
   The base ``.chat-rate-banner`` block (style.css) handles colour + icon;
   here we line up horizontal padding with the composer's ``1rem`` so the
   banner shares its column visually. */
#guildsChatRateBanner.chat-rate-banner {
    margin: 0 1rem 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.guilds-chat-composer.is-rate-suspended {
    opacity: 0.78;
}

.guilds-chat-composer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 1rem 0.85rem;
    border-top: 1px solid rgba(220, 74, 74, 0.22);
    background: rgba(15, 6, 8, 0.55);
    flex: 0 0 auto;
}

/* The flex row that holds the attach circles + textarea + send button.
   The actual "flex flow" of the composer lives here so the attachments
   panel above it can stack on its own line.

   Items are vertically centered so the placeholder text and the icons
   on the attach / send buttons share a common horizontal baseline. The
   textarea (40px) is taller than the attach circles (34px), so flex-end
   would pin everything to the bottom and the placeholder would float
   above the button centers. */
.guilds-chat-composer-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ---- Staged attachment tiles (sit above the composer row) ---- */

.guilds-chat-composer-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px dashed rgba(245, 158, 11, 0.35);
    background: rgba(20, 10, 12, 0.55);
    animation: gld-chat-tile-slide-in 0.22s ease;
}

.guilds-chat-composer-attachments[hidden] { display: none; }

@keyframes gld-chat-tile-slide-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.guilds-chat-composer-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    max-width: 320px;
    padding: 8px 38px 8px 8px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.32);
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(220, 74, 74, 0.20) 100%);
    color: #fff5f0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8rem;
    box-shadow: inset 0 1px 0 rgba(245, 158, 11, 0.18);
}

.guilds-chat-composer-tile--link {
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(180, 60, 60, 0.24) 100%);
}

.guilds-chat-composer-tile--code {
    background:
        linear-gradient(135deg, rgba(255, 200, 124, 0.16) 0%, rgba(220, 74, 74, 0.22) 100%);
    border-color: rgba(255, 200, 124, 0.35);
}

.guilds-chat-composer-tile__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
    background: rgba(15, 6, 8, 0.7);
}

.guilds-chat-composer-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex: 0 0 auto;
    background: rgba(15, 6, 8, 0.7);
    color: #f59e0b;
    font-size: 16px;
}

.guilds-chat-composer-tile__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guilds-chat-composer-tile__title {
    color: #fff5f0;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.guilds-chat-composer-tile__sub {
    color: rgba(255, 235, 230, 0.7);
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-chat-composer-tile__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 6, 8, 0.55);
    color: rgba(255, 235, 230, 0.85);
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.guilds-chat-composer-tile__remove:hover {
    background: rgba(220, 38, 38, 0.7);
    color: #fff;
}

/* ---- Circle attach buttons ---- */

/* ---- Attach-menu wrapper (three-dot toggle + popover row) ----
   When there is room, the three attach circles render inline inside
   ``.guilds-chat-composer-attach-row`` and the three-dot toggle is
   hidden (``.guilds-chat-composer-attach-more { display: none }``).

   The wrap collapses to the three-dot control + popover when:
   - the viewport is ≤720px (see mobile @media block below), or
   - desktop (≥721px) with the channel rail expanded — see the
     ``(min-width: 721px)`` block + ``:not(.is-channels-collapsed)``.

   Inline circles remain for desktop + collapsed rail only. Mirrors
   the Atrium composer's compact composer treatment. */
.guilds-chat-composer-attach-wrap {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    flex: 0 0 auto;
}

/* Hidden on desktop; the three circles render inline as today. The
   mobile @media block below flips the visibility.

   NOTE: this button also carries the ``.guilds-chat-composer-attach``
   class (so the mobile popover trigger inherits the circle styling),
   and the ``.guilds-chat-composer-attach { display: inline-flex }``
   rule lives further down. Equal-specificity, later-in-source-order
   => that rule would otherwise override our ``display: none`` and
   reveal the three-dot button on desktop. The chained selector here
   bumps the specificity to 0,2,0 so this win is unconditional. */
.guilds-chat-composer-attach.guilds-chat-composer-attach-more {
    display: none;
}

.guilds-chat-composer-attach-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Desktop with the channel rail expanded: the split pane is narrow, so
   match the mobile attach treatment — one ellipsis control opens the
   image / link / code actions in a popover and frees horizontal space
   for the textarea. When the rail is collapsed, the circles stay inline
   (see default rules above). */
@media (min-width: 721px) {
    .guilds-chat:not(.is-channels-collapsed) .guilds-chat-composer-attach.guilds-chat-composer-attach-more {
        display: inline-flex;
    }
    .guilds-chat:not(.is-channels-collapsed) .guilds-chat-composer-attach-wrap > .guilds-chat-composer-attach-row {
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 6px;
        border-radius: 14px;
        border: 1px solid rgba(245, 158, 11, 0.40);
        background: rgba(20, 10, 12, 0.94);
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 220, 200, 0.08);
        opacity: 0;
        transform: translateY(4px) scale(0.96);
        transform-origin: bottom left;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease;
        pointer-events: none;
        z-index: 5;
    }
    .guilds-chat:not(.is-channels-collapsed) .guilds-chat-composer-attach-wrap.is-open > .guilds-chat-composer-attach-row {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .guilds-chat:not(.is-channels-collapsed) .guilds-chat-composer-attach-wrap.is-open > .guilds-chat-composer-attach-more {
        background: rgba(106, 30, 30, 0.45);
        border-color: rgba(245, 158, 11, 0.70);
        color: #fff5f0;
    }
}

.guilds-chat-composer-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(20, 10, 12, 0.72);
    color: #f59e0b;
    font-size: 13px;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.18s ease,
        color 0.15s ease;
    box-shadow: inset 0 1px 0 rgba(245, 158, 11, 0.12);
}

.guilds-chat-composer-attach:hover {
    transform: translateY(-1px);
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.7);
    color: #fff5f0;
    box-shadow:
        inset 0 1px 0 rgba(245, 158, 11, 0.22),
        0 4px 14px rgba(220, 74, 74, 0.32);
}

.guilds-chat-composer-attach:active { transform: translateY(0); }

.guilds-chat-composer-attach:focus-visible {
    outline: 2px solid rgba(245, 158, 11, 0.6);
    outline-offset: 2px;
}

/* ---- Composer status line ---- */

.guilds-chat-composer-status {
    min-height: 1em;
    margin: 0 4px;
    font-size: 11.5px;
    color: rgba(255, 235, 230, 0.65);
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.2;
}

.guilds-chat-composer-status--error { color: #fca5a5; }

/* ---- Mention dropdown (guild chat composer row) ---- */

.guilds-chat-composer-row .mentions-container.guilds-chat-composer-mentions {
    flex: 1 1 auto;
    min-width: 0;
}

/* @mentions opens upward into the transcript so composer / panel chrome
 * don't shrink or clip against the viewport (downward dropdown fought the
 * bottom-pinned composer). */
.guilds-chat .mentions-container.guilds-chat-composer-mentions .mentions-dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 8px;
    animation: none;
    box-shadow:
        0 -6px 20px -2px rgba(0, 0, 0, 0.45),
        0 -2px 8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(251, 191, 36, 0.06);
}

.guilds-chat .mentions-container.guilds-chat-composer-mentions .mentions-dropdown.active {
    animation: guild-chat-mentions-drop-up 0.16s ease-out;
}

@keyframes guild-chat-mentions-drop-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guilds-chat-composer-input-wrap {
    position: relative;
    width: 100%;
}

.guilds-chat-composer-icon {
    position: absolute;
    left: 12px;
    top: 12px;
    color: rgba(255, 235, 230, 0.4);
    font-size: 0.85rem;
    pointer-events: none;
}

.guilds-chat-composer-input {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px 10px 36px;
    background: rgba(20, 10, 12, 0.72);
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 12px;
    color: #fff5f0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: none;
    outline: none;
    overflow-y: hidden; /* paired with autoGrow() in guilds_chat.js — the
                           textarea grows to fit its content rather than
                           showing an internal scrollbar at any height. */
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.guilds-chat-composer-input:focus {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.10);
}

.guilds-chat-composer-input::placeholder {
    color: rgba(255, 235, 230, 0.4);
}

.guilds-chat-composer-send {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #dc4a4a 100%);
    color: #fff5f0;
    cursor: pointer;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(220, 74, 74, 0.32);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.guilds-chat-composer-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(220, 74, 74, 0.48);
}

.guilds-chat-composer-send:disabled,
.guilds-chat-composer-send.is-sending {
    cursor: progress;
    opacity: 0.72;
    transform: none;
}

.guilds-chat-composer-send.is-sending i {
    animation: gld-chat-send-spin 0.9s linear infinite;
}

@keyframes gld-chat-send-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Inline error toast (composer-level — pinned above the composer) */

.guilds-chat-error {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 1rem;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.42);
    background: rgba(127, 29, 29, 0.42);
    color: #fecaca;
    font-size: 0.82rem;
}

.guilds-chat-error i { color: #f87171; }

/* ---------- Mobile / narrow layouts ---------- */

@media (max-width: 720px) {
    /* ============================================================
       Mobile chat layout model.

       Two layers of scrolling on mobile:

       1. The OUTER chat container (and its channels/surface body)
          flow with the page — no fixed-height clamp, no internal
          scrollbars on the chat shell, channel header, or
          composer. The desktop's "fixed-height grid container with
          internal scrollers in each cell" layout is dismantled
          entirely here.

       2. The message FEED keeps an internal y-scroller, capped at
          ~38dvh. This is a deliberate exception to the page-scroll
          model: without it the feed grows tall enough to push the
          composer (post-message controls) below the fold, forcing
          the user to scroll the whole page just to find the Send
          button. A capped, internally-scrolling feed is the
          chat-UX standard users already expect (Discord, Slack,
          iMessage).

       The ``!important`` guards on the outer-shell selectors are
       intentional — several desktop rules (base ``.guilds-chat``
       + ``@supports`` dvh fallback + chat-immersive override) all
       target the same selectors with the same specificity, so
       without the bumper the cascade order between them is
       fragile.
       ============================================================ */
    /* ----- Outer chat container ----- */
    .guilds-chat,
    .guilds-root.is-chat-immersive .guilds-chat {
        display: block;
        height: auto !important;
        max-height: none !important;
        min-height: 0;
        overflow: visible !important;
    }

    /* ----- Channels rail + surface body -----
       On mobile they sit one above the other (only one shown at a
       time via the ``is-mobile-tab-*`` modifier). Drop the
       desktop's fixed-height stretching — we want each pane sized
       by its content so the page handles all overflow. */
    .guilds-chat-channels,
    .guilds-chat-channels-inner {
        height: auto !important;
        max-height: none !important;
        min-height: 0;
        overflow: visible !important;
        width: 100%;
    }
    .guilds-chat-surface {
        height: auto !important;
        max-height: none !important;
        min-height: 0;
        overflow: visible !important;
        width: 100%;
    }

    /* ----- Channel list -----
       The channels rail is short by nature (one pill per channel,
       a handful of guilds at most) so it flows naturally with the
       page. No internal scroll needed. */
    .guilds-chat-channel-list {
        flex: 0 0 auto;
        max-height: none !important;
        min-height: 0;
        overflow: visible !important;
    }

    /* ----- Message feed (the ONE place we keep an internal scroll) -----
       The chat surface is otherwise flow-with-the-page on mobile,
       but the message feed gets a capped height + its own y-axis
       scroller. Without this the feed grows to fit every loaded
       message and pushes the composer (post-message controls) far
       below the fold — the user has to scroll the whole page to
       even see the "Send" button. Capping at ~38dvh keeps the
       feed taller than a handful of messages but short enough that
       the composer always lands inside the visible viewport, with
       the top page chrome (mobile nav + segmented Guilds tabs +
       chat mobile tabs + channel header) still on-screen above it.

       The composer doesn't need any special positioning — it sits
       as the natural next sibling inside ``.guilds-chat-surface``
       and gets the remainder of the chat section below the feed
       cap. Long histories scroll inside the feed (the only nested
       scroll on mobile, which is a chat-UX standard users
       expect — Discord, Slack, iMessage all do the same). */
    .guilds-chat-feed {
        flex: 0 0 auto;
        min-height: 0;
        max-height: clamp(180px, 38dvh, 360px);
        overflow-y: auto;
        overflow-x: hidden;
        /* Hide the scrollbar VISUALLY but keep scroll behavior —
           touch/swipe and programmatic scroll still work, the bar
           just never paints. Mobile chat patterns (iMessage,
           WhatsApp, Discord on phones) all use this invisible-
           scrollbar treatment so the thread reads as a continuous
           surface rather than a boxed-in widget. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .guilds-chat-feed::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
    @supports not (height: 100dvh) {
        .guilds-chat-feed {
            max-height: clamp(180px, 38vh, 360px);
        }
    }
    /* The desktop feed uses a ``::before`` flex-spacer to push few
       messages to the bottom of a fixed-height container. With the
       feed now capped via ``max-height`` (not stretched via ``flex:
       1``), the spacer would just eat the visible scroll area, so
       we collapse it out of layout. */
    .guilds-chat-feed::before {
        display: none;
    }

    /* The desktop ``is-channels-collapsed`` modifier is a no-op on
       mobile — tab state owns rail visibility instead, and the
       collapse/expand affordances are hidden below. */
    .guilds-chat.is-channels-collapsed {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }
    .guilds-chat.is-channels-collapsed .guilds-chat-channels {
        border-bottom-color: transparent;
    }

    /* ----- Tab strip ----- */
    .guilds-chat-mobile-tabs {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px;
        border-bottom: 1px solid rgba(220, 74, 74, 0.22);
        background: rgba(15, 6, 8, 0.55);
    }
    .guilds-chat-mobile-tab {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.55rem 0.7rem;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 999px;
        color: rgba(224, 200, 200, 0.82);
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .guilds-chat-mobile-tab i {
        color: var(--gld-blood-soft);
        font-size: 0.82em;
        opacity: 0.85;
    }
    .guilds-chat-mobile-tab:hover,
    .guilds-chat-mobile-tab:focus-visible {
        outline: none;
        color: #fff5f0;
        border-color: rgba(220, 74, 74, 0.40);
        background: rgba(106, 30, 30, 0.22);
    }
    .guilds-chat-mobile-tab.is-active {
        background: linear-gradient(135deg, rgba(220, 74, 74, 0.50) 0%, rgba(106, 30, 30, 0.62) 100%);
        border-color: rgba(245, 158, 11, 0.50);
        color: #fff5f0;
        box-shadow:
            inset 0 1px 0 rgba(255, 220, 200, 0.12),
            0 0 18px rgba(220, 74, 74, 0.28);
    }
    .guilds-chat-mobile-tab.is-active i {
        color: var(--gld-ember-soft);
        opacity: 1;
        filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.40));
    }
    /* Unread dot for the "Channels" tab — appears whenever a
       non-active channel has new messages, mirroring the per-pill
       dot inside the channel list so users on the Chat tab know
       to flip over. Sits as an absolutely-positioned ember speck
       on the top-right of the tab so it doesn't push the label. */
    .guilds-chat-mobile-tab {
        position: relative;
    }
    .guilds-chat-mobile-tab.has-unread::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 10px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gld-ember-soft, #fbbf24);
        box-shadow: 0 0 6px rgba(251, 191, 36, 0.55);
        pointer-events: none;
    }

    /* ----- Tab-driven pane visibility -----
       Default is the Chat tab (set by .is-mobile-tab-chat on root +
       the matching class is sprinkled by guilds_chat.js on tab click).
       Whichever sibling is hidden vacates the body row entirely so the
       visible pane gets the full height. */
    .guilds-chat-channels {
        display: none;
        border-right: 0;
        border-bottom: 0;
        max-height: none;
        /* Let the channels rail flow with the page on mobile —
           the base rule's ``overflow: hidden`` would clip the list
           now that we no longer constrain the parent height. */
        overflow: visible;
    }
    .guilds-chat.is-mobile-tab-channels .guilds-chat-channels {
        display: block;
    }
    .guilds-chat.is-mobile-tab-channels .guilds-chat-surface {
        display: none;
    }

    .guilds-chat-channels-inner {
        width: 100%;
        height: 100%;
    }

    /* Channel list reverts to a vertical column on mobile (the
       previous stacked-rail layout forced a horizontal scroller to
       fit 132px of vertical space). With the page-scroll model
       above the list flows naturally — no internal overflow needed;
       the page handles it. */
    .guilds-chat-channel-list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
        padding: 0.6rem;
        gap: 4px;
    }
    .guilds-chat-channel-list li {
        flex: 0 0 auto;
    }
    .guilds-chat-channel {
        width: 100%;
        margin: 0;
    }

    /* Tabs replace the desktop collapse/expand affordances on mobile. */
    .guilds-chat-channels-collapse,
    .guilds-chat-head-expand {
        display: none !important;
    }

    /* Tighter chat post-card spacing on phones. The favorited-item
       tile under each avatar is now kept on mobile (parity with
       desktop and with the rest of the feed), but only when the
       sender has actually equipped something — the placeholder
       variant (``.discourse-inventory-feed-slots--placeholder``)
       still gets hidden so users with nothing equipped don't reserve
       a ~50px square of dead space under every card. */
    .guilds-chat-msg {
        padding: 4px 4px;
        gap: 0.55rem;
    }
    .guilds-chat-msg-avatar-stack {
        gap: 4px;
    }
    .guilds-chat-msg-avatar-stack .discourse-inventory-feed-slots--placeholder {
        display: none;
    }

    /* Mobile metadata: same single-row byline as desktop, but with
       tighter gaps to claw back horizontal space on phone widths.

       Layout: [name] [badges] ......... [@handle · time]

       The byline is a wrapping flex row; on the narrowest phones,
       once the handle pair can no longer fit beside the name +
       badges it drops to its own line beneath. The
       ``margin-left: auto`` on ``.guilds-chat-msg-handle-row`` from
       the base rule already does the right-push. The content
       column stays as ``display: flex; flex-direction: column``
       (from the base rule) so the message body sits naturally
       below the byline. */
    /* Mobile message header stack — three distinct rows under
       the avatar (the desktop single-row byline gets blown out
       on narrow phones, especially when the user has more than
       one badge):

         Row 1: display name
         Row 2: @handle · time
         Row 3: badges
         Row 4: message body

       The DOM order (set in guilds_chat.js) is
       ``byline(name + badges) → handle-row → body``. Rather than
       restructuring the markup, we flatten the byline with
       ``display: contents`` so its children (name + badges) sit
       as direct flex children of ``.guilds-chat-msg-content``,
       and then use ``order`` to interleave the handle row
       between them and push badges below. */
    .guilds-chat-msg-content {
        gap: 1px;
    }
    .guilds-chat-msg-byline {
        display: contents;
    }
    .guilds-chat-msg-name {
        order: 1;
        line-height: 1.15;
    }
    .guilds-chat-msg-handle-row {
        order: 2;
        line-height: 1;
        gap: 0.4rem;
        /* Pull the @handle · time strip up tight against the
           display name. Mirrors the visual rhythm of the
           Atrium mobile cards where the secondary attribution
           hugs the username. */
        margin-top: -20px;
    }
    .guilds-chat-msg-handle,
    .guilds-chat-msg-time {
        line-height: 1;
    }
    .guilds-chat-msg-badges-row {
        order: 3;
        /* Pull the badges row up just a touch tighter than the
           handle row so the whole header column reads as one
           compact unit instead of three loosely-spaced rows. */
        margin-top: -22px;
        margin-bottom: 0;
        /* Left-align under the handle row — no longer being
           pushed by the byline's inline-flex layout. */
        justify-content: flex-start;
    }
    .guilds-chat-msg-body {
        order: 4;
        margin-top: 3px;
    }

    .guilds-chat-link-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .guilds-chat-link-card-img {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }
    .guilds-chat-composer-row { gap: 0.4rem; }
    .guilds-chat-composer-attach { width: 30px; height: 30px; font-size: 12px; }
    .guilds-chat-composer-attach-row { gap: 4px; }

    /* ---- Mobile attach menu (three-dot toggle) ----
       Replace the three inline attach circles with a single
       three-dot button on mobile; the original three circles
       render as a small floating popover above the toggle when
       it's tapped open. Keeps the composer row narrow enough for
       the textarea + send button to fit without the input being
       squashed (see Atrium mobile composer treatment).

       The matched-specificity selector below mirrors the desktop
       ``.attach.attach-more`` hide rule so this mobile flip wins
       the cascade. */
    .guilds-chat-composer-attach.guilds-chat-composer-attach-more {
        display: inline-flex;
    }
    .guilds-chat-composer-attach-wrap > .guilds-chat-composer-attach-row {
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 6px;
        border-radius: 14px;
        border: 1px solid rgba(245, 158, 11, 0.40);
        background: rgba(20, 10, 12, 0.94);
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 220, 200, 0.08);
        opacity: 0;
        transform: translateY(4px) scale(0.96);
        transform-origin: bottom left;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease;
        pointer-events: none;
        z-index: 5;
    }
    .guilds-chat-composer-attach-wrap.is-open > .guilds-chat-composer-attach-row {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .guilds-chat-composer-attach-wrap.is-open > .guilds-chat-composer-attach-more {
        background: rgba(106, 30, 30, 0.45);
        border-color: rgba(245, 158, 11, 0.70);
        color: #fff5f0;
    }
    .guilds-chat-composer-tile {
        min-width: 160px;
        max-width: 100%;
        padding: 6px 32px 6px 6px;
    }
    .guilds-chat-composer-tile__thumb,
    .guilds-chat-composer-tile__icon { width: 38px; height: 38px; }
    .guilds-chat-msg-media-img { max-height: 280px; }
}

/* =====================================================================
   Manage Roster modal
   ---------------------------------------------------------------------
   Larger variant of the .guilds-confirm-modal — the card grows so the
   member list has comfortable breathing room. Reuses every chrome rule
   from the confirm-modal skeleton (backdrop, header close button,
   footer); only the body content gets dedicated styling.
   ===================================================================== */

.guilds-manage-roster-card {
    width: min(560px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 80px));
    display: flex;
    flex-direction: column;
}

.guilds-manage-roster-card .guilds-confirm-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.guilds-manage-roster-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(220, 74, 74, 0.32);
    border-radius: 10px;
    background: rgba(20, 10, 12, 0.6);
    transition: border-color 0.16s ease, background 0.16s ease;
    flex: 0 0 auto;
}

.guilds-manage-roster-search:focus-within {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(20, 10, 12, 0.78);
}

.guilds-manage-roster-search i {
    color: rgba(255, 235, 230, 0.5);
    font-size: 0.85rem;
}

.guilds-manage-roster-search-input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff5f0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.92rem;
    padding: 0;
}

.guilds-manage-roster-search-input::placeholder {
    color: rgba(255, 235, 230, 0.4);
}

/* Scrollable member list — sits inside the modal body and shares the
   red scrollbar treatment from the rest of the guild surface. */
.guilds-manage-roster-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    scrollbar-color: rgba(220, 74, 74, 0.45) transparent;
    scrollbar-width: thin;
}

.guilds-manage-roster-list::-webkit-scrollbar { width: 8px; }
.guilds-manage-roster-list::-webkit-scrollbar-track { background: transparent; }
.guilds-manage-roster-list::-webkit-scrollbar-thumb {
    background: rgba(220, 74, 74, 0.38);
    border-radius: 999px;
}
.guilds-manage-roster-list::-webkit-scrollbar-thumb:hover {
    background: rgba(220, 74, 74, 0.62);
}

.guilds-manage-roster-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(20, 10, 12, 0.45);
    transition: background 0.16s ease, border-color 0.16s ease;
}

.guilds-manage-roster-row:hover {
    background: rgba(106, 30, 30, 0.32);
    border-color: rgba(220, 74, 74, 0.32);
}

.guilds-manage-roster-row[hidden] {
    display: none;
}

.guilds-manage-roster-id {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.guilds-manage-roster-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 36px;
    object-fit: cover;
    background: linear-gradient(135deg,
        rgba(220, 74, 74, 0.7) 0%,
        rgba(106, 30, 30, 0.7) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.guilds-manage-roster-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff5f0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
}

.guilds-manage-roster-id-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.guilds-manage-roster-name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--gld-ember-cream);
    font-weight: 800;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-manage-roster-handle {
    color: rgba(255, 235, 230, 0.55);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two-stage Remove control: idle pill on the right, swaps to a
   confirm cluster (Cancel + Confirm) when clicked. Lives at the
   tail of the row so the member identity reads left-to-right. */
.guilds-manage-roster-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.guilds-manage-roster-actions[data-state="idle"] .guilds-manage-roster-confirm {
    display: none;
}

.guilds-manage-roster-actions[data-state="confirm"] .guilds-manage-roster-action--remove {
    display: none;
}

.guilds-manage-roster-actions[data-state="confirm"] .guilds-manage-roster-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.guilds-manage-roster-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    background: transparent;
    color: rgba(255, 235, 230, 0.8);
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.guilds-manage-roster-action i {
    font-size: 0.75rem;
}

.guilds-manage-roster-action--remove {
    background: rgba(220, 74, 74, 0.14);
    border-color: rgba(220, 74, 74, 0.4);
    color: #ffb4a8;
}

.guilds-manage-roster-action--remove:hover,
.guilds-manage-roster-action--remove:focus-visible {
    background: rgba(220, 74, 74, 0.28);
    border-color: rgba(220, 74, 74, 0.7);
    color: #ffd4cc;
    outline: none;
}

.guilds-manage-roster-action--ghost {
    background: transparent;
    border-color: rgba(255, 235, 230, 0.2);
    color: rgba(255, 235, 230, 0.7);
}

.guilds-manage-roster-action--ghost:hover,
.guilds-manage-roster-action--ghost:focus-visible {
    background: rgba(255, 235, 230, 0.06);
    border-color: rgba(255, 235, 230, 0.35);
    color: #fff5f0;
    outline: none;
}

.guilds-manage-roster-action--danger {
    background: linear-gradient(135deg, #b71c1c 0%, #7f1010 100%);
    border-color: rgba(255, 180, 168, 0.45);
    color: #fff5f0;
    box-shadow: 0 4px 14px rgba(220, 74, 74, 0.35);
}

.guilds-manage-roster-action--danger:hover,
.guilds-manage-roster-action--danger:focus-visible {
    background: linear-gradient(135deg, #c92626 0%, #8e1414 100%);
    transform: translateY(-1px);
    outline: none;
}

.guilds-manage-roster-action[disabled],
.guilds-manage-roster-action.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.guilds-manage-roster-action.is-loading {
    position: relative;
}

.guilds-manage-roster-action.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 245, 240, 0.55);
    border-top-color: transparent;
    animation: guilds-manage-roster-spin 0.7s linear infinite;
}

@keyframes guilds-manage-roster-spin {
    to { transform: rotate(360deg); }
}

/* Locked tag for the owner + self rows — communicates that they can't
   be removed without the action button needing to be present. */
.guilds-manage-roster-locked {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(20, 10, 12, 0.6);
    border: 1px dashed rgba(255, 235, 230, 0.2);
    color: rgba(255, 235, 230, 0.55);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.guilds-manage-roster-locked i {
    font-size: 0.7rem;
}

/* Empty result state — shown when the search filter hides every row. */
.guilds-manage-roster-empty {
    margin: 0.5rem 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: rgba(255, 235, 230, 0.55);
    font-size: 0.86rem;
    text-align: center;
    border: 1px dashed rgba(220, 74, 74, 0.3);
    border-radius: 10px;
}

.guilds-manage-roster-empty i {
    color: rgba(255, 235, 230, 0.35);
}

@media (max-width: 560px) {
    .guilds-manage-roster-row {
        flex-wrap: wrap;
    }
    .guilds-manage-roster-id {
        flex: 1 1 100%;
    }
    .guilds-manage-roster-actions,
    .guilds-manage-roster-locked {
        margin-left: auto;
    }
}

/* ===========================================================
   #members channel — pinned pill + join-request cards.

   The members channel is a control-panel surface, not a chat
   stream. The rail pill picks up an ember-gradient accent to
   read as "moderator-only", the pending count renders as a
   numeric pill (vs. the unread dot used by chat channels),
   and the right pane swaps the composer / load-older chrome
   for a stack of join-request cards or an informational
   banner (depending on the viewer's role).
   =========================================================== */

/* Channel pill — pinned at the top via ``position: -1`` in
   the DB. We style it with a soft amber halo so it reads as
   a moderator surface without breaking the ember palette. */
.guilds-chat-channel--members {
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.10),
        rgba(220, 74, 74, 0.10)
    );
    border-color: rgba(245, 158, 11, 0.28);
    color: rgba(255, 244, 220, 0.95);
}

.guilds-chat-channel--members i {
    color: var(--gld-ember-soft, #fbbf24);
}

.guilds-chat-channel--members:hover,
.guilds-chat-channel--members:focus-visible {
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.20),
        rgba(220, 74, 74, 0.16)
    );
    border-color: rgba(245, 158, 11, 0.45);
    color: #fff5e0;
}

.guilds-chat-channel--members.is-active {
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.34),
        rgba(220, 74, 74, 0.28)
    );
    border-color: rgba(245, 158, 11, 0.62);
    color: #fff8e6;
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.18),
        0 6px 14px rgba(220, 74, 74, 0.18);
}

/* Numeric pending pill — replaces the unread dot specifically
   for the members channel so admins can see the queue depth
   at a glance without opening the panel. */
.guilds-chat-channel-pending {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gld-ember-soft, #fbbf24);
    color: #1a0c10;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    box-shadow:
        0 0 8px rgba(251, 191, 36, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    letter-spacing: 0.02em;
}

/* When the members channel is active, hide the composer + the
   "View older messages" pager — neither applies. We key off
   the chat root's ``data-current-channel-kind`` so the JS
   only has to flip one attribute when channels swap. */
.guilds-chat[data-current-channel-kind="members"] .guilds-chat-composer,
.guilds-chat[data-current-channel-kind="members"] .guilds-chat-load-older-wrap,
.guilds-chat[data-current-channel-kind="members"] .guilds-chat-empty,
.guilds-chat[data-current-channel-kind="members"] .guilds-chat-jump {
    display: none !important;
}

/* Surface header swaps the # hashtag prefix for a people icon
   when scoped to the members channel, matching the rail. */
.guilds-chat[data-current-channel-kind="members"] .guilds-chat-head i.fa-hashtag::before {
    content: "\f500"; /* fa-user-group */
}

/* ---------- Join-request card (admin view) ---------- */

.guilds-chat-request {
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 14px 16px;
    margin: 10px 12px;
    background:
        linear-gradient(
            155deg,
            rgba(28, 14, 18, 0.92),
            rgba(20, 10, 12, 0.92)
        );
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 220, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.36);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.guilds-chat-request.is-resolved {
    opacity: 0;
    transform: translateX(28px);
    pointer-events: none;
}

.guilds-chat-request-avatar-link {
    text-decoration: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: flex-start;
}

.guilds-chat-request-avatar {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
    background: rgba(40, 18, 22, 0.7);
}

.guilds-chat-request-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gld-ember-soft, #fbbf24);
    background: rgba(40, 18, 22, 0.7);
}

.guilds-chat-request-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*
 * Recruit card head was redesigned per UX feedback to drop the
 * always-truncated display name and stack two compact rows instead:
 *   1. badges row  — Trader / Oracle / domain chips + rep pill
 *   2. meta row    — ``@handle`` flush-left, relative time flush-right
 *
 * ``-head`` is kept around as a defensive alias (same flex behavior as
 * ``-meta-row``) in case server-rendered fallbacks still emit it; the
 * JS renderer no longer uses it.
 */
.guilds-chat-request-badges-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}

.guilds-chat-request-meta-row,
.guilds-chat-request-head {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
}

.guilds-chat-request-name {
    color: #fff5e0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.2;
    /* The head row is a wrapping flex container with mixed-width
       siblings (handle pill, rep pill, time, trader chip). To get
       proper ellipsizing on a long single-word display name we need
       to (a) opt into shrinking (``flex: 1 1 0``), (b) allow the item
       to be smaller than its intrinsic content (``min-width: 0``), and
       (c) keep the standard overflow/ellipsis trio. Without these the
       name carries the row past the card edge — see the screenshot
       that motivated this change. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guilds-chat-request-name:hover {
    color: var(--gld-ember-soft, #fbbf24);
}

.guilds-chat-request-handle {
    /* @handle now doubles as the profile link (display name was
       dropped from the card). Keep it on the meta row at the same
       weight as the time pill so the two read as a single byline. */
    color: rgba(255, 235, 230, 0.78);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.guilds-chat-request-handle:hover,
.guilds-chat-request-handle:focus-visible {
    color: var(--gld-ember-soft, #fbbf24);
}

.guilds-chat-request-rep,
.guilds-chat-request-trader,
.guilds-chat-request-time {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(40, 18, 22, 0.6);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: rgba(255, 244, 220, 0.85);
    line-height: 1.4;
}

.guilds-chat-request-rep i {
    color: var(--gld-ember-soft, #fbbf24);
    font-size: 0.7rem;
}

.guilds-chat-request-trader {
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.20),
        rgba(56, 189, 248, 0.16)
    );
    border-color: rgba(168, 85, 247, 0.42);
    color: #f3e8ff;
}

.guilds-chat-request-trader i {
    color: #c4b5fd;
}

.guilds-chat-request-time {
    margin-left: auto;
    color: rgba(255, 235, 230, 0.5);
    background: transparent;
    border-color: transparent;
    padding: 0;
}

.guilds-chat-request-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 6, 8, 0.55);
    border: 1px solid rgba(245, 158, 11, 0.14);
    color: rgba(255, 244, 220, 0.92);
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.guilds-chat-request-message i {
    color: rgba(245, 158, 11, 0.55);
    font-size: 0.78rem;
    margin-top: 3px;
    flex: 0 0 auto;
}

.guilds-chat-request-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.guilds-chat-request-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.12s ease;
    border: 1px solid transparent;
    line-height: 1;
}

.guilds-chat-request-btn[disabled] {
    cursor: progress;
    opacity: 0.55;
    pointer-events: none;
}

.guilds-chat-request-btn--accept {
    background: linear-gradient(135deg, #14532d, #166534);
    color: #d1fae5;
    border-color: rgba(74, 222, 128, 0.42);
    box-shadow: 0 6px 12px rgba(22, 101, 52, 0.32);
}

.guilds-chat-request-btn--accept:hover,
.guilds-chat-request-btn--accept:focus-visible {
    background: linear-gradient(135deg, #166534, #15803d);
    border-color: rgba(74, 222, 128, 0.7);
    transform: translateY(-1px);
    color: #ecfdf5;
}

.guilds-chat-request-btn--decline {
    background: rgba(40, 18, 22, 0.85);
    color: rgba(255, 220, 220, 0.85);
    border-color: rgba(220, 74, 74, 0.32);
}

.guilds-chat-request-btn--decline:hover,
.guilds-chat-request-btn--decline:focus-visible {
    background: rgba(127, 29, 29, 0.55);
    border-color: rgba(248, 113, 113, 0.55);
    color: #fecaca;
    transform: translateY(-1px);
}

/* ---------- Members channel — informational banner / empty state ---------- */

.guilds-chat-members-banner,
.guilds-chat-members-empty {
    list-style: none;
    margin: 18px 16px;
    padding: 22px 18px;
    border-radius: 14px;
    background: rgba(20, 10, 12, 0.82);
    border: 1px dashed rgba(245, 158, 11, 0.32);
    color: rgba(255, 244, 220, 0.9);
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.guilds-chat-members-empty {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.guilds-chat-members-banner-icon,
.guilds-chat-members-empty-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.18),
        rgba(220, 74, 74, 0.18)
    );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gld-ember-soft, #fbbf24);
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.guilds-chat-members-banner-title,
.guilds-chat-members-empty-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: #fff5e0;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 4px;
}

.guilds-chat-members-banner-sub,
.guilds-chat-members-empty-sub {
    color: rgba(255, 235, 230, 0.72);
    font-size: 0.88rem;
    line-height: 1.45;
}

.guilds-chat-members-banner-sub strong {
    color: var(--gld-ember-soft, #fbbf24);
    font-weight: 700;
}

/* ---------- Guild Chat tab — unread badge ----------
   The badge floats over the top-right corner of the pill via absolute
   positioning so it never participates in the tab's flex layout. The
   old inline-flex + margin-left treatment was stealing horizontal
   room from the label and could push "Guild Chat" onto a second line
   on narrow viewports; this overlay keeps the label intact at every
   width and reads as a notification bubble pinned to the tab. */

.guilds-tab--badged {
    position: relative;
    /* Keep the badge from getting clipped by sibling tabs' overflow
       — none of the tab ancestors set overflow:hidden today, but
       this isolates the stacking context so a future change can't
       accidentally crop the bubble. */
    isolation: isolate;
}

.guilds-tab-badge {
    position: absolute;
    top: -6px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--gld-ember-soft, #fbbf24);
    color: #1a0c10;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 999px;
    box-shadow:
        0 0 8px rgba(251, 191, 36, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    letter-spacing: 0.02em;
    line-height: 1;
    /* The badge is decorative — events should pass through to the
       underlying tab button so clicks aren't swallowed near the
       corner. */
    pointer-events: none;
    z-index: 2;
}

/* ---------- Mobile tweaks for the join-request card ---------- */

@media (max-width: 720px) {
    .guilds-chat-request {
        grid-template-columns: auto 1fr;
        gap: 10px;
        padding: 12px;
        margin: 8px 10px;
    }
    .guilds-chat-request-avatar {
        width: 40px;
        height: 40px;
    }
    .guilds-chat-request-time {
        margin-left: 0;
    }
    .guilds-chat-request-actions {
        justify-content: stretch;
    }
    .guilds-chat-request-btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 9px 10px;
    }
    .guilds-chat-channel-pending {
        min-width: 18px;
        height: 18px;
        font-size: 0.66rem;
    }
}

/* ===========================================================
   Channel edit modal — Delete affordance.

   The danger zone collapses two destructive UX layers into one:
     - Stage 1 (idle): a single "Delete channel" button living
       below the name / topic inputs, with a short explanatory
       caption so admins know the action is destructive.
     - Stage 2 (confirm): replaces the button with an inline
       confirm prompt naming the channel + Yes/No buttons.
   The server enforces the same safeguards (cannot delete
   #members / cannot delete the last chat channel) so a tampered
   DOM cannot bypass them.
   =========================================================== */

.guilds-chat-danger-zone {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(220, 74, 74, 0.32);
    background:
        linear-gradient(
            135deg,
            rgba(127, 29, 29, 0.18),
            rgba(40, 12, 14, 0.6)
        );
    box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.04);
}

.guilds-chat-danger-zone-idle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.guilds-chat-danger-zone-meta {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.guilds-chat-danger-zone-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fecaca;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.guilds-chat-danger-zone-label i {
    color: #f87171;
    font-size: 0.78rem;
}

.guilds-chat-danger-zone-sub {
    color: rgba(255, 220, 220, 0.72);
    font-size: 0.78rem;
    line-height: 1.4;
}

.guilds-chat-danger-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(40, 18, 22, 0.85);
    color: rgba(255, 220, 220, 0.92);
    border: 1px solid rgba(220, 74, 74, 0.45);
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        transform 0.12s ease,
        color 0.16s ease;
}

.guilds-chat-danger-btn:hover,
.guilds-chat-danger-btn:focus-visible {
    background: rgba(127, 29, 29, 0.55);
    border-color: rgba(248, 113, 113, 0.62);
    color: #fecaca;
    transform: translateY(-1px);
}

.guilds-chat-danger-zone-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guilds-chat-danger-zone-question {
    margin: 0;
    color: #fff5f0;
    font-size: 0.92rem;
    line-height: 1.45;
}

.guilds-chat-danger-zone-target {
    color: #fecaca;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

.guilds-chat-danger-zone-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.guilds-chat-danger-zone-btn {
    padding: 7px 12px;
    font-size: 0.82rem;
}

/* Destructive variant of the shared confirm action — used by the
   final "Yes, delete" button. Sits next to the existing
   ``--primary`` (ember/red) and ``--ghost`` (neutral) variants so
   the modal footer / inline confirm panels can mix them freely. */
.guilds-confirm-action--danger {
    border-color: rgba(248, 113, 113, 0.62);
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
    color: #fff5f0;
    box-shadow:
        0 6px 14px rgba(127, 29, 29, 0.36),
        inset 0 1px 0 rgba(255, 220, 220, 0.16);
}

.guilds-confirm-action--danger i {
    color: #fecaca;
}

.guilds-confirm-action--danger:hover,
.guilds-confirm-action--danger:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(252, 165, 165, 0.85);
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    box-shadow:
        0 10px 18px rgba(127, 29, 29, 0.42),
        0 0 14px rgba(248, 113, 113, 0.22);
}

.guilds-confirm-action--danger:active {
    transform: translateY(0);
}

.guilds-confirm-action--danger:disabled,
.guilds-confirm-action--danger[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 720px) {
    .guilds-chat-danger-zone-idle {
        flex-direction: column;
        align-items: stretch;
    }
    .guilds-chat-danger-btn {
        width: 100%;
        justify-content: center;
    }
    .guilds-chat-danger-zone-actions {
        justify-content: stretch;
    }
    .guilds-chat-danger-zone-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* =========================================================================
   Per-message 3-dot menu (Edit / Report / Remove / Ban + delete)

   Same surface shape as the Atrium menu (.atrium-chat-msg-menu) but
   styled in the guild's molten brass / ember palette so the action
   pills stay at home in the Guild Hall chrome.
   ========================================================================= */

.guilds-chat-msg {
    position: relative;
}

.guilds-chat-msg-edited {
    margin-left: 4px;
    font-size: 0.7rem;
    color: rgba(252, 211, 77, 0.55);
    font-style: italic;
}

.guilds-chat-msg-menu {
    position: absolute;
    right: 8px;
    bottom: 6px;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.guilds-chat-msg:hover .guilds-chat-msg-menu,
.guilds-chat-msg-menu.is-open,
.guilds-chat-msg-menu:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.guilds-chat-msg-menu-trigger {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(252, 211, 77, 0.2);
    background: rgba(18, 9, 4, 0.78);
    color: rgba(254, 240, 195, 0.85);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.guilds-chat-msg-menu-trigger:hover,
.guilds-chat-msg-menu.is-open .guilds-chat-msg-menu-trigger {
    background: rgba(252, 211, 77, 0.18);
    color: #fde68a;
    border-color: rgba(252, 211, 77, 0.45);
}

.guilds-chat-msg-menu-dropdown {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 200px;
    background: rgba(18, 9, 4, 0.96);
    border: 1px solid rgba(252, 211, 77, 0.18);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    display: none;
    flex-direction: column;
    gap: 2px;
    backdrop-filter: blur(8px);
}

.guilds-chat-msg-menu.is-open .guilds-chat-msg-menu-dropdown {
    display: flex;
}

.guilds-chat-msg-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: rgba(254, 240, 195, 0.92);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.guilds-chat-msg-menu-item i {
    width: 16px;
    text-align: center;
    color: rgba(252, 211, 77, 0.7);
    font-size: 0.85rem;
}

.guilds-chat-msg-menu-item:hover {
    background: rgba(252, 211, 77, 0.12);
    color: #fde68a;
}

.guilds-chat-msg-menu-item--danger {
    color: #fda4af;
}

.guilds-chat-msg-menu-item--danger i {
    color: rgba(248, 113, 113, 0.85);
}

.guilds-chat-msg-menu-item--danger:hover {
    background: rgba(248, 113, 113, 0.14);
    color: #fecaca;
}

.guilds-chat-msg-menu-item--ultimate {
    color: #fff;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(190, 18, 60, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.4);
    margin-top: 4px;
}

.guilds-chat-msg-menu-item--ultimate i {
    color: #fecaca;
}

.guilds-chat-msg-menu-item--ultimate:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.46), rgba(190, 18, 60, 0.46));
    color: #fff;
}

.guilds-chat-msg--fading {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.32s ease, transform 0.32s ease, max-height 0.32s ease, padding 0.32s ease, margin 0.32s ease;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.guilds-chat-alert-modal-msg {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.guilds-chat-msg-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.guilds-chat-msg-edit-input {
    width: 100%;
    resize: vertical;
    min-height: 56px;
    max-height: 200px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(252, 211, 77, 0.32);
    background: rgba(18, 9, 4, 0.62);
    color: #fef3c7;
    font: inherit;
}

.guilds-chat-msg-edit-input:focus {
    outline: none;
    border-color: #fde68a;
    box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.22);
}

.guilds-chat-msg-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.guilds-chat-msg-edit-cancel,
.guilds-chat-msg-edit-save {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(252, 211, 77, 0.3);
    background: rgba(18, 9, 4, 0.6);
    color: rgba(254, 240, 195, 0.92);
}

.guilds-chat-msg-edit-save {
    background: linear-gradient(135deg, #facc15, #b45309);
    color: #18120a;
    border-color: transparent;
}

.guilds-chat-msg-edit-save:hover {
    filter: brightness(1.08);
}

@media (hover: none) and (pointer: coarse) {
    .guilds-chat-msg-menu {
        opacity: 1;
        pointer-events: auto;
    }
}


/* ===========================================================
   Leader badge — non-founder current owner.

   Sibling to .guilds-roster-role-badge--owner (gold/ember crown
   for the original founder) and .guilds-roster-role-badge--admin
   (purple shield). Leaders inherit every owner-grade privilege
   but did not charter the guild, so they get their own visual
   slot: a teal/steel chess-knight chip.
   =========================================================== */
.guilds-roster-role-badge--leader {
    background: linear-gradient(135deg, #38bdf8 0%, #0e7490 100%);
    color: #07242b;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.45);
    border-color: transparent;
}

/* ===========================================================
   Pass-the-Banner modal — owner's "Leave Guild" successor picker.

   Built on the same .guilds-confirm-modal-card shell as Leave
   Guild + Manage Roster; the body is a radio list mirroring
   the manage-roster row layout but with a left-aligned radio
   button so the chosen successor reads as a deliberate pick
   rather than a "swipe to kick" affordance.
   =========================================================== */
.guilds-transfer-leader-card {
    /* Taller than the plain leave modal — the radio list needs
       breathing room without forcing the user to scroll the
       whole modal. The 70vh cap matches Manage Roster. */
    max-height: 80vh;
}

.guilds-transfer-leader-modal .guilds-confirm-modal-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.guilds-transfer-leader-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 38vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 235, 230, 0.08);
    border-radius: 10px;
    background: rgba(20, 10, 12, 0.45);
}

.guilds-transfer-leader-row {
    border-bottom: 1px solid rgba(255, 235, 230, 0.05);
}

.guilds-transfer-leader-row:last-child {
    border-bottom: 0;
}

.guilds-transfer-leader-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    transition: background 0.16s ease;
}

.guilds-transfer-leader-option:hover {
    background: rgba(56, 189, 248, 0.08);
}

.guilds-transfer-leader-radio {
    /* Native radio kept for accessibility (Tab/Space) but styled
       as a teal disc so it reads as part of the picker rather
       than a default form control. */
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.55);
    background: transparent;
    cursor: pointer;
    position: relative;
    margin: 0;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.guilds-transfer-leader-radio:hover {
    border-color: rgba(56, 189, 248, 0.85);
}

.guilds-transfer-leader-radio:checked {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.18);
}

.guilds-transfer-leader-radio:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #38bdf8 0%, #0e7490 100%);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.55);
}

.guilds-transfer-leader-radio:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.85);
    outline-offset: 2px;
}

.guilds-transfer-leader-id {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.guilds-transfer-leader-row[hidden] {
    display: none;
}

/* Highlight the row whose radio is checked so the visual focus
   stays on the chosen successor even after the user clicks
   elsewhere in the list. */
.guilds-transfer-leader-row:has(.guilds-transfer-leader-radio:checked) {
    background: linear-gradient(
        90deg,
        rgba(56, 189, 248, 0.16) 0%,
        rgba(56, 189, 248, 0.04) 100%
    );
}

@media (max-width: 560px) {
    .guilds-transfer-leader-option {
        padding: 0.6rem 0.7rem;
    }
    .guilds-transfer-leader-list {
        max-height: 50vh;
    }
}

/* ===========================================================
   Lower Banner modal — sole-owner disband confirmation.

   Reuses the .guilds-confirm-modal--alert chrome; the only new
   surface is the "danger" warning chip flavour that swaps the
   amber tint for a red gradient so the user reads the
   permanence of the action at a glance.
   =========================================================== */
.guilds-confirm-warning--danger {
    background: linear-gradient(
        90deg,
        rgba(220, 74, 74, 0.16) 0%,
        rgba(220, 74, 74, 0.04) 100%
    );
    border-color: rgba(220, 74, 74, 0.42);
    color: #ffd4cc;
}

.guilds-confirm-warning--danger i {
    color: #ffb4a8;
}

/* ===========================================================
   Manage Roster — self "Leave" affordance.

   Shown on the viewer's own row in place of the disabled Lock
   chip. Forwards through to the same flow as the top-level
   Leave Guild button (plain confirm / transfer-leader /
   lower-banner depending on the viewer's owner state).
   =========================================================== */
.guilds-manage-roster-action--leave {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.42);
    color: #cdeefb;
}

.guilds-manage-roster-action--leave:hover,
.guilds-manage-roster-action--leave:focus-visible {
    background: rgba(56, 189, 248, 0.22);
    border-color: rgba(56, 189, 248, 0.7);
    color: #e5f5ff;
    outline: none;
}

/* Founder vs Leader row accent — pure decoration, the labels
   are already conveyed via the role-badge chip on the name. */
.guilds-roster-row--leader {
    border-left: 2px solid rgba(56, 189, 248, 0.55);
}

.guilds-roster-row--founder {
    /* Override the generic owner-row accent in case both apply. */
    border-left: 2px solid rgba(245, 158, 11, 0.6);
}