/* Community controls: the social row, the comment panel, and the heart.
 *
 * Shared by index.html and new.html. index.html carries its own palette and
 * doesn't load wod-theme.css, while new.html does — and the two use different
 * variable names for the same colours (--ink vs --text, --muted vs
 * --text-muted, and so on). Rather than pick one and break the other page,
 * everything here goes through a local alias that falls back through both and
 * then to a literal. Add a colour here, not in a page.
 */
:root {
    --soc-ink:     var(--ink, var(--text, #1c1a14));
    --soc-muted:   var(--muted, var(--text-muted, #71695a));
    --soc-faint:   var(--faint, var(--text-muted, #9c9484));
    --soc-line:    var(--border, #e6dfd0);
    --soc-line-2:  var(--border-strong, var(--border, #d4cbb8));
    --soc-surface: var(--surface, #ffffff);
    --soc-bg:      var(--bg, #faf7f0);
    --soc-accent:  var(--accent, #9a6200);
    --soc-going:   var(--free, var(--green, #177a4c));
    --soc-info:    var(--info, #1f5f9e);
    --soc-alert:   var(--alert, var(--red, #b3261e));
}

/* The social row is metadata, not a call to action: plain text, no
   borders, no fills. It sits in the same grid column as .row-actions so
   it starts exactly where the artist icons do — that column is auto-width
   and its position moves with the row's content, so no fixed indent could
   match it (Shane, 2026-09-22). */
.soc-bar { grid-column:3 / -1; grid-row:2; min-width:0;
           display:flex; align-items:center; gap:.3rem; flex-wrap:nowrap;
           padding:0; line-height:1; }
.soc-bar.off { display:none; }

/* Generous padding for the tap target, pulled back with negative margin so
   the row stays visually tight. Looks like a link, hits like a button. */
.soc-go, .soc-talk {
    display:inline-flex; align-items:center; gap:.22rem;
    padding:.45rem .25rem; margin:-.45rem 0;
    border:none; background:none; border-radius:4px;
    font:inherit; font-size:.72rem; font-weight:500; letter-spacing:.01em;
    color:var(--soc-muted); cursor:pointer; white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    transition:color .12s;
}
.soc-go:hover, .soc-talk:hover { color:var(--soc-ink); }
.soc-go:focus-visible, .soc-talk:focus-visible {
    outline:2px solid var(--soc-accent); outline-offset:1px; color:var(--soc-ink); }
.soc-go:disabled { opacity:.5; cursor:default; }
.soc-sep { color:var(--soc-faint); font-size:.72rem; user-select:none; }
.soc-n { font-variant-numeric:tabular-nums; font-weight:600; }
.soc-talk svg { width:13px; height:13px; }

/* Chosen reads through weight and colour rather than a filled shape —
   identifiable at a glance without competing with the act name. */
.soc-go[aria-pressed="true"] { font-weight:700; }
.soc-go[data-soc-attend="going"][aria-pressed="true"] { color:var(--soc-going); }
.soc-go[data-soc-attend="interested"][aria-pressed="true"] { color:var(--soc-accent); }
.soc-talk.has-talk { color:var(--soc-info); }
/* A phone has no hover, so the press itself is the feedback. */
.soc-go:active, .soc-talk:active { opacity:.55; }
.soc-go.just-set { animation:socPop .4s ease-out; }
@keyframes socPop {
    0%   { opacity:.4; }
    100% { opacity:1; }
}

@media (max-width: 700px) {
    /* Column 2 starts after the photo, so the alignment comes from the
       grid rather than a hardcoded indent kept in step by hand. */
    .soc-bar { grid-column:2 / -1; grid-row:3; padding:.15rem 0 0; gap:.26rem; }
}
.sl-btn.mine { border-color:var(--soc-accent); color:var(--soc-ink); }
.soc-quiet { color:var(--soc-muted); }
/* Reserved so the pill doesn't jump width when the counts land. */
.sl-btn[data-kind="community"] .txt { min-width:1.2em; display:inline-block; text-align:left; }
.soc-row { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
.soc-btn { padding:.35rem .7rem; border-radius:8px; border:1px solid var(--soc-line-2);
           background:var(--soc-surface); color:var(--soc-ink); font:inherit; font-size:.8rem;
           font-weight:600; cursor:pointer; }
.soc-btn[aria-pressed="true"] { background:var(--soc-accent); border-color:var(--soc-accent); color:var(--soc-bg); }
.soc-btn:disabled { opacity:.5; cursor:default; }
.soc-post { font-size:.82rem; line-height:1.5; padding:.55rem 0; border-top:1px solid var(--soc-line); }
/* The name sat inline with the comment and ran straight into it. It gets
   its own line now, with the time beside it, and the body sits under. */
.soc-post .soc-head { display:flex; align-items:baseline; gap:.4rem; margin-bottom:.15rem; }
.soc-post .soc-who { font-weight:700; color:var(--soc-ink); font-size:.8rem; }
.soc-post .soc-meta { color:var(--soc-muted); font-size:.72rem; }
.soc-post .soc-text { color:var(--soc-ink); }
.soc-replies { margin:.35rem 0 0 .8rem; padding-left:.6rem; border-left:2px solid var(--soc-line); }
.soc-act { background:none; border:none; padding:0; margin-right:.6rem; cursor:pointer;
           font:inherit; font-size:.74rem; color:var(--soc-muted); }
.soc-act:hover { color:var(--soc-accent); }
.soc-compose { margin:.5rem 0 .2rem; }
.soc-compose textarea { width:100%; min-height:54px; padding:.45rem .55rem; font:inherit;
                        font-size:.82rem; border-radius:8px; border:1px solid var(--soc-line-2);
                        background:var(--soc-surface); color:var(--soc-ink); resize:vertical; }
.soc-compose-foot { display:flex; justify-content:space-between; align-items:center;
                    gap:.5rem; margin-top:.35rem; }
.soc-send { padding:.3rem .8rem; border-radius:7px; border:none; cursor:pointer;
            background:var(--soc-accent); color:var(--soc-bg); font:inherit; font-size:.78rem;
            font-weight:600; }
.soc-send:disabled { opacity:.5; cursor:default; }
.soc-signin { font-size:.8rem; color:var(--soc-muted); margin:.4rem 0; }
.soc-more { display:inline-block; margin-top:.6rem; font-size:.8rem; color:var(--soc-accent); }
.save-btn { color:var(--soc-faint); padding:.25rem; border-radius:6px; line-height:0; transition:color .15s, transform .15s; }
.save-btn:hover { color:var(--soc-alert); transform:scale(1.15); }
.save-btn svg { width:17px; height:17px; }
.save-btn .heart-filled { display:none; }
.save-btn.saved { color:var(--soc-alert); }
.save-btn.saved .heart-filled { display:block; }
.save-btn.saved .heart-outline { display:none; }