/* ════════════════════════════════════════════════════════════════════════
   Listen Buddy beta forum styles
   Layered onto css/account.css. Uses theme tokens (--accent, --primary, etc.)
   ════════════════════════════════════════════════════════════════════════ */

.forum {
    display: flex; flex-direction: column;
    gap: 22px;
}

/* ─── NDA strip ─── */
.f-nda {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    color: var(--muted-foreground);
    border: 1px solid hsla(var(--hue), 90%, 65%, 0.20);
}
.f-nda strong { color: var(--foreground); font-weight: 600; }
.f-nda .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--glow);
    flex-shrink: 0;
}
.f-nda a {
    margin-left: auto;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

/* ─── breadcrumb ─── */
.f-crumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: var(--muted-foreground);
    padding: 0 4px;
}
.f-crumb-link {
    cursor: pointer;
    transition: color 0.15s;
    font-weight: 500;
}
.f-crumb-link:hover { color: var(--foreground); }
.f-crumb-link.is-current { color: var(--foreground); }
.f-crumb svg { width: 12px; height: 12px; opacity: 0.5; }

/* ─── home hero ─── */
.f-home-hero {
    padding: 32px 32px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 28px; align-items: center;
}
@media (max-width: 900px) {
    .f-home-hero { grid-template-columns: 1fr; }
}
.f-home-h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 14px 0 8px;
    text-transform: none;
    text-wrap: pretty;
}
.f-home-h1 .grad {
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.f-home-hero p {
    font-size: 14px;
    color: var(--muted-foreground);
    max-width: 56ch;
    margin: 0 0 22px;
}
.f-home-stats {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 28px;
}
.f-home-stats .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    color: var(--foreground);
    display: inline-flex; align-items: center; gap: 8px;
}
.f-home-stats .lbl {
    font-family: var(--font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted-foreground);
    margin-top: 2px;
}
.f-home-stats .live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--status-great);
    box-shadow: 0 0 8px var(--status-great-glow);
    animation: za-sparkle 2s ease-in-out infinite;
}
.f-home-cta {
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
.f-home-cta .btn { justify-content: center; }
.f-home-cta .btn svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
}

/* ─── category grid ─── */
.f-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
@media (max-width: 800px) {
    .f-cat-grid { grid-template-columns: 1fr; }
}

.f-cat {
    padding: 22px 22px 16px;
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s;
    display: flex; flex-direction: column;
    gap: 16px;
    min-height: 180px;
}
.f-cat:hover { transform: translateY(-2px); }
.f-cat.is-pinned {
    border-color: hsla(var(--hue), 90%, 65%, 0.40);
    background:
        linear-gradient(135deg, hsla(var(--hue), 80%, 55%, 0.10), hsla(var(--hue-2, 220), 80%, 60%, 0.06)),
        rgba(15, 18, 32, 0.55);
}
.f-cat-pin {
    font-family: var(--font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 6px;
}
.f-cat-pin svg { width: 12px; height: 12px; }

.f-cat-head {
    display: flex; gap: 14px; align-items: flex-start;
}
.f-cat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    flex-shrink: 0;
    background: hsla(var(--hue), 80%, 60%, 0.14);
    border: 1px solid hsla(var(--hue), 80%, 60%, 0.30);
    color: var(--accent);
}
.f-cat-icon svg { width: 22px; height: 22px; }
.f-cat-icon-lg { width: 56px; height: 56px; border-radius: 14px; }
.f-cat-icon-lg svg { width: 26px; height: 26px; }
.f-cat-icon-tdv  { background: hsla(265, 80%, 60%, 0.18); border-color: hsla(265, 80%, 65%, 0.40); color: hsl(275, 90%, 75%); }
.f-cat-icon-beta { background: hsla(195, 80%, 55%, 0.16); border-color: hsla(195, 80%, 60%, 0.40); color: hsl(195, 90%, 70%); }
.f-cat-icon-bug  { background: hsla(0, 75%, 55%, 0.14);   border-color: hsla(0, 75%, 60%, 0.40);   color: hsl(0, 85%, 72%); }
.f-cat-icon-feat { background: hsla(45, 90%, 55%, 0.14);  border-color: hsla(45, 90%, 60%, 0.40);  color: hsl(45, 95%, 65%); }
.f-cat-icon-modes{ background: hsla(155, 70%, 50%, 0.14); border-color: hsla(155, 70%, 55%, 0.40); color: hsl(155, 80%, 65%); }
.f-cat-icon-daw  { background: hsla(220, 80%, 60%, 0.14); border-color: hsla(220, 80%, 65%, 0.40); color: hsl(220, 90%, 75%); }
.f-cat-icon-ex   { background: hsla(285, 75%, 60%, 0.14); border-color: hsla(285, 75%, 65%, 0.40); color: hsl(285, 85%, 75%); }
.f-cat-icon-lounge { background: hsla(25, 60%, 50%, 0.14); border-color: hsla(25, 60%, 55%, 0.40); color: hsl(25, 70%, 70%); }

.f-cat-title .name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--foreground);
    letter-spacing: -0.01em;
}
.f-cat-title .desc {
    font-size: 13px;
    color: var(--muted-foreground);
    margin-top: 4px;
    line-height: 1.45;
    text-wrap: pretty;
}

.f-cat-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: space-between; gap: 14px;
    align-items: center;
}
.f-cat-stats {
    display: flex; gap: 6px;
    font-size: 11px;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
}
.f-cat-stats strong { color: var(--foreground); font-weight: 600; }
.f-cat-latest {
    display: flex; gap: 10px; align-items: center;
    min-width: 0; max-width: 60%;
}
.f-cat-latest .meta { min-width: 0; }
.f-cat-latest .title {
    font-size: 12px;
    color: var(--foreground);
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.f-cat-latest .time {
    font-size: 10px;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* ─── avatar ─── */
.f-av {
    display: inline-grid; place-items: center;
    border-radius: 50%;
    color: white;
    font-family: var(--font-display);
    font-weight: 700;
    flex-shrink: 0;
}

/* ─── staff pill ─── */
.f-staff {
    font-family: var(--font-display);
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: hsl(265, 90%, 78%);
    background: hsla(265, 80%, 55%, 0.18);
    border: 1px solid hsla(265, 80%, 65%, 0.40);
    padding: 3px 8px;
    border-radius: 999px;
}

/* ─── status pills ─── */
.f-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
}
.f-status .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.f-status-inprog { color: hsl(45, 95%, 65%); background: hsla(45, 95%, 50%, 0.12); border: 1px solid hsla(45, 95%, 50%, 0.30); }
.f-status-ack    { color: hsl(220, 90%, 75%); background: hsla(220, 90%, 60%, 0.12); border: 1px solid hsla(220, 90%, 65%, 0.30); }
.f-status-solved { color: hsl(155, 80%, 65%); background: hsla(155, 80%, 50%, 0.12); border: 1px solid hsla(155, 80%, 55%, 0.30); }

/* ─── category hero (in category view) ─── */
.f-cat-hero {
    padding: 24px 28px;
    display: flex; gap: 22px;
    align-items: center;
}
.f-cat-hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.01em;
    margin: 0;
    text-transform: none;
}
.f-cat-hero p {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 4px 0 0;
}

/* ─── test drive brief ─── */
.f-brief {
    padding: 28px 32px;
    border: 1px solid hsla(var(--hue), 90%, 65%, 0.32);
    background:
        linear-gradient(135deg, hsla(var(--hue), 80%, 55%, 0.14), hsla(var(--hue-2, 220), 80%, 60%, 0.08)),
        rgba(15, 18, 32, 0.55);
}
.f-brief-tag {
    font-family: var(--font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent);
}
.f-brief h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 10px 0 24px;
    text-transform: none;
}
.f-brief-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
}
.f-brief-steps li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    align-items: flex-start;
}
.f-step-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    color: white;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 0 14px var(--glow);
}
.f-step-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--foreground);
    margin-bottom: 4px;
}
.f-step-name em {
    color: var(--accent);
    font-style: normal;
}
.f-brief-steps p {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.55;
}
.f-brief-steps code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: rgba(0,0,0,0.30);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--accent);
}
.f-brief-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 18px;
    margin-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
}

/* ─── thread sections + cards ─── */
.f-thread-section {
    display: flex; flex-direction: column;
    gap: 12px;
}
.f-section-h {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted-foreground);
    padding: 8px 4px 4px;
}
.f-section-h svg { width: 12px; height: 12px; color: var(--accent); }

.f-thread {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 18px;
    padding: 18px 22px;
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, background 0.18s;
    align-items: center;
}
.f-thread:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.14); }
.f-thread.is-highlight {
    border-color: hsla(var(--hue), 80%, 60%, 0.40);
    background:
        linear-gradient(135deg, hsla(var(--hue), 80%, 60%, 0.10), transparent),
        rgba(15, 18, 32, 0.55);
}
.f-thread-av { display: grid; place-items: center; }
.f-thread-body { min-width: 0; }
.f-thread-title-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.f-thread-title-row h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    color: var(--foreground);
    letter-spacing: -0.005em;
    text-transform: none;
    line-height: 1.3;
}
.f-thread-excerpt {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 4px 0 8px;
    line-height: 1.5;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.f-thread-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
    color: var(--muted-foreground);
    flex-wrap: wrap;
}
.f-thread-meta .who { color: var(--foreground); font-weight: 600; }
.f-thread-meta .dot { opacity: 0.4; }

.f-thread-stats {
    display: flex; gap: 18px;
    align-items: center;
}
.f-thread-stats .stat { text-align: center; }
.f-thread-stats .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--foreground);
    line-height: 1;
}
.f-thread-stats .l {
    font-family: var(--font-display);
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted-foreground);
    margin-top: 4px;
    display: inline-flex; align-items: center; gap: 4px;
}
.f-thread-stats .l svg { width: 10px; height: 10px; }
@media (max-width: 700px) {
    .f-thread { grid-template-columns: 44px 1fr; }
    .f-thread-stats { display: none; }
}

/* ─── tag pills ─── */
.f-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}
.f-tag svg { width: 11px; height: 11px; }
.f-tag-pin { color: var(--accent); background: hsla(var(--hue), 80%, 60%, 0.14); border-color: hsla(var(--hue), 80%, 65%, 0.36); }
.f-tag-hot { color: hsl(15, 95%, 70%); background: hsla(15, 95%, 55%, 0.14); border-color: hsla(15, 95%, 60%, 0.36); }
.f-tag-cat { color: var(--muted-foreground); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }

/* ─── thread view hero ─── */
.f-thread-hero {
    padding: 26px 28px;
    display: flex; flex-direction: column;
    gap: 14px;
}
.f-thread-hero-tags {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.f-thread-hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
    text-transform: none;
    text-wrap: pretty;
}
.f-thread-hero-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px;
    color: var(--muted-foreground);
    flex-wrap: wrap;
}
.f-thread-hero-meta .who-block { display: flex; flex-direction: column; }
.f-thread-hero-meta .who-name { color: var(--foreground); font-weight: 600; font-size: 13px; }
.f-thread-hero-meta .who-role { font-size: 11px; }
.f-thread-hero-meta .sep { opacity: 0.4; }

/* ─── replies ─── */
.f-replies {
    display: flex; flex-direction: column;
    gap: 14px;
}
.f-reply {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 18px 22px;
}
.f-reply.is-op {
    border-color: hsla(var(--hue), 80%, 65%, 0.30);
}
.f-reply-side { display: flex; justify-content: center; padding-top: 2px; }
.f-reply-main { min-width: 0; }
.f-reply-head {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.f-reply-head .who-name { color: var(--foreground); font-weight: 600; font-size: 13px; }
.f-reply-head .who-role { font-size: 11px; }
.f-reply-head .sep { opacity: 0.4; }
.f-reply-head .time { font-family: var(--font-mono); font-size: 11px; }
.f-reply-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--foreground);
    margin: 0 0 12px;
    text-wrap: pretty;
}

.f-react-row {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.f-react {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-mono);
    font-weight: 600;
}
.f-react:hover {
    background: rgba(255,255,255,0.08);
    color: var(--foreground);
}
.f-react svg { width: 11px; height: 11px; }
.f-react-add {
    border-style: dashed;
    color: var(--muted-foreground);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}
.f-react-spacer { flex: 1; }

/* ─── composer ─── */
.f-composer {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 16px 18px;
    align-items: flex-start;
}
.f-composer-field { min-width: 0; }
.f-composer-input {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 12px 14px;
    min-height: 64px;
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.5;
    cursor: text;
    outline: none;
    transition: border-color 0.15s, color 0.15s;
}
.f-composer-input:focus {
    border-color: hsla(var(--hue), 80%, 65%, 0.40);
    color: var(--foreground);
}
.f-composer-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px;
    gap: 12px;
}
.f-composer-foot .hint {
    font-size: 11px;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
}

/* ─── section toggle in account header (Account / Community) ─── */
.acct-section-toggle {
    display: inline-flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.acct-section-toggle button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 7px 16px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    transition: all 0.18s;
    white-space: nowrap;
}
.acct-section-toggle button.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    box-shadow: 0 0 10px var(--glow);
}
.acct-section-toggle button:not(.active):hover { color: var(--foreground); }