/* ══════════════════════════════════════════════════════════════════════
   BBA Peptides Forum — CHROME partial (sidebar · topbar · search page)
   Loaded by forum/functions/_layout.js AFTER /forum.css, before
   /css/listing.css and /css/thread.css.

   OWNERSHIP: everything here is chrome-specific LAYOUT plus the classes this
   partial's own markup introduces (.bf-cat-*, .bf-crumb, .bf-crumb-sep,
   .bf-hit, .bf-search-excerpt, .bf-search-browse*). The shared primitives —
   .bf-search / .bf-search-input / .bf-search-btn / .bf-crumbs / .bf-list* /
   .bf-pager* / .bf-num / .bf-empty / .bf-pill* — are declared in forum.css and
   are NOT redefined here. Where they appear below they are SCOPED (.bf-topbar
   .bf-search, .bf-nav-group-cats .bf-num) and only positioned or sized for the
   slot they sit in, so the primitive keeps one owner and one look.

   Every value reads a token forum.css already declares on :root. No new
   palette, no new radius scale, no second type stack, light theme only.
═══════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR DENSITY ───────────────────────────────────────────────────
   The live sidebar was five links and ~600px of dead whitespace. The fix is
   the category list (below) plus a tighter rhythm: a forum's sidebar is a
   dense index you scan, not a five-item marketing nav. Rows come down from
   40px to 34px and the group gap from 20px to 13px — on touch every one of
   them goes back to the 44px floor in the LAST block of this file, which is
   the trap forum.css:1025 documents. ── */
.bf-sidebar{ padding:16px 12px; }
.bf-brand{ padding:2px 6px 14px; }

.bf-nav-groups{ gap:13px; }
.bf-nav-label{ margin-bottom:3px; padding:0 8px; }
.bf-nav-group{ gap:1px; }

/* 14.5px, up from 13.5px. The sidebar is the forum's index — it is read at a
   glance from the far left of a 1366px screen, which is the worst reading
   position on the page, and it was set two steps under the body size. */
.bf-nav-row{
  min-height:36px;
  padding:0 8px;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-soft);
  border-radius:var(--radius-sm);
}
.bf-nav-row:hover{ background:var(--teal-wash); color:var(--ink); }
.bf-nav-icon{ width:16px; height:16px; }
.bf-nav-row.is-active::before{ top:6px; bottom:6px; }

/* ── THE CATEGORY LIST ─────────────────────────────────────────────────
   The rooms, reachable from every page. A dot instead of an 18px icon: at
   this density a column of glyphs reads as noise, while a 6px dot gives the
   name a consistent left edge and one clear active state. ── */
.bf-nav-group-cats .bf-nav-row{ gap:9px; }

.bf-cat-dot{
  flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--hair-3);
  transition:background var(--dur-base) var(--ease-out);
}
.bf-cat-row:hover .bf-cat-dot,
.bf-cat-row.is-active .bf-cat-dot{ background:var(--teal); }

/* A long category name truncates rather than wrapping to two lines and
   breaking the row rhythm — the full name is in the row's aria-label and on
   the category page itself. */
.bf-cat-name{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* The thread count. Mono so it reads as metadata beside the name, never as a
   second link — but at 10.5px/.38 ink it measured 2.41:1, which is a number
   a member cannot read at all. It is the sidebar's only signal of which
   rooms are busy, so it gets the meta tier. */
.bf-nav-group-cats .bf-num{
  flex:none;
  font-family:var(--f-mono); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--text-ghost);
}
.bf-cat-row:hover .bf-num,
.bf-cat-row.is-active .bf-num{ color:var(--teal); font-weight:600; }

/* A room with people in it gets a live dot; the dot was already there and
   already hairline-grey. Teal on hover/active only was too shy — the whole
   point of the column is to show where the activity is. */
.bf-cat-dot{ background:var(--hair-3); }

/* ── TOPBAR: breadcrumb · search · account ─────────────────────────────
   Three regions on one line. forum.css sets space-between for the old
   two-child topbar; with three children the search would float in the middle
   of the gap, so the row switches to explicit flex sizing: crumbs take what
   they need, search takes the slack up to a readable maximum, the account
   chip stays fixed. ── */
.bf-topbar{ justify-content:flex-start; gap:14px; }

.bf-topbar .bf-crumbs{
  display:flex; align-items:center; gap:7px;
  flex:0 1 auto; min-width:0;
  overflow:hidden;
}

.bf-crumb-sep{ color:var(--text-ghost); font-size:11px; flex:none; }

/* Same mono/uppercase idiom as the .bf-topbar-home link this trail grew out
   of, one notch tighter so three levels still fit on a laptop. */
.bf-crumb{
  font-family:var(--f-mono); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--body); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:24ch;
  transition:color var(--dur-base) var(--ease-out);
}
a.bf-crumb:hover{ color:var(--teal); }
.bf-crumb.is-current{ color:var(--ink); }

.bf-topbar .bf-search{
  display:flex; align-items:center; gap:6px;
  flex:1 1 200px; max-width:420px;
  margin-left:auto;
}
.bf-topbar .bf-search-input{ flex:1 1 auto; min-width:0; width:100%; }
.bf-topbar .bf-search-btn{ flex:none; }
.bf-topbar .bf-search-btn svg{ width:16px; height:16px; }

.bf-topbar .bf-account{ flex:none; }

/* ── SEARCH RESULTS ────────────────────────────────────────────────────
   Rows are the shared .bf-list primitives; only the excerpt and the match
   marker are this page's own. ── */
.bf-search-excerpt{
  margin:6px 0 0;
  font-size:14.5px; line-height:1.6; color:var(--body);
  max-width:78ch;
}

/* Reply count + last-activity INSIDE the meta line of a search result.
   These deliberately do NOT reuse .bf-list-row__stat / .bf-list-row__latest.
   Those are grid COLUMN primitives owned by forum.css: __stat is a fixed
   width:var(--bf-col-stat) right-aligned nowrap box that narrows to 48px at
   ≤560px, and __latest is display:none below 820px so a listing can shed its
   whole trailing column. A search row is a single flowing meta line with no
   grid behind it, so those rules clipped "12 replies" and hid the timestamp
   on every phone and tablet. Plain inline tokens instead — no width, no
   breakpoint, so they survive at every size. */
.bf-search-stat,
.bf-search-when{
  display:inline; width:auto; text-align:left; white-space:normal;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--text-ghost);
}
.bf-search-stat{ font-variant-numeric:tabular-nums; }

/* The matched term. Amber wash — the same accent .f-notice-amber already
   uses — because teal is the forum's link colour and a highlight that looks
   like a link inside a result title is a false affordance. */
.bf-hit{
  background:rgba(200,145,43,.22);
  color:var(--ink); font-weight:600;
  border-radius:var(--radius-xs);
  padding:0 2px;
}

.bf-list-row.is-muted{ opacity:.72; }

/* The browse-by-category block under an empty or fruitless search: a search
   that finds nothing must still leave you somewhere to go. */
.bf-search-browse{ margin-top:var(--s2); }
.bf-search-browse-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:0 22px; margin-top:10px;
}
.bf-search-browse-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--hair-1);
}
.bf-search-browse-list a{
  font-family:var(--f-text); font-size:15px; font-weight:600;
  color:var(--ink); text-decoration:none;
}
.bf-search-browse-list a:hover{ color:var(--teal); }
.bf-search-browse-list .bf-num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-ghost); white-space:nowrap;
}

/* ── MOBILE ────────────────────────────────────────────────────────────
   forum.css:757 turns the sidebar into a horizontally-scrollable strip below
   860px. The category rows join that strip (they are the point of the
   sidebar), but their counts drop out: the strip has to stay short enough to
   scroll past, and the number is the least load-bearing half of the row. ── */
@media (max-width:860px){
  .bf-sidebar{ padding:8px 12px; }
  .bf-nav-group-cats .bf-num{ display:none; }
  .bf-nav-group-cats .bf-nav-row{ gap:7px; }
  .bf-cat-name{ max-width:16ch; }
}

@media (max-width:760px){
  /* The trail's middle levels go, the root link stays — the page head names
     the category anyway, and the search box needs the width more. */
  .bf-crumb, .bf-crumb-sep{ display:none; }
  .bf-topbar .bf-search{ flex:1 1 auto; max-width:none; }
}

@media (max-width:520px){
  /* At 375px nothing may force the BODY to scroll sideways: the trail goes
     entirely (the wordmark directly above it links home) and the search box
     takes the row. */
  .bf-topbar .bf-crumbs{ display:none; }
  .bf-topbar{ gap:10px; padding:0 16px; }
  .bf-search-browse-list{ grid-template-columns:1fr; }
}

/* ── TOUCH TARGETS, RE-ASSERTED LAST ───────────────────────────────────
   forum.css raises .bf-nav-row and friends to the 44px WCAG 2.5.5/2.5.8 floor
   in its final @media (pointer:coarse) block — but THIS sheet loads after it
   and sets .bf-nav-row{min-height:34px} at equal specificity, which would win
   and quietly shrink every nav row on a phone back under the floor. Same trap
   forum.css:1025 documents, one sheet later. Re-asserted here, at the end of
   the cascade, for the rows this partial touches and the controls it adds.

   16px on the input for the same reason forum.css:952 gives: anything smaller
   makes iOS Safari zoom the page on focus, which is its own layout bug. ── */
@media (pointer:coarse){
  .bf-nav-row, .bf-cat-row{ min-height:44px; }
  .bf-topbar .bf-search-input{ min-height:44px; font-size:16px; }
  .bf-topbar .bf-search-btn{ min-height:44px; min-width:44px; }
  .bf-search-browse-list a{ display:inline-flex; align-items:center; min-height:44px; }
  .bf-pager-btn{ display:inline-flex; align-items:center; min-height:44px; }
}
/* The crumb links get their hit box ONLY at widths where they are still
   rendered. A bare `@media (pointer:coarse)` rule setting display:inline-flex
   would sit later in this sheet than the max-width:760px rule that hides them
   and at equal specificity — it would win, and un-hide the trail on exactly
   the phones it was hidden for. */
@media (pointer:coarse) and (min-width:761px){
  /* inline-BLOCK, not inline-flex. .bf-crumbs is a flex container, so a
     flex ITEM with inline-flex blockifies to display:flex — and
     text-overflow:ellipsis is defined only for a BLOCK CONTAINER, so it is
     ignored outright on a flex box. The base .bf-crumb rule already sets
     max-width:24ch + overflow:hidden + white-space:nowrap + text-overflow:
     ellipsis; making this flex silently disabled the last of those four and
     nothing else, so a long thread title hard-clipped mid-word instead of
     ellipsing. Measured on /t/1000000144: clientWidth 158 vs scrollWidth 546.
     Only touch devices >=761px were affected (tablets, touch laptops) — a
     fine-pointer desktop never matches this block, which is why the defect
     was invisible on an ordinary desktop check.
     inline-block keeps the 44px hit box and stays a block container. */
  .bf-crumb{ display:inline-block; min-height:44px; line-height:44px; }
}