/**
 * Community Discussions — Skool-mirror styling.
 *
 * Lives alongside community-games.css. Tab UI uses .cg-tab-* (shared
 * with the Games panel). Discussion-specific styles use .cd-* prefix.
 *
 * Design target: match Skool's spacing + sizing on the
 * standardjiujitsu community feed (40-44px avatars, ~880px max-width,
 * 20-24px card padding, 17px titles, footer with avatar stack +
 * engagement counts). All icons inline SVG, no emoji.
 */

/* ──────────────────────────────────────────────────────────────────
   Token bridge (2026-05-17 fix). The Phase 3a Skool-composer styles in
   this file were authored against a foreign light-theme token
   vocabulary — `--surface` / `--border` / `--text-muted` — that
   GrappleU's design system does NOT define. So every
   `var(--surface, #fff)` / `var(--border, #e2e8f0)` /
   `var(--text-muted, #64748b)` fell back to its LIGHT literal default,
   rendering the composer bar + composer modal as a white box with a
   grey border on the dark theme (the "weird white thing" on
   coach-classroom.html). Alias the three missing tokens onto the real
   GrappleU dark tokens so every use across the bar AND the modal
   resolves correctly. (`--accent` / `--text-primary` already exist
   project-wide — their dead literal fallbacks are harmless.)
   ────────────────────────────────────────────────────────────────── */
:root {
    --surface: var(--bg-elevated);
    --border: var(--border-medium);
    --text-muted: var(--text-tertiary);
}

/* ── Tab nav (shared shell) ──────────────────────────────────────── */

.cg-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 24px;
    padding: 0;
    border-bottom: 1px solid var(--gu-border, #2a2c30);
}

.cg-tab {
    background: transparent;
    border: none;
    color: var(--gu-text-secondary, #a8a8b0);
    cursor: pointer;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
    text-decoration: none;
    display: inline-block;
}

.cg-tab:hover { color: var(--gu-text-primary, #f0f0f5); }

.cg-tab:focus-visible {
    outline: 2px solid var(--gu-accent, #4f8cff);
    outline-offset: 2px;
    border-radius: 4px;
}

.cg-tab--active {
    color: var(--gu-text-primary, #f0f0f5);
    border-bottom-color: var(--gu-accent, #4f8cff);
}

[data-panel] { display: none; }
[data-panel][data-active="true"] { display: block; }

/* ── Category pill nav ────────────────────────────────────────────── */

/* Discussion redesign Phase 1 (2026-05-20 / phase-3g refactor):
   Category chips demoted from pill-style to a text-only tab strip
   (Twitter / Reddit category-tab pattern). The old pill treatment
   visually duplicated the segmented control above; subordinating the
   chips with text+underline-on-active reads as a clear secondary
   refinement filter beneath the primary view toggle. */
.cd-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    margin: 0 16px 16px;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.cd-pill {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    padding: 6px 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 120ms, border-color 120ms;
    line-height: 1.2;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;  /* sit the underline ON the container border */
    flex-shrink: 0;
}

.cd-pill:hover {
    color: var(--text-primary, #f1f5f9);
}

.cd-pill--active {
    color: var(--text-primary, #f1f5f9);
    border-bottom-color: var(--accent, #1d4ed8);
}

[data-theme="light"] .cd-pill--active {
    color: var(--text-primary, #0f172a);
    border-bottom-color: var(--accent, #1d4ed8);
}

.cd-pill:focus-visible {
    outline: 2px solid var(--accent, #4f8cff);
    outline-offset: 4px;
}

/* ── Unread badges ────────────────────────────────────────────────── */
/* New-posts count on a pill (raised like a notification superscript) +
   the "New replies" tag on a feed card. Deep red (#b91c1c) NOT bright red:
   white-on-#b91c1c = 5.9:1 (passes WCAG AA); white-on-#ef4444 = 3.4:1 (fails). */
.cd-pill__badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    vertical-align: top;
    position: relative;
    top: -5px;
    box-sizing: border-box;
}

.cd-card__new-replies {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Feed wrapper ─────────────────────────────────────────────────── */

#cdFeedRoot {
    max-width: 880px;
    margin: 0 auto;
}

/* ── Feed cards ───────────────────────────────────────────────────── */

.cd-card {
    display: block;
    padding: 20px 24px;
    background: var(--gu-card-bg, #1a1c1f);
    border: 1px solid var(--gu-border, #2a2c30);
    border-radius: 10px;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease;
    cursor: pointer;
}

/* Skool-style video thumbnail on the right of a feed card (2026-06-02). Only a
   card WITH a video (preview_video_url) becomes a flex row — cards without one
   keep the display:block layout above, so there's no regression. */
.cd-card--has-media {
    display: flex;
    gap: 16px;
    align-items: center;
}
.cd-card--has-media .cd-card__main {
    flex: 1 1 auto;
    min-width: 0;   /* let the text column shrink/truncate, not shove the thumb off */
}
.cd-card__media {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.cd-card__media-vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;   /* clicks fall through to the card's <a> → opens thread */
}
.cd-card__media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
}
.cd-card__media-play svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
@media (max-width: 600px) {
    .cd-card__media { width: 96px; }
}

/* Uploaded post images in a thread (Skool photos re-hosted to Firebase).
   aspect-ratio is set inline from stored dims so the frame reserves space
   before the image loads (no layout pop). */
.cd-thread__images {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cd-thread__img-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gu-skel, #2a2c30);
    max-width: 520px;
}
.cd-thread__img {
    display: block;
    width: 100%;
    height: auto;
}

.cd-card:hover {
    border-color: var(--gu-text-secondary, #a8a8b0);
}

.cd-card:focus-visible {
    outline: 2px solid var(--gu-accent, #4f8cff);
    outline-offset: 2px;
}

/* Author row: avatar + (name + timeline + category) */

.cd-card__author-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cd-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #5a6068;
}

.cd-card__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.cd-card__author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cd-card__author-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gu-text-primary, #f0f0f5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-card__author-sub {
    font-size: 12px;
    color: var(--gu-text-secondary, #a8a8b0);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cd-card__author-sub-dot {
    font-size: 10px;
    opacity: 0.5;
}

/* Per-card coach/room badge in the cross-coach "All" feed (Slice 3b). */
.cd-card__coach-badge {
    font-weight: 700;
    color: var(--accent, #2563eb);
}

.cd-card__pin-icon {
    color: var(--gu-accent, #4f8cff);
    flex-shrink: 0;
}

/* Title row */

.cd-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--gu-text-primary, #f0f0f5);
    margin: 0 0 8px;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cd-card__title-text {
    flex: 1;
    min-width: 0;
}

.cd-card__video-icon {
    color: var(--gu-text-secondary, #a8a8b0);
    flex-shrink: 0;
    margin-top: 2px;
}

.cd-card__excerpt {
    font-size: 14px;
    color: var(--gu-text-secondary, #a8a8b0);
    margin: 0 0 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer: like count, reply count, stacked commenter avatars, last-reply time */

.cd-card__footer {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--gu-text-secondary, #a8a8b0);
}

.cd-card__metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cd-card__metric-icon {
    flex-shrink: 0;
}

/* Interactive like control on a feed card (role=button). Likeable straight
   from the feed — no need to open the thread. Liked state flips to the accent
   color (matches .cd-reply-like--liked / .cd-like-btn--liked). */
.cd-card__like {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: color 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.cd-card__like:hover { color: var(--text-primary, #fff); }
.cd-card__like--liked { color: var(--accent, #2563eb); }
.cd-card__like--liked .cd-card__metric-icon { fill: var(--accent, #2563eb); }
.cd-card__like:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}
.cd-card__like-count { font-variant-numeric: tabular-nums; }

.cd-card__commenters {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.cd-card__commenter-stack {
    display: inline-flex;
    margin-right: 8px;
}

.cd-card__commenter-stack-item {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--gu-card-bg, #1a1c1f);
    margin-left: -8px;
    /* Hardcoded fallback so the placeholder letter is visible in both
       light and dark themes (CSS-var fallbacks resolve differently per
       theme and white-on-light made these invisible). */
    background-color: #5a6068;
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    overflow: hidden;
}

[data-theme="light"] .cd-card__commenter-stack-item {
    border-color: #ffffff;
}

.cd-card__commenter-stack-item:first-child { margin-left: 0; }

.cd-card__last-reply {
    font-size: 12px;
}

.cd-card__archived-pill {
    background: var(--gu-pill-bg, #2a2c30);
    color: var(--gu-text-secondary, #a8a8b0);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Skeleton */

.cd-card--skeleton .cd-card__skel-author,
.cd-card--skeleton .cd-card__skel-title,
.cd-card--skeleton .cd-card__skel-excerpt,
.cd-card--skeleton .cd-card__skel-footer {
    background: var(--gu-skel, #2a2c30);
    border-radius: 4px;
    animation: cd-skel 1.5s ease-in-out infinite;
}
.cd-card--skeleton .cd-card__skel-author { height: 40px; width: 60%; margin-bottom: 14px; }
.cd-card--skeleton .cd-card__skel-title { height: 20px; width: 80%; margin-bottom: 10px; }
.cd-card--skeleton .cd-card__skel-excerpt { height: 36px; width: 100%; margin-bottom: 14px; }
.cd-card--skeleton .cd-card__skel-footer { height: 16px; width: 40%; }

@keyframes cd-skel {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* Empty state */

.cd-empty {
    max-width: 880px;
    margin: 0 auto;
    padding: 60px 30px;
    text-align: center;
    border: 1px dashed var(--gu-border, #2a2c30);
    border-radius: 10px;
    color: var(--gu-text-secondary, #a8a8b0);
}

.cd-empty__title {
    font-size: 20px;
    margin: 0 0 12px;
    color: var(--gu-text-primary, #f0f0f5);
}

.cd-empty__body {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Error state */

.cd-error {
    max-width: 880px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid var(--gu-error-border, #4a2222);
    background: rgba(255, 0, 0, 0.04);
    border-radius: 10px;
    color: var(--gu-text-primary, #f0f0f5);
}

.cd-error__title { margin: 0 0 8px; font-size: 16px; }

.cd-error__retry,
.cd-loadmore {
    background: var(--gu-accent, #4f8cff);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: opacity 120ms ease;
}

.cd-error__retry:hover, .cd-loadmore:hover { opacity: 0.9; }

.cd-loadmore {
    display: block;
    margin: 16px auto;
    padding: 12px 24px;
}

/* ── Thread modal ─────────────────────────────────────────────────── */

.cd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    z-index: 9000;
    overflow-y: auto;
}

.cd-modal-overlay[data-open="true"] {
    display: flex;
}

.cd-modal {
    background: var(--gu-card-bg, #1a1c1f);
    border: 1px solid var(--gu-border, #2a2c30);
    border-radius: 12px;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    position: relative;
    margin: 0 auto;
}

.cd-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--gu-skel, #2a2c30);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--gu-text-primary, #f0f0f5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background 120ms ease;
}

.cd-modal__close:hover {
    background: var(--gu-border, #2a2c30);
    opacity: 0.9;
}

/* ── "Jump to reply box" FAB ──────────────────────────────────────── */
/* Floating pill on the overlay, shown only while the reply composer is
   scrolled out of view (Discord/WhatsApp "jump to latest" convention).
   position:fixed = viewport-relative, immune to overlay scroll; hidden
   automatically when the overlay is display:none (modal closed). */
.cd-jump-to-reply {
    position: fixed;
    bottom: 28px;
    left: 50%;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: var(--accent, #2563eb);
    color: var(--text-on-accent, #ffffff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    /* hidden default — visibility toggled by the IntersectionObserver */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.cd-jump-to-reply--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Darken on hover (NOT --accent-hover — that token is a lighter blue and
   fails WCAG contrast against white text). */
.cd-jump-to-reply:hover { filter: brightness(0.92); }

.cd-jump-to-reply:focus-visible {
    outline: 2px solid var(--text-on-accent, #ffffff);
    outline-offset: 2px;
}

.cd-jump-to-reply svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    .cd-jump-to-reply {
        transition: opacity 0.001ms linear;
        transform: translateX(-50%);
    }
    .cd-jump-to-reply--visible { transform: translateX(-50%); }
}

.cd-thread {
    padding: 40px 32px 24px;
    border-bottom: 1px solid var(--gu-border, #2a2c30);
}

.cd-thread__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cd-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #5a6068;
}

.cd-author-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
}

.cd-author-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cd-author-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--gu-text-primary, #f0f0f5);
}

.cd-author-sub {
    font-size: 12px;
    color: var(--gu-text-secondary, #a8a8b0);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cd-author__source {
    background: rgba(79, 140, 255, 0.12);
    color: var(--gu-accent, #4f8cff);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.cd-thread__pin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cd-thread__pin {
    background: rgba(79, 140, 255, 0.12);
    color: var(--gu-accent, #4f8cff);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cd-thread__archived {
    background: var(--gu-pill-bg, #2a2c30);
    color: var(--gu-text-secondary, #a8a8b0);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cd-thread__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gu-text-primary, #f0f0f5);
    margin: 0 0 16px;
    line-height: 1.3;
    padding-right: 40px;
}

.cd-thread__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gu-text-primary, #f0f0f5);
}

.cd-thread__body p,
.cd-reply__body p { margin: 0 0 12px; }
.cd-thread__body p:last-child,
.cd-reply__body p:last-child { margin-bottom: 0; }

.cd-thread__body a,
.cd-reply__body a {
    color: var(--gu-accent, #4f8cff);
    text-decoration: underline;
}

/* @mention links (composer autocomplete → coach-card.html?uid=…) — bold,
   no underline by default so a run of prose text reads as a name chip
   rather than a generic hyperlink; underline on hover/focus for the usual
   link affordance. */
.cd-thread__body a.cd-mention,
.cd-reply__body a.cd-mention {
    font-weight: 600;
    text-decoration: none;
}
.cd-thread__body a.cd-mention:hover,
.cd-thread__body a.cd-mention:focus-visible,
.cd-reply__body a.cd-mention:hover,
.cd-reply__body a.cd-mention:focus-visible {
    text-decoration: underline;
}

.cd-thread__body code,
.cd-reply__body code {
    background: var(--gu-skel, #2a2c30);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.cd-thread__body pre,
.cd-reply__body pre {
    background: var(--gu-skel, #2a2c30);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 13px;
}

.cd-thread__body blockquote,
.cd-reply__body blockquote {
    border-left: 3px solid var(--gu-border, #2a2c30);
    padding-left: 12px;
    margin: 8px 0;
    color: var(--gu-text-secondary, #a8a8b0);
}

.cd-thread__skool-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    color: var(--gu-text-secondary, #a8a8b0);
    font-size: 13px;
    text-decoration: none;
}

.cd-thread__skool-link:hover {
    color: var(--gu-accent, #4f8cff);
}

/* Like button (XP economy unit 7b) — thread detail action row */
.cd-thread__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.cd-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--gu-border, #2a2c30);
    border-radius: 999px;
    color: var(--gu-text-secondary, #a8a8b0);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cd-like-btn:hover {
    color: var(--gu-accent, #4f8cff);
    border-color: var(--gu-accent, #4f8cff);
}

.cd-like-btn--liked {
    color: var(--gu-accent, #4f8cff);
    border-color: var(--gu-accent, #4f8cff);
    background: var(--gu-accent-soft, rgba(79, 140, 255, 0.12));
}

.cd-like-btn--liked .cd-like-btn__icon {
    fill: var(--gu-accent, #4f8cff);  /* filled heart when liked */
}

.cd-like-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* "Open this video in classroom" deep-link — rendered on video-comment
   posts only. Visually a sibling of the skool-link with a slightly
   stronger affordance (accent color + bold) since it's the most useful
   contextual action on a video comment. Click → /coach-classroom-week.
   html?section=<slug>&lesson=<game_id>. */
.cd-thread__classroom-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--accent, #3b82f6);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid var(--accent, #3b82f6);
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.cd-thread__classroom-link:hover {
    background: var(--accent, #3b82f6);
    color: var(--text-on-accent, #fff);
}

.cd-thread__classroom-link svg {
    width: 14px;
    height: 14px;
}

/* Replies in modal */

.cd-replies {
    padding: 20px 32px 28px;
}

.cd-replies__heading {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gu-text-secondary, #a8a8b0);
    margin: 0 0 16px;
    font-weight: 600;
}

.cd-reply {
    padding: 14px 0;
}

/* Hairline divider between TOP-LEVEL comments only — the clear "a new
   comment starts here" cue (Reddit pattern: whitespace + divider, no card).
   Nested replies are grouped by the threadline rail instead, not a divider. */
.cd-replies > .cd-reply {
    border-top: 1px solid var(--gu-border, #2a2c30);
}
.cd-replies > .cd-reply:first-child {
    border-top: none;
    padding-top: 0;
}

/* Replies nest inside .cd-reply__children. Indent ONE visible level with a
   2px THREADLINE rail (the load-bearing "which parent" cue). Deeper nesting
   does NOT add more indent — it FLATTENS to the single level (YouTube's
   2-level cap) so the thread never marches off a narrow phone screen. */
.cd-reply__children {
    margin-left: 6px;
    padding-left: 14px;
    border-left: 2px solid var(--gu-border, #2a2c30);
}
/* Flatten past level 1: grandchild replies sit flush inside the same rail,
   no compounding indent / second rail (keeps ~360px readable). */
.cd-reply__children .cd-reply__children {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
.cd-reply__children .cd-reply {
    padding: 12px 0;
}
.cd-reply__children .cd-reply:first-child {
    padding-top: 4px;
}

.cd-reply__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.cd-reply__author .cd-author-avatar {
    width: 32px;
    height: 32px;
}

.cd-reply__author .cd-author-avatar--placeholder { font-size: 14px; }

.cd-reply__body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--gu-text-primary, #f0f0f5);
    margin-left: 42px;
}

/* "(edited)" marker on an edited reply — quiet, mirrors the post. */
.cd-reply__edited {
    font-size: 12px;
    color: var(--gu-text-tertiary, #8a8a99);
    font-style: italic;
}

/* Inline reply editor (Edit your own comment). */
.cd-reply__edit {
    margin-left: 42px;
    margin-top: 4px;
}
.cd-reply__edit-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    color: var(--gu-text-primary, #f0f0f5);
    background: var(--gu-surface-2, #1a1a22);
    border: 1px solid var(--gu-border, #33333f);
    border-radius: 8px;
}
.cd-reply__edit-input:focus {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 1px;
}
.cd-reply__edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.cd-reply__edit-save {
    color: var(--text-on-accent, #fff) !important;
    background: var(--accent, #2563eb) !important;
    border-color: var(--accent, #2563eb) !important;
}

/* Skool-style "View N replies" / "Hide replies" expander. Nested replies are
   collapsed by default (see autoCollapse), so this is the primary affordance to
   reveal a comment's thread — render it as a clear accent link, not a chip. */
.cd-reply__collapse {
    margin-left: 42px;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    background: transparent;
    border: 0;
    color: var(--accent, #3d63d8);
    padding: 4px 4px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.cd-reply__collapse:hover {
    text-decoration: underline;
}
.cd-reply__collapse:focus-visible {
    outline: 2px solid var(--accent, #3d63d8);
    outline-offset: 2px;
}

.cd-reply--placeholder {
    opacity: 0.5;
    font-style: italic;
}

/* ── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .cd-card { padding: 16px; }
    .cd-pills { padding: 0 4px; }
    .cd-modal {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .cd-modal-overlay { padding: 0; }
    .cd-thread { padding: 32px 20px 20px; }
    .cd-thread__title { font-size: 20px; }
    .cd-replies { padding: 16px 16px 20px; }

    /* Tighter threadline gutter on a phone (one indent level, kept shallow). */
    .cd-reply__children {
        margin-left: 2px;
        padding-left: 10px;
    }
    /* Body + actions go full-width under the avatar — no 42px reserve needed
       at ~360px (the byline already marks the comment start). */
    .cd-reply__body,
    .cd-reply__collapse,
    .cd-reply__actions { margin-left: 0; }
}

/* ── Lock body scroll when modal open ─────────────────────────────── */

body.cd-modal-open {
    overflow: hidden;
}

/* The shared confirm dialog (window.showConfirmModal, .confirm-overlay is
   z-index:3000) must sit ABOVE the open thread modal (#cdModalOverlay is
   z-index:9000) — otherwise "Delete your post?" renders BEHIND the popup and
   is unreachable (the coach has to close the thread to even see it). Scoped to
   cd-modal-open so the lift only applies while a discussion thread is open. */
body.cd-modal-open .confirm-overlay {
    z-index: 9500;
}

/* Same fix for the post-EDIT composer: clicking "Edit" inside an open thread
   opens .cd-composer-overlay (base z-index:2000) WHILE the thread modal
   (z-index:9000) stays open — so without this lift the editor renders BEHIND
   the thread and is invisible. Stack (thread open): thread 9000 < edit
   composer 9200 < stacked game-form/library 9300 < confirm dialog 9500. The
   --stacked rule must come AFTER the base (equal specificity → source order
   wins) so the game-form/library sub-overlay sits above the editor. */
body.cd-modal-open .cd-composer-overlay {
    z-index: 9200;
}
body.cd-modal-open .cd-composer-overlay--stacked {
    z-index: 9300;
}

/* ── Composer (Session 6 — Greg launch community activation) ─────────
   New-post composer = full overlay modal. Reply composer = inline form
   at the bottom of the thread. Shares input/button typography but the
   two layouts diverge — composer has a title + category picker;
   reply composer is body-only. */

.cd-feed-toolbar {
    padding: 12px 16px 4px;
}

/* Phase 3a: Skool-style full-width composer trigger bar (replaces the
   small "+ New post" pill). Looks like an input; click opens the
   new-post modal. Only rendered for write-access (Pool A/B) users. */
.cd-composer-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    cursor: text;
    text-align: left;
    /* Breathing room between the "write something" bar and the first
       feed post (2026-05-22). */
    margin-bottom: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cd-composer-bar:hover {
    border-color: var(--accent, #1d4ed8);
    box-shadow: 0 1px 6px rgba(29, 78, 216, 0.08);
}
.cd-composer-bar:focus-visible {
    outline: 2px solid var(--accent, #1d4ed8);
    outline-offset: 2px;
}
.cd-composer-bar__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent, #1d4ed8);
    opacity: 0.15;
}
.cd-composer-bar__placeholder {
    flex: 1 1 auto;
    color: var(--text-muted, #64748b);
    font-size: 15px;
}

/* Skeleton composer — same box as .cd-composer-bar (so it reserves the exact
   height from first paint, no CLS) but inert: no cursor/hover, shimmering
   placeholders. Swapped for the real bar (or collapsed) once writeState()
   resolves. */
.cd-composer-bar--skeleton {
    cursor: default;
}
.cd-composer-bar--skeleton .cd-composer-bar__avatar {
    animation: cd-skel 1.5s ease-in-out infinite;
}
.cd-composer-bar__skel-text {
    flex: 1 1 auto;
    height: 15px;
    max-width: 180px;
    border-radius: 4px;
    background: var(--gu-skel, #2a2c30);
    animation: cd-skel 1.5s ease-in-out infinite;
}

/* ── Locked composer / reply upsell (read-only Pool C coaches) ──────
   A read-only coach reads the community but can't post. Instead of a
   silent display:none, show a LOCKED bar that opens the join upsell.
   It LOOKS locked (lock glyph, accent-tinted border) but IS a real,
   focusable CTA — never the HTML `disabled` attribute (that would drop
   it from the tab order). Muted look via explicit tokens, NOT opacity
   on text (the documented WCAG-contrast footgun). */
.cd-composer-bar--locked {
    cursor: pointer;
    border-style: solid;
    border-color: var(--accent, #2563eb);
    background: var(--bg-card, #1a1d22);
}
.cd-composer-bar--locked:hover {
    border-color: var(--accent, #2563eb);
    background: var(--bg-elevated, #20242b);
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.12);
}
.cd-composer-bar--locked .cd-composer-bar__placeholder {
    /* Full-contrast text — this is a live CTA, read it clearly. */
    color: var(--text-primary, #fff);
    font-weight: 600;
}
.cd-composer-bar__lock {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--accent, #2563eb);
}

/* Locked reply affordance inside the thread modal — same intent as the
   feed locked bar, scoped to a thread. */
.cd-reply-composer--locked {
    padding: 12px 0 4px;
}
.cd-locked-reply {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    background: var(--bg-card, #1a1d22);
    border: 1px solid var(--accent, #2563eb);
    border-radius: 10px;
    color: var(--text-primary, #fff);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cd-locked-reply:hover {
    background: var(--bg-elevated, #20242b);
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.12);
}
.cd-locked-reply:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}
.cd-locked-reply__lock { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--accent, #2563eb); }

/* ── "Join the conversation" upsell modal ──────────────────────────
   Thin value step opened from a locked bar/reply. Transient overlay
   (created on open, removed on close). */
.cd-upsell-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 2100;
}
.cd-upsell {
    position: relative;
    background: var(--bg-card, #1a1d22);
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 28px 24px 22px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cd-upsell__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}
.cd-upsell__close:hover { color: var(--text-primary, #fff); }
.cd-upsell__close:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.cd-upsell__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    padding-right: 28px;
}
.cd-upsell__benefits {
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
    font-size: 15px;
    line-height: 1.4;
}
.cd-upsell__cta {
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    background: var(--accent, #2563eb);
    color: var(--text-on-accent, #fff);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.cd-upsell__cta:hover { filter: brightness(1.06); }
.cd-upsell__cta:focus-visible { outline: 2px solid var(--text-on-accent, #fff); outline-offset: -4px; }
.cd-upsell__later {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
}
.cd-upsell__later:hover { color: var(--text-primary, #fff); }
.cd-upsell__later:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; border-radius: 6px; }

/* Two-tier choice: Train ($37 drip) vs Inner Circle ($200 all-access). */
.cd-upsell__sub {
    margin: -6px 0 0;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 14px;
    line-height: 1.4;
}
.cd-upsell__tiers { display: flex; gap: 12px; }
.cd-upsell__tier {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 14px;
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    background: var(--bg-elevated, rgba(255, 255, 255, 0.02));
}
.cd-upsell__tier--feature { border-color: var(--accent, #2563eb); position: relative; }
.cd-upsell__tier-badge {
    position: absolute;
    top: -10px;
    left: 14px;
    background: var(--accent, #2563eb);
    color: var(--text-on-accent, #fff);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
}
.cd-upsell__tier-name { font-size: 15px; font-weight: 700; color: var(--text-primary, #fff); }
.cd-upsell__tier-price { font-size: 1.6rem; font-weight: 800; color: var(--text-primary, #fff); line-height: 1; }
.cd-upsell__tier-price span { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary, rgba(255, 255, 255, 0.6)); }
.cd-upsell__tier-desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    flex: 1 1 auto;
}
.cd-upsell__tier .cd-upsell__cta { margin-top: 4px; }
/* Train (non-feature) CTA = secondary outline so the highlighted tier leads.
   Uses --accent-text (#60a5fa) for accent-COLORED text on the dark card — NOT
   --accent (#2563eb, the button-fill hex), which fails contrast as text. */
.cd-upsell__tier:not(.cd-upsell__tier--feature) .cd-upsell__cta {
    background: transparent;
    color: var(--accent-text, #60a5fa);
    border: 1px solid var(--accent, #2563eb);
}
.cd-upsell__tier:not(.cd-upsell__tier--feature) .cd-upsell__cta:hover {
    background: rgba(37, 99, 235, 0.12);
    filter: none;
}
@media (max-width: 440px) {
    .cd-upsell__tiers { flex-direction: column; }
}

/* New-post composer modal overlay */
.cd-composer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 2000;
}
.cd-composer-overlay[hidden] { display: none !important; }

.cd-composer {
    background: var(--bg-card, #1a1d22);
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 20px 22px 18px;
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.cd-composer__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0;
}

.cd-composer__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cd-composer__label {
    font-size: 0.8125rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    font-weight: 500;
}

.cd-composer__input,
.cd-composer__textarea,
.cd-composer__select {
    background: var(--gray-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text-primary, #fff);
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    width: 100%;
}
.cd-composer__textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}
.cd-composer__input:focus,
.cd-composer__textarea:focus,
.cd-composer__select:focus {
    border-color: var(--accent, #1d4ed8);
}

.cd-composer__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.cd-composer__cancel,
.cd-composer__submit {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    font-family: inherit;
}
.cd-composer__cancel {
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
}
.cd-composer__submit {
    background: var(--accent, #1d4ed8);
    color: #fff;
}
.cd-composer__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Reply composer — inline at the bottom of the thread's .cd-replies */
.cd-reply-composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* Inline variant — when the composer is relocated directly beneath the comment
   being replied to (so the coach keeps that comment in view). A left accent
   rail + indent + subtle tint reads as "you're replying to the comment above." */
.cd-reply-composer--inline {
    margin: 10px 0 14px;
    padding: 12px 12px 12px 14px;
    border-top: 0;
    border-left: 3px solid var(--accent, #1d4ed8);
    border-radius: 0 10px 10px 0;
    background: var(--gray-1, rgba(255, 255, 255, 0.04));
}

.cd-reply-composer__textarea {
    background: var(--gray-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text-primary, #fff);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 72px;
    outline: none;
}
.cd-reply-composer__textarea:focus {
    border-color: var(--accent, #1d4ed8);
}

.cd-reply-composer__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cd-reply-composer__hint {
    font-size: 0.8125rem;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
}
.cd-reply-composer__hint strong {
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
}
.cd-reply-composer__clear-parent {
    background: transparent;
    border: 0;
    color: var(--accent, #1d4ed8);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 0;
    margin-left: 6px;
    text-decoration: underline;
    font-family: inherit;
}

.cd-reply-composer__submit {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--accent, #1d4ed8);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.cd-reply-composer__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Per-reply action row — like + reply, borderless text actions (Reddit/
   YouTube pattern). Aligned with the reply body (42px clears the avatar). */
.cd-reply__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 42px;
    margin-top: 4px;
}

/* Per-reply LIKE (comment-like) — heart + count; fill flips on --liked. */
.cd-reply-like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 4px 2px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
}
.cd-reply-like:hover { color: var(--text-secondary, rgba(255, 255, 255, 0.75)); }
.cd-reply-like__icon { width: 14px; height: 14px; flex: 0 0 auto; }
.cd-reply-like--liked { color: var(--accent, #2563eb); }
.cd-reply-like--liked .cd-reply-like__icon {
    fill: var(--accent, #2563eb);
    stroke: var(--accent, #2563eb);
}
.cd-reply-like__count { font-variant-numeric: tabular-nums; }

/* Per-reply [Reply] button — borderless text action matching the like. */
.cd-reply__action-reply {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 2px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.cd-reply__action-reply:hover {
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
}

/* ── Phase 3b: Skool-style composer + thread video ─────────────────── */
/* Theme-token based (matches the app), Skool *structure*. */

.cd-composer__header {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Anchor the absolute .cd-composer__close to the header (not the full-
       viewport overlay) — without this the × on a non-skool composer (the
       game choice / new-game / library overlays) floats to the screen edge. */
    position: relative;
}
/* The game overlays reuse the base (non-skool) header, which has no padding
   of its own — add the same padding the skool header gets so the title + ×
   aren't flush to the card edge. */
.cd-gamechoice .cd-composer__header,
.cd-gameform .cd-composer__header,
.cd-gamelibrary .cd-composer__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.cd-composer__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent, #1d4ed8);
    opacity: 0.18;
    flex: 0 0 auto;
}
.cd-composer__posting-in {
    font-weight: 700;
    font-size: 15px;
    color: var(--text, rgba(255, 255, 255, 0.92));
}
.cd-composer__title-input {
    border: 0;
    background: transparent;
    color: var(--text, rgba(255, 255, 255, 0.92));
    font-size: 22px;
    font-weight: 700;
    padding: 2px 0;
    outline: none;
    width: 100%;
}
.cd-composer__title-input::placeholder { color: var(--text-muted, #64748b); }
.cd-composer__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
}
.cd-composer__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cd-composer__tool:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: var(--accent, #1d4ed8);
}
.cd-composer__spacer { flex: 1 1 auto; }
.cd-composer__attached {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
    font-size: 14px;
    color: var(--text, rgba(255, 255, 255, 0.92));
}
.cd-composer__attached[hidden] { display: none; }
.cd-composer__chip-label { flex: 1 1 auto; }
.cd-composer__chip-remove {
    border: 0;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.cd-composer__chip-remove:hover { color: var(--accent, #1d4ed8); }

/* ── Composer redesign — structured header / body / footer (2026-05-23) ──
   The new-post modal: sectioned card (close button, bordered fields, an
   "Add a video" pill + styled Category dropdown, and a dedicated footer)
   replacing the cramped single-toolbar layout. */
.cd-composer--skool {
    padding: 0;
    gap: 0;
    overflow: hidden;
    max-width: 600px;
}
.cd-composer--skool .cd-composer__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    position: relative;
}
.cd-composer--skool .cd-composer__avatar {
    width: 38px;
    height: 38px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    background: linear-gradient(135deg, var(--accent, #3b82f6), #2563eb);
}
.cd-composer--skool .cd-composer__posting-in { font-size: 17px; }
.cd-composer__close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cd-composer__close:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: var(--text-primary, #fff);
}
.cd-composer__body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cd-composer--skool .cd-composer__title-input {
    font-size: 19px;
    padding: 11px 13px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    background: var(--bg-base, rgba(255, 255, 255, 0.02));
}
.cd-composer--skool .cd-composer__title-input:focus { border-color: var(--accent, #3b82f6); }
.cd-composer--skool .cd-composer__textarea {
    min-height: 140px;
    border-radius: 10px;
    padding: 12px 13px;
    font-size: 15px;
    background: var(--bg-base, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.cd-composer--skool .cd-composer__toolbar {
    border-top: 0;
    padding-top: 0;
    gap: 10px;
}
.cd-composer--skool .cd-composer__tool {
    width: auto;
    height: 38px;
    padding: 0 14px;
    gap: 8px;
    border-radius: 9px;
    background: var(--bg-hover, rgba(255, 255, 255, 0.05));
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}
.cd-composer--skool .cd-composer__tool:hover { color: var(--accent, #3b82f6); }
.cd-composer__cat-select {
    height: 38px;
    padding: 0 34px 0 13px;
    border-radius: 9px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    background-color: var(--bg-base, rgba(255, 255, 255, 0.02));
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    outline: none;
}
.cd-composer__cat-select:focus { border-color: var(--accent, #3b82f6); }
.cd-composer__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    background: var(--bg-card, #1a1d22);
}
.cd-composer__footer .cd-composer__cancel { padding: 9px 18px; border-radius: 9px; }
.cd-composer__footer .cd-composer__submit { padding: 9px 22px; border-radius: 9px; }

/* Attached video in a thread — responsive 16:9 Bunny iframe */
.cd-thread__videos { margin: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.cd-thread__videos[hidden] { display: none; }
.cd-thread__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.cd-thread__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.cd-thread__video--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--bg-card, #15161a);
    color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
    font-size: 14px;
}

/* Animated "processing" placeholder for a Bunny video still uploading /
   transcoding — a diagonal shimmer sweep + a pulsing film icon + an
   indeterminate bar, so it reads as working, not stuck. */
.cd-thread__video--processing {
    position: relative;
    overflow: hidden;
}
.cd-thread__video--processing::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: cdVidShimmer 1.8s linear infinite;
}
@keyframes cdVidShimmer { to { transform: translateX(100%); } }

.cd-vid-proc {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 16px;
}
.cd-vid-proc__icon {
    color: var(--accent, #2563eb);
    animation: cdVidPulse 1s ease-in-out infinite alternate;
}
@keyframes cdVidPulse {
    from { transform: scale(0.94); opacity: 0.7; }
    to   { transform: scale(1.08); opacity: 1; }
}
.cd-vid-proc__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #f0f0f5);
}
.cd-vid-proc__sub {
    font-size: 12px;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
    max-width: 280px;
    line-height: 1.4;
}
.cd-vid-proc__bar {
    width: 132px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 2px;
}
.cd-vid-proc__bar span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: 2px;
    background: var(--accent, #2563eb);
    animation: cdVidBar 1.2s ease-in-out infinite;
}
@keyframes cdVidBar {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(240%); }
}
@media (prefers-reduced-motion: reduce) {
    .cd-thread__video--processing::before,
    .cd-vid-proc__icon,
    .cd-vid-proc__bar span { animation: none; }
}
/* Firebase fast-lane native <video> (2026-05-23) — discussion clips are
   mixed aspect ratios incl. vertical phone clips, so don't force the
   Bunny 16/9 crop; contain at natural ratio up to a sensible max height. */
.cd-thread__video:has(video) { aspect-ratio: auto; background: #000; }
.cd-thread__video video {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background: #000;
}
.cd-reply__video {
    margin: 8px 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.cd-reply__video video {
    display: block;
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
    background: #000;
}

/* ── Phase 3c: moderation actions + guidelines ────────────────────── */
.cd-mod-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.cd-mod-btn,
.cd-reason-btn {
    border: 0;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.cd-mod-btn:hover,
.cd-reason-btn:hover {
    color: var(--accent, #1d4ed8);
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}
/* Destructive "Delete your own content" action — theme-aware danger token
   (both light/dark variants clear WCAG 4.5:1). */
.cd-delete-btn { color: var(--accent-danger, #ef4444); }
.cd-delete-btn:hover {
    color: var(--accent-danger-hover, #dc2626);
    background: var(--accent-danger-light, rgba(239, 68, 68, 0.12));
}
.cd-reason-pop {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.cd-reason-pop[hidden] { display: none; }
.cd-reason-btn { text-transform: capitalize; }
/* Mod-only controls hidden until the modal root gets .cd-mod-on */
.cd-mod-only { display: none; }
.cd-mod-on .cd-mod-only { display: inline-flex; }
/* Optimistic visual when a moderator removes an item */
.cd-mod-removed {
    opacity: 0.4;
    pointer-events: none;
}
.cd-mod-removed::after {
    content: " (removed)";
    color: var(--text-muted, #64748b);
    font-size: 12px;
}
.cd-guidelines {
    margin: 14px 16px 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    font-size: 12px;
    color: var(--text-muted, #64748b);
    line-height: 1.6;
}
.cd-guidelines a { color: var(--accent, #1d4ed8); text-decoration: none; }
.cd-guidelines a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────
   Discussion redesign — Phase 1 (2026-05-20)
   Category chip row reuses .cd-pills, and "Greg's Drops"
   horizontal-scroll lane. The Drops lane stays hidden until index.js
   gets a non-empty response from GET /api/coach/community/drops.
   (The All|Challenges segmented control + its .cd-segmented styles
   were removed 2026-06-02 — the feed shows ALL posts.)
   ───────────────────────────────────────────────────────────────── */

/* Drops lane — horizontal-scroll hero, Patreon's hard-separation
   principle (creator content gets its own surface). */
.cd-drops-lane {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 16px 14px;
    margin-bottom: 8px;
    scroll-snap-type: x mandatory;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.cd-drops-lane[hidden] { display: none; }
.cd-drops-lane::before {
    content: 'Greg\'s Drops';
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #94a3b8);
    align-self: center;
    padding-right: 8px;
    flex-shrink: 0;
}
.cd-drop-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    background: var(--bg-card, #1e293b);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.cd-drop-card:hover {
    border-color: var(--accent, #1d4ed8);
    transform: translateY(-1px);
}
/* Media header — a video post shows its first frame as a poster; everything
   else shows a branded gradient with Greg's avatar (every drop reads as his). */
.cd-drop-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #1d4ed8 0%, #0b1220 100%);
}
.cd-drop-card__vid {
    width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}
.cd-drop-card__fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.cd-drop-card__fallback img {
    width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.cd-drop-card__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(0, 0, 0, 0.22); pointer-events: none;
}
.cd-drop-card__play svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.cd-drop-card__kind {
    position: absolute; top: 8px; left: 8px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #fff; background: rgba(0, 0, 0, 0.6); padding: 3px 7px; border-radius: 999px;
}
.cd-drop-card__kind--challenge { background: var(--accent-success, #10b981); }
.cd-drop-card__countdown {
    position: absolute; bottom: 8px; right: 8px;
    font-size: 10px; font-weight: 700; color: #fff;
    background: rgba(0, 0, 0, 0.6); padding: 2px 7px; border-radius: 999px;
}
.cd-drop-card__body {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px;
}
.cd-drop-card__avatar {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.cd-drop-card__title {
    font-size: 13px; font-weight: 600; line-height: 1.25;
    color: var(--text-primary, #f1f5f9);
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Skeleton reserves the new taller footprint (media + body) so the feed below
   doesn't shift when the real drops swap in. */
.cd-drop-card--skeleton {
    cursor: default;
    pointer-events: none;
    min-height: 168px;
    background: linear-gradient(90deg,
        var(--bg-card, #1e293b) 0%,
        var(--bg-elevated, rgba(255,255,255,0.05)) 50%,
        var(--bg-card, #1e293b) 100%);
    background-size: 400px 100%;
    animation: cd-drop-shimmer 1.4s ease-in-out infinite;
}
@keyframes cd-drop-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position:  200px 0; }
}

/* `.ccw-discuss-btn` + `.ccw-discuss-composer` MOVED to coach-classroom.css
   on 2026-05-21. Reason: this CSS file is lazy-loaded only on
   coach-classroom.html (via _DISC_CSS in coach-classroom-discussion.js),
   but the Discuss button mounts on coach-classroom-week.html too — where
   community-discussions.css NEVER loads, so the button rendered
   completely unstyled (icon stacked above the label, no border, no
   button shape). The button styles now live in coach-classroom.css,
   which is statically loaded on BOTH host pages. Composer styles moved
   along with the button — they're a tightly-coupled pair. */

/* ── Attach a game (pivot Slice 3, 2026-06-02) ──────────────────────────
   The "Add a game" toolbar pill reuses .cd-composer__tool; the attached
   chip reuses .cd-composer__attached. The new-game form opens in its OWN
   composer-overlay that STACKS above the post composer (--stacked lifts
   it past the post composer's z-index:2000). The form uses label-wrapped
   fields (label text above the input). */
.cd-composer-overlay--stacked { z-index: 2100; }

.cd-gameform__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cd-gameform__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}
.cd-gameform__field input,
.cd-gameform__field select,
.cd-gameform__field textarea {
    background: var(--gray-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text-primary, #fff);
    font-size: 0.9375rem;
    font-family: inherit;
    font-weight: 400;
    outline: none;
    width: 100%;
}
.cd-gameform__field input:focus,
.cd-gameform__field select:focus,
.cd-gameform__field textarea:focus {
    border-color: var(--accent, #1d4ed8);
}
.cd-gameform__field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

/* ── Searchable system picker (E2, 2026-06-03) ──────────────────────────
   Type to filter BJJ_SYSTEMS; click to select → shows a chip + Change. */
.cd-syspick { position: relative; }
.cd-syspick__input {
    background: var(--gray-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 0.9375rem;
    outline: none;
    width: 100%;
}
.cd-syspick__input:focus { border-color: var(--accent, #2563eb); }
.cd-syspick__input[hidden] { display: none; }
.cd-syspick__selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--accent-soft, rgba(37, 99, 235, 0.10));
    border: 1px solid var(--accent-border, rgba(37, 99, 235, 0.26));
}
.cd-syspick__selected[hidden] { display: none; }
.cd-syspick__selected-label { flex: 1 1 auto; font-size: 0.9375rem; color: var(--text-primary, #fff); }
.cd-syspick__change {
    border: 0; background: transparent; cursor: pointer;
    color: var(--accent, #2563eb); font: inherit; font-size: 0.8125rem; font-weight: 600;
}
.cd-syspick__list {
    position: absolute;
    z-index: 5;
    left: 0; right: 0; top: calc(100% + 4px);
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-card, #1a1d22);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    padding: 4px;
}
.cd-syspick__list[hidden] { display: none; }
.cd-syspick__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--text-primary, #fff);
    font: inherit; font-size: 0.9375rem;
    cursor: pointer;
}
.cd-syspick__item:hover { background: var(--accent-soft, rgba(37, 99, 235, 0.14)); }

/* ── Clickable attached-game chip (E5) ──────────────────────────────────
   The chip label is a button — click it to view/edit the attached game. */
.cd-composer__chip-label--btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    text-align: left;
    border: 0; background: transparent;
    color: inherit; font: inherit; font-size: 14px;
    cursor: pointer;
    padding: 0;
}
.cd-composer__chip-label--btn:hover { text-decoration: underline; }
.cd-chip__icon { flex-shrink: 0; }

/* ── Library picker filter pills (E4) ───────────────────────────────────*/
/* Library filter DROPDOWNS — copied verbatim from coach-planner-library.css
   (.lib-filter-*) so the picker filters look + behave exactly like the
   class-planner library. Multi-select checkbox menus. */
.lib-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.lib-filter-dd { position: relative; }
.lib-filter-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 600;
    transition: border-color 0.15s;
}
.lib-filter-dd-btn:hover {
    border-color: var(--border-medium, rgba(255, 255, 255, 0.24));
    color: var(--text-primary, #fff);
}
.lib-filter-dd-btn.has-active { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.lib-filter-dd-count {
    font-size: 0.625rem;
    font-weight: 700;
    background: var(--accent, #2563eb);
    color: #fff;
    border-radius: 99px;
    padding: 1px 5px;
    line-height: 1.3;
}
.lib-filter-dd-chev { font-size: 0.6rem; opacity: 0.5; }
.lib-filter-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-elevated, #1e1f21);
    border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.18));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
    padding: 4px 0;
}
.lib-filter-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    cursor: pointer;
    transition: background 0.1s;
}
.lib-filter-dd-item:hover { background: var(--bg-hover, rgba(255, 255, 255, 0.06)); }
.lib-filter-dd-item input[type="checkbox"] {
    accent-color: var(--accent, #2563eb);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Attached-game render (pivot Slice 4, 2026-06-02) ───────────────────
   Feed card shows a small "🎯 <name>" pill under the title; the thread
   shows a bordered game card under the body. A plain post that carries a
   source_video_game_id, OR a game_share post. */
.cd-card__game-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft, rgba(37, 99, 235, 0.12));
    border: 1px solid var(--accent-border, rgba(37, 99, 235, 0.28));
    color: var(--text-primary, #fff);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    max-width: 100%;
}
.cd-card__game-pill-icon { font-size: 0.875rem; }

.cd-thread__game-card {
    display: flex;
    flex-direction: column;
    margin: 14px 0 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--accent-soft, rgba(37, 99, 235, 0.10));
    border: 1px solid var(--accent-border, rgba(37, 99, 235, 0.26));
}
.cd-thread__game-icon { font-size: 1.25rem; line-height: 1; }
.cd-thread__game-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-thread__game-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.cd-thread__game-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Add-a-game: choice + library picker (pivot Slice 5, 2026-06-02) ─────
   Both open in a stacked composer-overlay above the post composer. */
.cd-gamechoice__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}
.cd-gamechoice__option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    background: var(--gray-1, rgba(255, 255, 255, 0.04));
    color: var(--text-primary, #fff);
    cursor: pointer;
    font-family: inherit;
}
.cd-gamechoice__option:hover,
.cd-gamechoice__option:focus-visible {
    border-color: var(--accent, #2563eb);
    background: var(--accent-soft, rgba(37, 99, 235, 0.10));
    outline: none;
}
.cd-gamechoice__option-icon { font-size: 1.5rem; line-height: 1; }
.cd-gamechoice__option-text { display: flex; flex-direction: column; gap: 2px; }
.cd-gamechoice__option-title { font-size: 0.9375rem; font-weight: 600; }
.cd-gamechoice__option-sub {
    font-size: 0.8125rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.cd-gamelibrary__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    min-height: 0;
}
.cd-gamelibrary__search {
    background: var(--gray-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text-primary, #fff);
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    width: 100%;
}
.cd-gamelibrary__search:focus { border-color: var(--accent, #2563eb); }
.cd-gamelibrary__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
.cd-gamelibrary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    background: transparent;
    color: var(--text-primary, #fff);
    cursor: pointer;
    font-family: inherit;
}
.cd-gamelibrary__row:hover,
.cd-gamelibrary__row:focus-visible {
    border-color: var(--accent, #2563eb);
    background: var(--accent-soft, rgba(37, 99, 235, 0.10));
    outline: none;
}
.cd-gamelibrary__row-name { font-size: 0.9375rem; font-weight: 600; }
.cd-gamelibrary__row-sys {
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    flex-shrink: 0;
}
.cd-gamelibrary__empty {
    padding: 18px 8px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

/* ── Inline attached-game details (G2, 2026-06-03) ──────────────────────
   Feed card: name + system + compact win-conditions. Thread: full rows. */
.cd-card__game {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--accent-soft, rgba(37, 99, 235, 0.10));
    border: 1px solid var(--accent-border, rgba(37, 99, 235, 0.24));
}
.cd-card__game-head { display: flex; align-items: center; gap: 7px; }
.cd-card__game-icon { flex-shrink: 0; color: var(--accent, #2563eb); }
.cd-card__game-name {
    font-weight: 700; font-size: 0.875rem; color: var(--text-primary, #fff);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-card__game-sys {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
/* Two-column rows: a fixed-width label column so every value aligns on the
   same left edge, and wrapped value text indents under the value (not the
   label). Replaces the old inline `<span>label</span> value` that left a
   ragged column + back-to-the-label wrapping. */
.cd-card__game-lines { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.cd-card__game-line {
    display: flex;
    gap: 9px;
    font-size: 0.8125rem;
    line-height: 1.45;
}
.cd-card__game-line__lbl {
    flex: 0 0 58px;
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
    padding-top: 2px;
}
.cd-card__game-line__val {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}
.cd-card__game-import {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 5px 11px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-text, #60a5fa);
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid var(--accent-border, rgba(37, 99, 235, 0.30));
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.cd-card__game-import:hover { background: rgba(37, 99, 235, 0.22); }
.cd-card__game-import:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}
.cd-card__game-import[aria-disabled="true"] { opacity: 0.7; cursor: default; }
.cd-card__game-import--done {
    color: var(--accent-success, #10b981);
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.30);
}

.cd-thread__game-head { display: flex; align-items: center; gap: 10px; }
.cd-thread__game-sys {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    flex-shrink: 0;
}
.cd-thread__game-rows {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* The author's web-link video carousel injected into the game card. */
.cd-thread__game-video { margin-top: 12px; }
.cd-thread__game-video:empty { display: none; }
.cd-thread__game-row { display: flex; gap: 10px; font-size: 0.875rem; }
.cd-thread__game-rowlabel {
    flex: 0 0 110px;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
    font-weight: 600;
}
.cd-thread__game-rowval { color: var(--text-primary, #fff); }
.cd-thread__game-wctype {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 6px;
    vertical-align: middle;
}
.cd-thread__game-wctype.continuous {
    background: rgba(var(--accent-rgb, 37, 99, 235), 0.16);
    color: var(--accent, #2563eb);
}
.cd-thread__game-wctype.terminal {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}
.cd-thread__game-notes {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    font-size: 0.875rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
    white-space: pre-wrap;
    line-height: 1.5;
}

/* ── Import-a-game button (G4, 2026-06-03) ──────────────────────────────*/
.cd-thread__game-import {
    align-self: flex-start;
    margin-top: 10px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1px solid var(--accent, #2563eb);
    background: transparent;
    color: var(--accent, #2563eb);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.cd-thread__game-import:hover:not(:disabled) {
    background: var(--accent, #2563eb);
    color: var(--text-on-accent, #fff);
}
.cd-thread__game-import:disabled { opacity: 0.7; cursor: default; }