/* ══════════════════════════════════════════════════════════════════════════
   bbaforum.com — THREAD PAGE + NEW-THREAD COMPOSER, page layout only.

   Linked by shell() for every route, AFTER /forum.css and after the chrome and
   listing partials, so its rules land last. It only ever matches inside the two
   surfaces functions/t/[id].js and functions/new.js render — every selector
   below is scoped to a .bf-thread__*, .bf-thread-posts, .bf-post__* or
   .bf-new__* hook that exists on no other page. Everything here is layout:

     • no colour, type scale, radius or spacing literal — every value comes
       from a custom property forum.css declares on :root, so a change to the
       system reaches this file for free and a raw hex can never drift out of it;
     • no shared primitive is redefined. .bf-avatar / .bf-badge / .bf-pin /
       .bf-pager / .bf-pager-btn / .bf-pager-info / .bf-crumbs / .bf-num /
       .bf-empty / .bf-post* belong to forum.css, and the breadcrumb belongs to
       the chrome. This file positions what it uses and adds its own
       .bf-post__*, .bf-thread__*, .bf-new__* and .bf-field__* children;
     • light theme only, by design — the forum has one look.

   Layout idiom is XenForo/Discourse: a fixed AUTHOR COLUMN on the left of every
   post and the conversation on the right. The author column is what makes a
   47-reply thread scannable — you find who said it before you read what they
   said — and it is the single biggest difference between this page and the
   flat stack it replaces.
   ══════════════════════════════════════════════════════════════════════════ */

/* The breadcrumb is the CHROME's now: shell() renders .bf-crumbs in the topbar
   from the `crumbs` param both of this file's routes pass, and public/css/
   chrome.css styles it. Nothing about it lives here. */

/* ── thread header ───────────────────────────────────────────────────── */
.bf-thread__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}
.bf-thread__head-text { flex: 1 1 420px; min-width: 0; }
.bf-thread__head .bf-eyebrow a { color: inherit; text-decoration: none; }
.bf-thread__head .bf-eyebrow a:hover { color: var(--teal); }

.bf-thread__title {
  font-family: var(--f-display);
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}
.bf-thread__markers { margin-top: 12px; }

.bf-thread__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: var(--f-text);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
}
.bf-thread__meta strong { color: var(--ink); font-weight: 700; }
.bf-thread__meta-sep { color: var(--text-mute); }

.bf-thread__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.bf-thread__jump { white-space: nowrap; }

/* ── the post list ───────────────────────────────────────────────────── */
.bf-thread-posts { display: block; }

.bf-thread-posts .bf-post {
  position: relative;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  /* An anchored post lands clear of the top edge instead of flush against it. */
  scroll-margin-top: 24px;
  transition: background var(--dur-base) var(--ease-out);
}
.bf-thread-posts .bf-post + .bf-post { border-top: 1px solid var(--hair-1); }

/* The permalink target lights up, so a link into a 47-reply thread says which
   post it meant. Both forms are covered: id="p<id>" on the article itself, and
   the compatibility anchor id="p-<id>" public/forms.js still sends replies to. */
.bf-thread-posts .bf-post:target,
.bf-thread-posts .bf-post:has(> .bf-post__anchor:target) {
  background: var(--cool-panel);
}
.bf-post__anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  scroll-margin-top: 24px;
}

/* LEFT — who. */
.bf-thread-posts .bf-post__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 18px 22px 0;
  margin-right: 18px;
  border-right: 1px solid var(--hair-1);
  text-align: center;
  min-width: 0;
}
.bf-thread-posts .bf-post__handle {
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.bf-post__marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/* RIGHT — what. */
.bf-thread-posts .bf-post__main {
  padding: 22px 0;
  min-width: 0;
}
.bf-thread-posts .bf-post__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.bf-post__num {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-ghost);
  text-decoration: none;
  flex: none;
}
.bf-post__num:hover { color: var(--teal); }
.bf-thread-posts .bf-post-text { margin-bottom: 0; white-space: pre-wrap; }
.bf-thread-posts .bf-post-img {
  display: block;
  max-width: min(100%, 560px);
  width: auto;
  height: auto;
  margin: 10px 0;
  border-radius: var(--radius-xs, 6px);
  border: 1px solid var(--hair-1);
  background: var(--paper-warm, #f7f5f1);
}

/* ── quoted parent ───────────────────────────────────────────────────────
   The compact form of "this is what I am answering". It is a link end to end
   (the ::after below stretches the header anchor over the whole block) without
   nesting anything interactive inside another interactive element. */
.bf-post__quote {
  position: relative;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--hair-1);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-xs);
  background: var(--paper-warm);
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.bf-post__quote:hover { border-color: var(--hair-2); border-left-color: var(--teal); background: var(--paper); }

.bf-post__quote-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--f-text);
  font-size: 13.5px;
  color: var(--body);
}
.bf-post__quote-link::after { content: ""; position: absolute; inset: 0; }
.bf-post__quote-who { font-weight: 700; color: var(--ink-soft); }
.bf-post__quote-jump { font-family: var(--f-mono); font-size: 11px; color: var(--text-ghost); }
.bf-post__quote:hover .bf-post__quote-jump { color: var(--teal); }

.bf-post__quote-text {
  margin: 6px 0 0;
  font-family: var(--f-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  /* Two lines, then an ellipsis — a quote block must never out-shout the post
     it sits above. The excerpt is already truncated server-side; this only
     protects the layout from a single very long word. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ── post footer: permalink, reply, report ───────────────────────────── */
.bf-post__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--hair-1);
}
/* LINK / REPLY / REPORT. Kept as mono micro-caps — they are controls, and a
   row of three uppercase labels under a post is the XenForo idiom exactly —
   but a step up in size and weight, because at 11px/.62 they were the least
   findable controls on the page and replying is the whole point. */
.bf-post__act {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--body);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.bf-post__act:hover { color: var(--teal); }
.bf-post__foot .bf-post__report { margin-top: 0; margin-left: auto; }

/* A post in review keeps its shape but loses its voice. */
.bf-thread-posts .bf-post-review .bf-post__quote { opacity: .7; }

/* ── pager ───────────────────────────────────────────────────────────── */
.bf-thread__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
}
.bf-thread__pager .bf-pager-info {
  margin: 0 auto;
  order: 0;
  font-family: var(--f-text);
  font-size: 13.5px;
  color: var(--body);
  white-space: nowrap;
}
/* A control that cannot go anywhere still holds its place — a pager whose
   buttons appear and disappear between pages makes the reader re-find them. */
.bf-thread__pager .bf-pager-btn.is-disabled {
  opacity: .38;
  pointer-events: none;
  cursor: default;
}

/* ── the reply end of the thread ─────────────────────────────────────── */
.bf-thread__composer { margin-top: 22px; scroll-margin-top: 24px; }
.bf-thread__quoting {
  margin: 0 0 4px;
  font-family: var(--f-text);
  font-size: 12.5px;
  color: var(--body);
}
.bf-thread__quoting strong { color: var(--ink-soft); }

.bf-thread__closed {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--hair-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-family: var(--f-text);
  font-size: 15px;
  color: var(--body);
}
.bf-thread__closed-mark { color: var(--text-ghost); font-family: var(--f-mono); }

/* "Sign in to reply" is the single most important sentence on a thread page
   for a logged-out reader — it is the entire conversion. A dashed grey box
   with 13.5px of --body in it was the quietest element on screen. Warm
   ground, teal edge, real size. */
.bf-thread__reply-hint {
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--teal-edge);
  border-radius: var(--radius-md);
  background: var(--teal-wash);
  font-family: var(--f-text);
  font-size: 15px;
  text-align: center;
  color: var(--ink-soft);
}

/* ── new-thread composer ─────────────────────────────────────────────── */
.bf-new__head { align-items: flex-start; }
.bf-new__rules { margin-bottom: 8px; }
.bf-new__rules-more {
  margin: 0 0 4px;
  font-family: var(--f-text);
  font-size: 12.5px;
}
.bf-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.bf-field__row label { margin: 0; }
.bf-field__guide {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-ghost);
  white-space: nowrap;
}
.bf-field__hint { margin-top: 2px; }

/* ── narrow screens ──────────────────────────────────────────────────────
   Below 720px the author column stops being a column: 152px of gutter is a
   third of a phone's width, and a post body squeezed into what is left is
   unreadable. It becomes a byline row above the post instead — the same
   information, the same order, no horizontal scroll. */
@media (max-width: 720px) {
  .bf-thread-posts .bf-post {
    display: block;
    padding: 4px 0;
  }
  .bf-thread-posts .bf-post__side {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 0 0;
    margin-right: 0;
    border-right: 0;
    text-align: left;
  }
  .bf-post__marks { justify-content: flex-start; }
  .bf-thread-posts .bf-post__main { padding: 12px 0 18px; }
  .bf-thread-posts .bf-post__head { margin-bottom: 8px; }

  .bf-thread__head { align-items: flex-start; }
  .bf-thread__head-actions { width: 100%; }
  .bf-thread__head-actions > * { flex: 1 1 auto; justify-content: center; }

  .bf-thread__pager { gap: 6px; justify-content: space-between; }
  .bf-thread__pager .bf-pager-info {
    order: -1;
    width: 100%;
    margin: 0 0 4px;
    text-align: center;
  }
  .bf-post__foot { gap: 12px; }
  .bf-post__foot .bf-post__report { margin-left: 0; width: 100%; }
}

/* Motion is a nicety here, never load-bearing. */
@media (prefers-reduced-motion: reduce) {
  .bf-thread-posts .bf-post,
  .bf-post__quote { transition: none; }
}