/* ══════════════════════════════════════════════════════════════════════
   community.css — the FIFTH partial. bbaforum.com

   WHAT LIVES HERE, AND NOTHING ELSE: the components added by the
   community/provenance work, all prefixed .bfc- (BBA Forum Community).

     .bfc-provenance      the one-sentence "where this came from" note
     .bfc-byline-facts    the derived half of a post byline
     .bfc-people          a distinct-participant count on a listing row
     .bfc-rescue          the opening-post subtitle under a thin title
     .bfc-row-quiet       an empty category row, at lower weight
     .bfc-join            the sign-in prompt at the foot of a thread
     .bfc-span            the archive span on the home stat line

   WHAT DOES NOT LIVE HERE: any rule targeting a primitive owned by
   /forum.css, /css/chrome.css, /css/listing.css or /css/thread.css. Those
   four are being rewritten by another hand for typography and contrast,
   concurrently with this file. A fifth sheet reaching back into .bf-list-row,
   .bf-post__side or .bfl-when to "adjust" them would win by load order and
   silently undo that work — so every selector below is either a .bfc- class
   of its own, or a .bfc- class SCOPED INSIDE one (`.bfc-provenance a`), which
   can only ever affect markup this work added. Nothing here restyles an
   element that existed before it.

   Loading last is what makes that discipline cheap: a .bfc- rule never has to
   out-specify anything, because it is never competing for the same selector.

   TOKENS are forum.css's own — --ink/--body/--text-ghost/--hair-1/--surface-2/
   --teal/--f-mono/--radius-sm. Nothing below invents a colour, a radius or a
   font. The one thing this sheet does assume is that those custom properties
   exist on :root; if the rewrite renames one, these components fall back to
   the browser default for that property rather than breaking layout.
═══════════════════════════════════════════════════════════════════════ */

/* ── THE PROVENANCE NOTE ──────────────────────────────────────────────
   Deliberately NOT a notice/banner. It is not a warning, it is not an
   error, and it must not compete with the RUO strip that legitimately IS
   one — a second coloured band under the first teaches a reader to skip
   both. So: no fill, no border box, one hairline on the leading edge, body
   ink. It reads as an editor's note, which is exactly what it is. */
.bfc-provenance{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:0 0 22px;
  padding:2px 0 2px 14px;
  border-left:2px solid var(--hair-2);
  max-width:78ch;
}
.bfc-provenance.is-compact{ margin-bottom:14px; }
.bfc-provenance.is-thread{ margin:0 0 20px; }

/* The leading mark. Decorative only (aria-hidden in the markup), so it may
   sit at --text-mute, the one token forum.css reserves for a glyph that is
   not text a member has to read. */
.bfc-provenance-mark{
  flex:0 0 auto;
  font-family:var(--f-mono);
  font-size:13px;
  line-height:1.6;
  color:var(--text-mute);
  user-select:none;
}
.bfc-provenance-text{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--body);
}
/* The counts. Ink rather than colour: these are the load-bearing words in the
   sentence, and a teal number here would read as a link. */
.bfc-provenance-text strong{
  font-weight:600;
  color:var(--ink);
}
.bfc-provenance-text a{ color:var(--teal); }

/* ── THE BYLINE'S DERIVED HALF ────────────────────────────────────────
   Sits under the handle in the post's author column. Mono micro-caps, the
   same idiom listing.css uses for .bfl-stat-label, because these are meta
   facts about a person and not the person's name — the name must stay the
   loudest thing in that column.

   `.bf-post__side` is a flex COLUMN owned by thread.css; this element is a
   new child of it and styles only itself. It is centred to match that
   column's own text-align rather than by overriding it. */
.bfc-byline-facts{
  display:block;
  font-family:var(--f-mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--text-ghost);
  overflow-wrap:anywhere;
  max-width:14ch;
}
.bfc-byline-facts .bfc-fact{ display:block; }
/* The separator between facts is hidden when they stack, which they do in the
   narrow author column — a dangling middot at the end of a line is noise. */
.bfc-byline-facts .bfc-dot{ display:none; }

/* ── PARTICIPANT COUNT ────────────────────────────────────────────────
   "14 people" on a listing row's meta line. The cheapest honest proof that a
   crowd, not a scraper, produced a thread — so it reads at the meta tier,
   with the noun always attached. A bare "14" would be exactly the insider
   shorthand the rest of this system spent a rewrite removing. */
.bfc-people{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--text-ghost);
  white-space:nowrap;
}
.bfc-people::before{
  content:"·";
  margin:0 6px 0 4px;
  color:var(--text-mute);
}

/* Inline separator used inside .bfc- meta lines only. */
.bfc-dot{ color:var(--text-mute); margin:0 2px; }

/* ── THE RESCUED FRAGMENT TITLE ───────────────────────────────────────
   One line of the opening post, under a title that says nothing. It must be
   unmistakably SUBORDINATE to the title — if it competed, the row would read
   as two titles and the list would get harder to scan, not easier. So:
   smaller, lighter, italic-free (italic at 12.5px on this canvas is worse to
   read), and hard-clamped to a single line so a row's height never changes
   depending on whether the rescue fired.

   -webkit-line-clamp with a text-overflow fallback: on any engine without it
   the ellipsis still lands, so the worst case is a slightly longer line
   rather than a broken row. */
.bfc-rescue{
  display:-webkit-box;
  -webkit-line-clamp:1;
  line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  margin:1px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--text-ghost);
  max-width:70ch;
}

/* ── THE QUIET ROOM ───────────────────────────────────────────────────
   An empty category. Nothing is faked into it and nothing is hidden; it is
   simply rendered at lower weight so five of them do not read as five
   repetitions of the same bad news. The marker dot loses its saturation, and
   the note carries a real pointer at where the conversation actually is.

   Scoped `.bfc-row-quiet .bfl-marker` rather than restyling .bfl-marker: the
   base component keeps whatever the listing sheet gives it, and only the rows
   this work marked quiet are affected. */
.bfc-row-quiet .bfl-marker{ opacity:.42; }
.bfc-row-quiet .bf-list-row__stat{ color:var(--text-ghost); }

.bfc-quiet-note{
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-ghost);
  /* This span IS a grid item — it occupies the category row's last column,
     which listing.css sizes at minmax(0,300px). Grid items default to
     min-width:auto, so the column's 300px cap could not actually contain it:
     measured live it rendered 535px wide and pushed the whole document 176px
     past the viewport, giving every page a horizontal scrollbar. min-width:0
     lets it obey its column; the wrap rules stop a long word doing it again. */
  min-width:0;
  overflow-wrap:anywhere;
  white-space:normal;
}
.bfc-quiet-note a{ color:var(--teal); }
.bfc-quiet-note a:hover{ color:var(--accent-press); }

/* ── THE ARCHIVE SPAN ─────────────────────────────────────────────────
   "Mar 2023 – Aug 2026" on the home stat line. Mono + tabular figures so it
   sits in the same key as the counts beside it. */
.bfc-span{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-size:12.5px;
  color:var(--body);
  white-space:nowrap;
}

/* ── THE JOIN PROMPT, AT THE FOOT OF A THREAD ─────────────────────────
   Nielsen Norman's reciprocity point, in CSS: this asks for something only
   after the reader has been given the whole thread, so it must look like the
   end of the reading experience rather than a wall in front of it. The recap
   line — real numbers about what they just read — is the part that earns the
   ask, so it gets ink weight while the ask itself stays a normal button.

   .bf-compose-gate's own box is thread.css's; only the two elements added
   inside it are styled here. */
.bfc-join-recap{
  color:var(--ink-soft);
}
.bfc-join-recap strong{
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bfc-join-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:14px;
}

/* ── FOCUS ────────────────────────────────────────────────────────────
   Every link this sheet introduces keeps a visible keyboard ring. Stated
   explicitly rather than inherited, because these components sit on three
   different grounds (canvas, surface-2, the compose card) and a ring defined
   once against the wrong one is a ring nobody can see. */
.bfc-provenance a:focus-visible,
.bfc-quiet-note a:focus-visible,
.bfc-join-actions a:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:2px;
}

/* ── MOTION ───────────────────────────────────────────────────────────
   This sheet ships no animation and no transition, so there is nothing here
   for prefers-reduced-motion to switch off — which is the correct way to
   respect it. The block below is a guard, not a fix: if a future edit adds a
   transition to a .bfc- component, it is already covered. */
@media (prefers-reduced-motion: reduce){
  .bfc-provenance,
  .bfc-rescue,
  .bfc-join-actions a{
    transition:none !important;
    animation:none !important;
  }
}

/* ── NARROW ───────────────────────────────────────────────────────────
   On a phone thread.css collapses .bf-post__side into a horizontal strip, so
   the byline facts stop being a stacked column and become an inline run —
   which is when the separator middots have to come back. */
@media (max-width: 720px){
  .bfc-byline-facts{
    max-width:none;
    display:inline;
  }
  .bfc-byline-facts .bfc-fact{ display:inline; }
  .bfc-byline-facts .bfc-dot{ display:inline; margin:0 5px; }
  .bfc-provenance{ margin-bottom:16px; }
  .bfc-people{ white-space:normal; }
}