/* Community: channels, feed, posts, replies, points. */
.composer-note{padding:0 12px 10px;margin:0;background:var(--paper)}
.post-acts{gap:8px;flex-wrap:wrap;align-items:center}
.reply p{margin:4px 0 0;font-size:var(--fs-body-s)}
.reply-form{display:flex;gap:8px;flex-wrap:wrap}
.reply-form .rf-x{flex:1 1 220px;width:auto;min-width:0}
.reply-form .rf-at{width:76px;flex:0 0 76px}
.post-player{margin:10px 0 4px}
.post-player .player{border:1px solid var(--hair)}
@media (max-width:560px){
  .feed .composer{flex-wrap:wrap}
  .feed .composer #pt{flex:1 1 100%}
  .feed .composer .att{max-width:none;flex:1}
}
/* community */
/* grid: channels + feed (the old right column is now the strip and the "How points work" sheet) */
.comm{display:grid;border:1px solid var(--hair-strong);background:var(--paper);grid-template-columns:210px minmax(0,1fr)}
.chans{border-right:1px solid var(--hair-strong);display:grid;align-content:start}
.chans button{background:transparent;border:0;border-bottom:1px solid var(--hair);padding:12px 14px;text-align:left;font-size:var(--fs-body-s)}
.chans button[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
.feed{display:grid;align-content:start;min-width:0}
.feed .composer{border-top:0;border-bottom:1px solid var(--hair)}
/* posts */
.post{padding:16px 18px;border-bottom:1px solid var(--hair);display:grid;gap:10px;scroll-margin-top:84px}
.aside{border-left:1px solid var(--hair-strong);padding:18px;display:grid;gap:12px;align-content:start}
.aside ol{margin:0;padding-left:18px;display:grid;gap:6px}
.points{display:grid;grid-template-columns:1fr 1.3fr;gap:24px}
@media (max-width:1100px){
  /* ---------------- responsive ---------------- */
  .comm{grid-template-columns:180px minmax(0,1fr)}
  .comm .aside{display:none}
}
@media (max-width:960px){
  .points{grid-template-columns:1fr}
  .comm{grid-template-columns:1fr}
  .chans{border-right:0;border-bottom:1px solid var(--hair-strong);display:flex;overflow-x:auto;scrollbar-width:none}
  .chans button{border-bottom:0;border-right:1px solid var(--hair);white-space:nowrap;flex:0 0 auto}
}
/* Community: the last post drew a second line on the feed border */
.feed > .post:last-of-type{border-bottom:0}
/* Community reply: "at 0:40" jumps the post's player to that time */
/* one-tap time chips: 32px to the eye, 44px to the finger */
.at-seek{background:transparent;border:1px solid var(--hair-strong);font:inherit;font-family:var(--mono);color:var(--ink);cursor:pointer;line-height:1.5;position:relative;min-height:32px;padding:0 10px;display:inline-flex;align-items:center;font-size:var(--fs-ui)}
@media (hover:hover){
  .at-seek:hover{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
}
.at-seek:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rp-sticky{position:sticky;top:var(--app-top,69px);z-index:6;background:var(--ground);box-shadow:0 8px 0 var(--ground)}
/* Community styles (fix round, one owner). Markup in js/app/shared.js (app-community). Loads last, so it overrides app.css and ui-producer.css. */
/* points strip: above the feed at every width */
.cm-strip{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--hair-strong);background:var(--paper)}
.cm-strip p{margin:0;font-size:var(--fs-body-s);line-height:1.45;flex:1 1 320px;min-width:0}
.cm-strip .btn{min-height:44px;flex:0 0 auto}
/* first visit with an email-prefix name */
.name-nudge{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent)}
.name-nudge label{display:grid;gap:2px}
.name-nudge .muted{color:inherit;opacity:.8}
.name-nudge .row{gap:8px;flex-wrap:nowrap}
.name-nudge input{flex:1;min-width:0;min-height:44px}
.name-nudge .btn{min-height:44px;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.comm > .aside{display:none}
/* channel list: links, with the last activity on the right */
.chans a{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 14px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);font-size:var(--fs-body-s)}
.chans a[hidden]{display:none}
.chans a .ch-n{flex:1;min-width:0}
.chans a .ch-when{font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);white-space:nowrap}
.chans a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.chans a[aria-current="page"] .ch-when{color:var(--on-accent)}
.chans a:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  .chans a:not([aria-current]):hover{background:var(--mint)}
}
@media (max-width:960px){
  .chans a{border-bottom:0;border-right:1px solid var(--hair);white-space:nowrap;flex:0 0 auto;min-height:48px}
}
/* feed head: which channel, and what it is for */
.feed-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 18px;border-bottom:1px solid var(--hair)}
/* composer: grows to four lines, the track picker and Post sit under it */
.cm-composer{display:grid;gap:8px;padding:12px}
.cm-composer textarea{width:100%;min-height:44px;max-height:calc(4 * 1.45em + 22px);resize:none;line-height:1.45;padding:10px 13px;display:block;overflow-y:auto}
.cm-composer-row{display:flex;align-items:center;gap:8px;min-width:0}
.cm-composer-row .sp{flex:1}
.cm-composer .att{max-width:min(320px,100%);min-width:0;min-height:44px;font-size:var(--fs-small);flex:0 1 auto}
.cm-post{min-width:80px;min-height:44px}
.cm-post:disabled{opacity:.45;cursor:default}
.composer-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:600px){
  .cm-composer .att{max-width:none;flex:1 1 auto;padding-right:26px}
}
.post-by{gap:8px;flex-wrap:wrap}
.post-x{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.post-acts .chip{min-height:44px}
.post-pts{flex:1 1 200px;min-width:0}
.pts-earned{font-family:var(--mono);font-size:var(--fs-caption);font-weight:500;background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);padding:2px 8px;white-space:nowrap}
.cm-empty .empty{padding-block:40px}
/* loading: two grey post skeletons */
.post-skel{display:grid;grid-template-columns:30px 1fr;gap:10px 12px;padding:18px;border-bottom:1px solid var(--hair)}
.post-skel span{width:30px;height:30px;border-radius:var(--r-round);background:var(--viz)}
.post-skel i{grid-column:2;display:block;height:12px;background:var(--viz);animation:cmPulse 1.1s ease-in-out infinite alternate}
.post-skel i:first-of-type{width:40%}
.post-skel i:last-of-type{height:56px}
@keyframes cmPulse{from{opacity:.5}to{opacity:1}}
.reply .row{gap:8px;flex-wrap:wrap;align-items:center}
.reply.flash{animation:cmFlash 1.4s ease-out}
@keyframes cmFlash{from{box-shadow:-14px 0 0 -10px var(--accent-deep);background:var(--accent)}to{box-shadow:none;background:transparent}}
.at-seek::after{content:"";position:absolute;inset:-6px -2px}
/* reply form: the text gets the full width; time and Reply share the row under it */
.rp-form{display:grid;gap:6px;margin-top:4px}
.rp-x{width:100%;min-height:44px;max-height:calc(5 * 1.45em + 22px);resize:none;line-height:1.45;padding:10px 13px;display:block;overflow-y:auto}
.rp-hint{margin:0;font-family:var(--mono);font-size:var(--fs-caption);color:var(--muted)}
.rp-hint:empty{display:none}
.rp-row{display:flex;align-items:center;gap:8px;min-width:0}
.rp-row .sp{flex:1}
.rp-add{min-height:44px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rp-at{width:96px;flex:0 0 96px;min-height:44px}
.rp-send{min-height:44px;min-width:80px}
@media (max-width:600px){
  .rp-row{flex-wrap:wrap}
  .rp-at{flex:1 1 80px;width:auto}
  .rp-row .sp{display:none}
  .rp-send{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .reply.flash,.post-skel i{animation:none}
}

/* ---------- sharing (phase 2): share options, download state, favourites, reports, useful ---------- */
.sh-opts{display:grid;gap:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--hair)}
.sh-modes{border:0;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.sh-modes legend{font-size:var(--fs-caption);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2);padding:0}
.sh-mode{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3);border:1px solid var(--hair);background:var(--paper);cursor:pointer;min-height:44px}
.sh-mode:has(input:checked){border-color:var(--hair-strong);background:var(--mint)}
.sh-mode input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px}
.sh-mode > span,.sh-sw > span{display:grid;gap:2px;min-width:0}
.sh-mode b,.sh-sw b{font-weight:600;font-size:var(--fs-body-s)}
.sh-mode small,.sh-sw small{font-size:var(--fs-small);color:var(--muted);line-height:1.4}
.sh-rights{font-weight:500}
.sh-opts .check > input,.sh-opts .sh-mode > input,.sheet .sh-mode > input,.sheet .check > input{width:20px;height:20px;min-height:0;flex:0 0 20px;margin:1px 0 0;padding:0}
.chip.is-locked{color:var(--muted);border-style:dashed}
.post-dl:empty,[data-favs]:empty{display:none}
.fav-badge{margin:0;justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-family:var(--mono);letter-spacing:.02em;padding:4px 8px;background:var(--accent);color:var(--on-accent);border:1px solid var(--hair-strong)}
[data-badge]:empty{display:none}
.cm-fav[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--hair-strong)}
.post-state{margin:0;font-size:var(--fs-small);padding:var(--sp-2) var(--sp-3);border-left:3px solid var(--warn);background:var(--warn-bg);color:var(--ink)}
.post-state.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.post.is-hidden .post-x,.post.is-hidden .post-player{opacity:.6}
.reply-acts{gap:var(--sp-2);margin-top:var(--sp-2)}
.reply-acts .chip{min-height:36px}
.useful-tag{font-family:var(--mono);color:var(--ok)}
.rate-line{margin:0 0 var(--sp-2)}
@media (max-width:600px){
  .post-acts .cm-more{margin-left:auto}
  .reply-acts .chip{min-height:44px}
}