/* ============================================================================
   SSRP Forums v2 — built from the Claude Design project
   "SSRP Forums Redesign" / SSRP Forums v2.dc.html

   The design system's colour and font tokens are already the live theme's
   tokens (--blue-600 #1995e2, --ink #030712, Barlow / Public Sans / Barlow
   Condensed), so this file only needs to add the shape tokens the DS uses and
   then lay out the three screens.

   Loaded only on bbPress views, after forum.css.
   ============================================================================ */

/* ============================================================================
   SSRP Forums v2 — stylesheet map

     1. Tokens & page frame          (.ssrp-bbp-v2, .ssrp-v2-wrap)
     2. Primitives                   eyebrow, buttons, avatars
     3. Hero                         .ssrp-v2-hero
     4. Board                        rail, tag cloud, digest, filters
     5. Discussion cards             .ssrp-v2-row, .ssrp-v2-waitcard
     6. Thread                       .ssrp-v2-post, accepted answer, helpful
     7. Compose                      steps, rooms, tag picker, fields
     8. Responsive
     9. Cascade guards               rules that must outrank forum.css
    10. Pagination, forms, search dropdown, profile & tag views

   Sections 9-10 sit last on purpose: forum.css carries `.ssrp-bbp h1..h4`
   and input rules at specificities a single v2 class cannot beat, so those
   guards depend on source order. Everything above is deduplicated — values
   live once, in their own section.
   ============================================================================ */


.ssrp-bbp {
  /* DS spacing scale (4px grid) — the theme ships --spacing-N, the DS
     references --space-N. Alias rather than rewrite either one. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* DS radii — 24px is the SSRP card shape */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 9999px;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --v2-max: 1280px;
  --v2-narrow: 900px;
}

/* The v2 screens own their own page frame. */
.ssrp-bbp-v2 {
  display: block;
  background: var(--gray-100, #f3f4f6);
  padding: 0 16px 120px;
  box-sizing: border-box;
  font-family: var(--font-primary);
  color: var(--ink, #030712);
}

.ssrp-bbp-v2 * {
  box-sizing: border-box;
}

.ssrp-v2-wrap {
  max-width: var(--v2-max);
  margin: 0 auto;
}

.ssrp-v2-wrap--narrow {
  max-width: var(--v2-narrow);
  margin: 0 auto;
}

/* --- Shared: eyebrow ------------------------------------------------------ */
.ssrp-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-400, #55bfea);
}

.ssrp-v2-eyebrow svg {
  flex: 0 0 auto;
  display: block;
}

/* --- Shared: buttons (DS Button) ------------------------------------------ */
.ssrp-v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-secondary, "Public Sans", sans-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              filter var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}

.ssrp-v2-btn:hover { filter: brightness(1.06); text-decoration: none; }
.ssrp-v2-btn:active { transform: scale(0.97); }

.ssrp-v2-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; gap: 6px; }
.ssrp-v2-btn--icon-start { padding-left: 12px; }
.ssrp-v2-btn--block { display: flex; width: 100%; }

.ssrp-v2-btn--primary { background: var(--blue-400, #55bfea); color: var(--ink, #030712); }
.ssrp-v2-btn--brand   { background: var(--blue-500, #2aace2); color: var(--ink, #030712); }
.ssrp-v2-btn--dark    { background: var(--ink, #030712); color: var(--gray-0, #fff); }
.ssrp-v2-btn--light   { background: var(--gray-0, #fff); color: var(--ink, #030712); }
.ssrp-v2-btn--outline { background: transparent; color: var(--ink, #030712); border-color: var(--gray-300, #d1d5db); }

/* --- Hero ----------------------------------------------------------------- */
.ssrp-v2-hero {
  position: relative;
  /* NOT overflow:hidden — the search dropdown lives in here and any clipping
     context cuts it off. The watermark clips itself via __markwrap instead. */
  margin-top: 24px;
  border-radius: var(--r-lg);
  background: var(--ink, #030712);
  color: var(--gray-50, #f8fafc);
  padding: 36px 40px;
}

.ssrp-v2-hero__mark {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 340px;
  opacity: 0.07;
  color: #fff;
  pointer-events: none;
}

.ssrp-v2-hero__top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.ssrp-v2-hero__title {
  margin: 12px 0 0;
  font-family: var(--font-primary);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gray-50, #f8fafc);
}

.ssrp-v2-hero__sub {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--gray-400, #9ca3af);
  max-width: 520px;
}

.ssrp-v2-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ssrp-v2-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 300px;
}

.ssrp-v2-search i { font-size: 19px; color: var(--gray-400, #9ca3af); }

.ssrp-v2-search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--gray-50, #f8fafc);
  font-family: var(--font-primary);
  font-size: 16px;
  outline: none;
}

.ssrp-v2-hero__stats {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--gray-400, #9ca3af);
}

.ssrp-v2-hero__stat { display: inline-flex; align-items: center; gap: 7px; }
.ssrp-v2-hero__stat strong { color: var(--gray-50, #f8fafc); }
.ssrp-v2-hero__stat i { font-size: 17px; }
.ssrp-v2-hero__stat--last { margin-left: auto; }

/* --- Board layout --------------------------------------------------------- */
.ssrp-v2-board {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 32px;
  align-items: start;
}

.ssrp-v2-rail {
  position: sticky;
  top: 112px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ssrp-v2-panel {
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
}

.ssrp-v2-panel--nav { padding: 12px; }
.ssrp-v2-panel--pad { padding: 20px; }

.ssrp-v2-panel__label,
.ssrp-v2-rail__label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400, #9ca3af);
}

.ssrp-v2-panel--nav .ssrp-v2-rail__label { padding: 8px 12px 10px; display: block; }

.ssrp-v2-rail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gray-700, #374151);
  background: transparent;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard);
}

.ssrp-v2-rail__item:hover { background: var(--gray-100, #f3f4f6); color: var(--gray-900, #030712); text-decoration: none; }

.ssrp-v2-rail__item.is-active {
  color: var(--gray-50, #f8fafc);
  background: var(--ink, #030712);
}

.ssrp-v2-rail__item.is-active:hover { background: var(--ink, #030712); color: var(--gray-50, #f8fafc); }

.ssrp-v2-rail__item i { font-size: 19px; flex: 0 0 auto; }
.ssrp-v2-rail__name { flex: 1; min-width: 0; }

.ssrp-v2-rail__count {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-400, #9ca3af);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- Tag cloud in the rail ------------------------------------------------ */
.ssrp-v2-tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  min-width: 0;
}

.ssrp-v2-tagchip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
  font-family: var(--font-condensed);
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

.ssrp-v2-tagchip:hover { background: var(--blue-50, #ebfcff); color: var(--blue-800, #0e527f); text-decoration: none; }
.ssrp-v2-tagchip.is-active { background: var(--blue-50, #ebfcff); color: var(--blue-800, #0e527f); }

.ssrp-v2-tagmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-600, #1995e2);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* --- Digest card ---------------------------------------------------------- */
.ssrp-v2-digest {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--ink, #030712);
  color: var(--gray-50, #f8fafc);
}

.ssrp-v2-digest i { font-size: 22px; color: var(--blue-400, #55bfea); }

.ssrp-v2-digest__title {
  margin-top: 12px;
  font-family: var(--font-primary);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.ssrp-v2-digest p {
  margin: 6px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-400, #9ca3af);
}

/* --- Compose prompt ------------------------------------------------------- */
.ssrp-v2-prompt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-standard);
}

.ssrp-v2-prompt:hover { border-color: var(--blue-400, #55bfea); text-decoration: none; }

.ssrp-v2-prompt__text {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  color: var(--gray-500, #6b7280);
}

/* --- Avatar monogram ------------------------------------------------------ */
.ssrp-v2-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--ink, #030712);
  color: var(--blue-400, #55bfea);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
}

.ssrp-v2-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-pill); }
.ssrp-v2-avatar--lg { width: 56px; height: 56px; font-size: 19px; }
.ssrp-v2-avatar--brand { background: var(--blue-500, #2aace2); color: var(--ink, #030712); }

.ssrp-v2-avatar-wrap { flex: 0 0 auto; position: relative; }

.ssrp-v2-avatar-wrap .ssrp-v2-answered-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  font-size: 19px;
  color: var(--teal-500, #23dbc0);
  background: var(--gray-0, #fff);
  border-radius: var(--r-pill);
  line-height: 1;
}

/* --- Filter pills --------------------------------------------------------- */
.ssrp-v2-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.ssrp-v2-filters__group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
}

.ssrp-v2-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  color: var(--gray-600, #4b5563);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.ssrp-v2-filter:hover { color: var(--ink, #030712); text-decoration: none; }
.ssrp-v2-filter.is-active { background: var(--ink, #030712); color: var(--gray-50, #f8fafc); }

.ssrp-v2-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--orange-500, #fd5212);
  color: var(--gray-0, #fff);
  font-size: 11px;
}

.ssrp-v2-activefilter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 8px 0 14px;
  border-radius: var(--r-pill);
  background: var(--blue-50, #ebfcff);
  border: 1px solid var(--blue-200, #b6eaf8);
  color: var(--blue-800, #0e527f);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.ssrp-v2-activefilter i { font-size: 17px; cursor: pointer; }

/* --- Section rules -------------------------------------------------------- */
.ssrp-v2-sectionhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.ssrp-v2-sectionhead h2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
}

.ssrp-v2-sectionhead__rule { flex: 1; height: 1px; background: var(--gray-300, #d1d5db); }
.ssrp-v2-sectionhead--wait h2,
.ssrp-v2-sectionhead--wait i { color: var(--orange-600, #ed3809); }
.ssrp-v2-sectionhead i { font-size: 18px; }

/* --- Waiting cards (standalone, orange) ----------------------------------- */
.ssrp-v2-waitlist {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ssrp-v2-waitcard {
  display: flex;
  gap: 18px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--orange-200, #ffcba9);
  cursor: pointer;
  transition: border-color var(--dur-base), transform var(--dur-base);
  text-decoration: none;
  color: inherit;
}

.ssrp-v2-waitcard:hover {
  border-color: var(--orange-400, #fe7a3d);
  transform: translateY(-2px);
  text-decoration: none;
}

.ssrp-v2-waitcard__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.ssrp-v2-noreplies {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--orange-600, #ed3809);
  white-space: nowrap;
}

/* --- Discussion rows (grouped list) --------------------------------------- */
.ssrp-v2-list {
  margin-top: 16px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  overflow: hidden;
}

.ssrp-v2-row {
  display: flex;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  cursor: pointer;
  transition: background var(--dur-base);
  text-decoration: none;
  color: inherit;
}

.ssrp-v2-row:last-child { border-bottom: none; }
.ssrp-v2-row:hover { background: var(--gray-50, #f8fafc); text-decoration: none; }

.ssrp-v2-row__body { flex: 1; min-width: 0; }

.ssrp-v2-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  row-gap: 8px;
  flex-wrap: wrap;
}

.ssrp-v2-forumname {
  font-family: var(--font-condensed);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-600, #1995e2);
  text-decoration: none;
}

.ssrp-v2-sep { color: var(--gray-300, #d1d5db); }

.ssrp-v2-minitag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-600, #4b5563);
  font-family: var(--font-condensed);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.ssrp-v2-minitag:hover { background: var(--blue-50, #ebfcff); color: var(--blue-800, #0e527f); text-decoration: none; }

.ssrp-v2-facultyflag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-700, #217f72);
  letter-spacing: 0.03em;
}

.ssrp-v2-row__title,
.ssrp-v2-waitcard__title {
  margin: 8px 0 0;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink, #030712);
}

.ssrp-v2-row__excerpt {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-600, #4b5563);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.ssrp-v2-waitcard__excerpt {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-600, #4b5563);
}

.ssrp-v2-byline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--gray-500, #6b7280);
}

.ssrp-v2-byline__name { color: var(--gray-700, #374151); font-weight: 600; }

.ssrp-v2-row__stats {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--gray-500, #6b7280);
}

.ssrp-v2-row__stat { display: inline-flex; align-items: center; gap: 6px; }
.ssrp-v2-row__stat i { font-size: 16px; }
.ssrp-v2-row__stat strong { color: var(--ink, #030712); font-size: 15px; }

/* --- Prompt / empty states ------------------------------------------------ */
.ssrp-v2-empty {
  margin-top: 16px;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  text-align: center;
  color: var(--gray-600, #4b5563);
  font-size: 16px;
}

/* --- Ask prompt panel ----------------------------------------------------- */
.ssrp-v2-askpanel {
  margin-top: 40px;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
}

/* --- Care banner ---------------------------------------------------------- */
.ssrp-v2-care {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  border-radius: var(--r-lg);
  background: var(--blue-50, #ebfcff);
  border: 1px solid var(--blue-200, #b6eaf8);
}

.ssrp-v2-care__lead {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink, #030712);
}

.ssrp-v2-care p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--gray-600, #4b5563); }

/* ============================================================================
   THREAD
   ============================================================================ */
.ssrp-v2-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--gray-500, #6b7280);
  flex-wrap: wrap;
}

.ssrp-v2-crumbs a { color: var(--blue-600, #1995e2); font-weight: 700; text-decoration: none; }
.ssrp-v2-crumbs i { font-size: 16px; }

.ssrp-v2-thread__status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.ssrp-v2-pill-answered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--teal-500, #23dbc0);
  color: var(--ink, #030712);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
}

.ssrp-v2-pill-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--orange-100, #ffe7d4);
  color: var(--orange-700, #c52709);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
}

.ssrp-v2-thread__tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  color: var(--gray-700, #374151);
  font-family: var(--font-condensed);
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.ssrp-v2-thread__title {
  margin: 16px 0 0;
  font-family: var(--font-primary);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink, #030712);
}

.ssrp-v2-thread__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--gray-500, #6b7280);
}

.ssrp-v2-thread__meta strong { color: var(--ink, #030712); }
.ssrp-v2-thread__meta-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.ssrp-v2-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gray-300, #d1d5db);
  background: var(--gray-0, #fff);
  color: var(--gray-700, #374151);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.ssrp-v2-iconbtn:hover { border-color: var(--blue-400, #55bfea); color: var(--blue-700, #1577b8); text-decoration: none; }
.ssrp-v2-iconbtn--square { width: 44px; padding: 0; }

/* --- Post cards ----------------------------------------------------------- */
.ssrp-v2-post {
  margin-top: 28px;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
}

.ssrp-v2-post__head { display: flex; align-items: flex-start; gap: 16px; }
.ssrp-v2-post__ident { flex: 1; min-width: 0; }

.ssrp-v2-post__name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ssrp-v2-post__name b {
  font-family: var(--font-primary);
  font-size: 19px;
  font-weight: 700;
}

.ssrp-v2-post__creds { font-family: var(--font-primary); font-size: 16px; color: var(--gray-500, #6b7280); }
.ssrp-v2-post__role { font-family: var(--font-primary); font-size: 15px; font-weight: 700; color: var(--gray-500, #6b7280); }

.ssrp-v2-post__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--gray-600, #4b5563);
  flex-wrap: wrap;
}

.ssrp-v2-post__date { flex: 0 0 auto; font-family: var(--font-primary); font-size: 15px; color: var(--gray-400, #9ca3af); }

.ssrp-v2-post__content {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray-800, #1f2937);
}

.ssrp-v2-post__content p { margin: 0 0 16px; }
.ssrp-v2-post__content p:last-child { margin-bottom: 0; }
.ssrp-v2-post__content ul { list-style: disc outside; padding-left: 1.5em; margin: 0 0 16px; }
.ssrp-v2-post__content ol { list-style: decimal outside; padding-left: 1.5em; margin: 0 0 16px; counter-reset: none; }
.ssrp-v2-post__content li { font-size: inherit; line-height: inherit; margin: 0 0 0.3em; position: static; list-style: inherit; counter-increment: none; }
.ssrp-v2-post__content ol > li::before,
.ssrp-v2-post__content ul > li::before { content: none; }
.ssrp-v2-post__content li::marker { color: var(--gray-500, #6b7280); font-weight: 400; }
.ssrp-v2-post__content img { max-width: 100%; height: auto; border-radius: var(--r-md); }

.ssrp-v2-post__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* --- Helpful -------------------------------------------------------------- */
.ssrp-v2-helpful {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gray-300, #d1d5db);
  background: var(--gray-0, #fff);
  color: var(--gray-600, #4b5563);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}

.ssrp-v2-helpful:hover { border-color: var(--blue-400, #55bfea); color: var(--blue-700, #1577b8); }
.ssrp-v2-helpful.is-voted { background: var(--blue-50, #ebfcff); border-color: var(--blue-300, #82d3f1); color: var(--blue-800, #0e527f); }
.ssrp-v2-helpful[disabled] { opacity: 0.55; cursor: default; }

.ssrp-v2-accept {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--teal-600, #25baa5);
  background: transparent;
  color: var(--teal-700, #217f72);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.ssrp-v2-accept:hover { background: var(--teal-50, #affff3); }
.ssrp-v2-accept.is-accepted { background: var(--teal-500, #23dbc0); border-style: solid; border-color: var(--teal-500, #23dbc0); color: var(--ink, #030712); }

/* --- Accepted answer block ------------------------------------------------ */
.ssrp-v2-accepted {
  margin-top: 32px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--teal-300, #1eebcd);
}

.ssrp-v2-accepted__flag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--teal-500, #23dbc0);
  color: var(--ink, #030712);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
}

.ssrp-v2-accepted__flag i { font-size: 20px; }
.ssrp-v2-accepted .ssrp-v2-post { margin-top: 0; border: none; border-radius: 0; }

/* --- Reply form ----------------------------------------------------------- */
.ssrp-v2-replybox {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
}

.ssrp-v2-replybox__head {
  font-family: var(--font-primary);
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 14px;
}

/* ============================================================================
   COMPOSE
   ============================================================================ */
.ssrp-v2-compose__title {
  margin: 20px 0 0;
  font-family: var(--font-primary);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ssrp-v2-compose__sub { margin: 8px 0 0; font-size: 17px; color: var(--gray-600, #4b5563); max-width: 620px; }

.ssrp-v2-step { margin-top: 40px; }
.ssrp-v2-step:first-of-type { margin-top: 36px; }

.ssrp-v2-step__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.ssrp-v2-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--ink, #030712);
  color: var(--gray-50, #f8fafc);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  flex: 0 0 auto;
}

.ssrp-v2-step__head h2 { margin: 0; font-family: var(--font-primary); font-size: 24px; font-weight: 500; }
.ssrp-v2-step__hint { font-family: var(--font-primary); font-size: 16px; color: var(--gray-500, #6b7280); }

.ssrp-v2-rooms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.ssrp-v2-room {
  display: flex;
  gap: 16px;
  padding: 22px;
  align-items: flex-start;
  border-radius: var(--r-md);
  background: var(--gray-0, #fff);
  border: 2px solid var(--gray-200, #e5e7eb);
  cursor: pointer;
  transition: border-color var(--dur-base);
}

.ssrp-v2-room:hover { border-color: var(--blue-300, #82d3f1); }
.ssrp-v2-room.is-selected { border-color: var(--blue-500, #2aace2); }
.ssrp-v2-room input { position: absolute; opacity: 0; pointer-events: none; }
.ssrp-v2-room > i:first-child { font-size: 24px; color: var(--gray-500, #6b7280); flex: 0 0 auto; }
.ssrp-v2-room.is-selected > i:first-child { color: var(--blue-600, #1995e2); }
.ssrp-v2-room__body { flex: 1; min-width: 0; }
.ssrp-v2-room__name { font-family: var(--font-primary); font-size: 19px; font-weight: 500; }
.ssrp-v2-room__desc { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--gray-600, #4b5563); }
.ssrp-v2-room__check { font-size: 22px; color: var(--blue-500, #2aace2); flex: 0 0 auto; display: none; }
.ssrp-v2-room.is-selected .ssrp-v2-room__check { display: block; }

.ssrp-v2-tagpanel {
  margin-top: 20px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
}

.ssrp-v2-taggroup + .ssrp-v2-taggroup { margin-top: 26px; }

.ssrp-v2-taggroup__label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400, #9ca3af);
}

.ssrp-v2-taggroup__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.ssrp-v2-tagpick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
  font-family: var(--font-condensed);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: background var(--dur-base), color var(--dur-base);
}

.ssrp-v2-tagpick i { display: none; font-size: 16px; }
.ssrp-v2-tagpick.is-picked { background: var(--blue-500, #2aace2); color: var(--ink, #030712); }
.ssrp-v2-tagpick.is-picked i { display: inline-block; }
.ssrp-v2-tagpick[disabled] { opacity: 0.4; cursor: not-allowed; }

.ssrp-v2-field { margin-top: 28px; }

.ssrp-v2-field label {
  display: block;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-700, #374151);
  margin-bottom: 10px;
}

.ssrp-v2-input,
.ssrp-v2-textarea {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-0, #fff);
  padding: 14px 16px;
  font-family: var(--font-primary);
  font-size: 17px;
  color: var(--ink, #030712);
  outline: none;
  transition: border-color var(--dur-base);
}

.ssrp-v2-input:focus,
.ssrp-v2-textarea:focus { border-color: var(--blue-400, #55bfea); }
.ssrp-v2-textarea { min-height: 200px; line-height: 1.6; resize: vertical; }

.ssrp-v2-submitrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1080px) {
  .ssrp-v2-board { grid-template-columns: 1fr; }
  .ssrp-v2-rail { position: static; }
  .ssrp-v2-panel--nav .ssrp-v2-rail__list { display: flex; flex-wrap: wrap; gap: 6px; }
  .ssrp-v2-panel--nav .ssrp-v2-rail__item { flex: 1 1 auto; }
}

@media (max-width: 767px) {
  .ssrp-bbp-v2 { padding: 0 12px 80px; }

  .ssrp-v2-hero { padding: 24px 20px; border-radius: var(--r-md); margin-top: 16px; }
  .ssrp-v2-hero__title { font-size: 30px; }
  .ssrp-v2-hero__sub { font-size: 16px; }
  .ssrp-v2-hero__top { flex-direction: column; align-items: stretch; gap: 20px; }
  .ssrp-v2-hero__actions { flex-direction: column; align-items: stretch; }
  .ssrp-v2-search { min-width: 0; }
  .ssrp-v2-hero__stats { gap: 12px; font-size: 15px; }
  .ssrp-v2-hero__stat--last { margin-left: 0; }
  .ssrp-v2-hero__mark { width: 220px; top: -50px; right: -40px; }

  .ssrp-v2-filters__group { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .ssrp-v2-filters__group::-webkit-scrollbar { display: none; }
  .ssrp-v2-filter { flex: 0 0 auto; }

  .ssrp-v2-row,
  .ssrp-v2-waitcard { flex-wrap: wrap; padding: 18px; }
  .ssrp-v2-row__stats { flex-direction: row; width: 100%; justify-content: flex-start; gap: 18px; }
  .ssrp-v2-waitcard__side { flex-direction: row; width: 100%; align-items: center; justify-content: space-between; }
  .ssrp-v2-row__title, .ssrp-v2-waitcard__title { font-size: 19px; }

  .ssrp-v2-thread__title, .ssrp-v2-compose__title { font-size: 28px; }
  .ssrp-v2-post { padding: 20px; }
  .ssrp-v2-thread__meta-actions { margin-left: 0; width: 100%; }
  .ssrp-v2-rooms { grid-template-columns: 1fr; }
  .ssrp-v2-care { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   Specificity guards

   forum.css carries `.ssrp-bbp h1, .ssrp-bbp h2, .ssrp-bbp h3, .ssrp-bbp h4 {
   color: var(--text-heading-primary) }` at (0,1,1), which outranks a single
   v2 class. On the dark hero that painted the headline ink-on-ink and it
   vanished entirely. Scope under .ssrp-bbp-v2 to win cleanly rather than
   reaching for !important.
   ============================================================================ */
.ssrp-bbp-v2 .ssrp-v2-hero__title,
.ssrp-bbp-v2 .ssrp-v2-hero .ssrp-v2-eyebrow {
  color: var(--gray-50, #f8fafc);
}

.ssrp-bbp-v2 .ssrp-v2-hero .ssrp-v2-eyebrow {
  color: var(--blue-400, #55bfea);
}

.ssrp-bbp-v2 .ssrp-v2-digest__title {
  color: var(--gray-50, #f8fafc);
}

.ssrp-bbp-v2 .ssrp-v2-thread__title,
.ssrp-bbp-v2 .ssrp-v2-compose__title,
.ssrp-bbp-v2 .ssrp-v2-row__title,
.ssrp-bbp-v2 .ssrp-v2-waitcard__title {
  color: var(--ink, #030712);
}

.ssrp-bbp-v2 .ssrp-v2-sectionhead h2 {
  color: var(--gray-500, #6b7280);
}

/* Theme/Divi h2 padding throws the heading off the rule line. */
.ssrp-bbp-v2 .ssrp-v2-sectionhead > h2 {
  padding-bottom: 0;
}

.ssrp-bbp-v2 .ssrp-v2-sectionhead--wait h2 {
  color: var(--orange-600, #ed3809);
}

.ssrp-bbp-v2 .ssrp-v2-step__head h2 {
  color: var(--ink, #030712);
}

/* forum.css also zeroes heading margins under .ssrp-bbp; the v2 hero relies on
   its own rhythm. */
.ssrp-bbp-v2 .ssrp-v2-hero__title { margin: 12px 0 0; }
.ssrp-bbp-v2 .ssrp-v2-thread__title { margin: 16px 0 0; }
.ssrp-bbp-v2 .ssrp-v2-compose__title { margin: 20px 0 0; }

/* The overflow tag chips ship with the `hidden` attribute, but
   .ssrp-v2-tagchip is display:inline-flex, which silently outranks it — the
   whole tail rendered. Pair every display rule with an explicit [hidden]. */
.ssrp-v2-tagchip[hidden],
.ssrp-bbp-v2 [hidden] {
  display: none !important;
}

/* Room card name/description are spans (so the whole card can be a <label>);
   they need to stack. */
.ssrp-bbp-v2 .ssrp-v2-room__body,
.ssrp-bbp-v2 .ssrp-v2-room__name,
.ssrp-bbp-v2 .ssrp-v2-room__desc {
  display: block;
}

/* Grid and flex children default to min-width:auto, so a 1fr column refuses to
   shrink below its widest child's min-content — the nowrap filter pills forced
   the whole board wider than a phone viewport. */
.ssrp-v2-board > *,
.ssrp-v2-rail,
.ssrp-v2-main,
.ssrp-v2-row__body,
.ssrp-v2-prompt__text {
  min-width: 0;
}

.ssrp-v2-board {
  max-width: 100%;
}

.ssrp-bbp-v2 .ssrp-v2-tagcloud {
  min-width: 0;
}

/* ============================================================================
   Compose spacing pass

   Measured before changing: fields sat 16px apart while their own label sat
   8px above its input — only 2:1, so the label read as belonging to the field
   above as much as the one below. Widen the between-field gap so each
   label+input reads as one unit, and give the final action row room plus a
   hairline to sit against.
   ============================================================================ */
/* First field after a numbered step heading gets the same 20px the rooms and
   tag panel get, rather than inheriting the between-field gap. */
.ssrp-bbp-v2 .ssrp-v2-step__head + .ssrp-v2-field {
  margin-top: 20px;
}

/* Tag groups: a touch more air between a group label and the row above it. */
/* Rail items no longer carry an icon, so the name should sit flush left. */

/* ============================================================================
   Numerals, tags and room cards — refinement pass
   ============================================================================ */

/* Counts were 15px/700 at 0.6 opacity, which read heavier than the forum names
   beside them. Smaller, lighter, and tabular so the column edge lines up. */
.ssrp-bbp-v2 .ssrp-v2-rail__count {
  font-size: 13px;
  font-weight: 600;
  opacity: 1;
  color: var(--gray-400, #9ca3af);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
}

.ssrp-bbp-v2 .ssrp-v2-rail__item.is-active .ssrp-v2-rail__count {
  color: var(--gray-400, #9ca3af);
}

.ssrp-bbp-v2 .ssrp-v2-hero__stat strong,
.ssrp-bbp-v2 .ssrp-v2-row__stat,
.ssrp-bbp-v2 .ssrp-v2-row__stat strong,
.ssrp-bbp-v2 .ssrp-v2-thread__meta strong,
.ssrp-bbp-v2 .ssrp-v2-filter__badge,
.ssrp-bbp-v2 .ssrp-v2-tagbar__n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Row stat numerals were the same size as the label text, so 9 replies and
   128 views competed with each other. */
.ssrp-bbp-v2 .ssrp-v2-row__stat {
  font-size: 14px;
}

.ssrp-bbp-v2 .ssrp-v2-row__stat strong {
  font-size: 16px;
  font-weight: 700;
}

/* --- Tag spacing ---------------------------------------------------------- */
/* Mini tags on a discussion row need room from the forum name and each other. */
/* --- Room cards, now without a leading glyph ------------------------------ */
.ssrp-bbp-v2 .ssrp-v2-room__check {
  margin-top: 2px;
}

/* ============================================================================
   Form controls and avatars
   ============================================================================ */

/* The theme sets padding:2px on text inputs, which squashed the Title field to
   26px beside a 200px textarea. Raise specificity and pin the height so the
   two controls read as the same family. */
.ssrp-bbp-v2 input.ssrp-v2-input,
.ssrp-bbp-v2 .ssrp-v2-field input[type="text"] {
  padding: 14px 16px;
  min-height: 52px;
  line-height: 1.4;
  border-radius: var(--r-md);
  border: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-0, #fff);
  font-family: var(--font-primary);
  font-size: 17px;
  color: var(--ink, #030712);
  box-shadow: none;
}

.ssrp-bbp-v2 input.ssrp-v2-input:focus,
.ssrp-bbp-v2 .ssrp-v2-field input[type="text"]:focus {
  border-color: var(--blue-400, #55bfea);
  outline: none;
  box-shadow: none;
}

.ssrp-bbp-v2 .ssrp-v2-textarea {
  border-radius: var(--r-md);
  padding: 14px 16px;
}

/* Step heading to its content: steps 1 and 2 sat at 16px while step 3 sat at
   20px. Unify. */
.ssrp-bbp-v2 .ssrp-v2-rooms,
.ssrp-bbp-v2 .ssrp-v2-tagpanel,
.ssrp-bbp-v2 .ssrp-v2-step__head + .ssrp-v2-field {
  margin-top: 20px;
}

/* --- Avatars: real photo when the member has one ------------------------- */
.ssrp-bbp-v2 .ssrp-v2-avatar.has-photo {
  background: var(--gray-200, #e5e7eb);
}

.ssrp-bbp-v2 .ssrp-v2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-pill);
  display: block;
}

/* ============================================================================
   Pagination, forms, search dropdown, card links, profile & tag views
   ============================================================================ */

/* --- Pagination (was completely unstyled) -------------------------------- */
.ssrp-bbp-v2 .ssrp-v2-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--gray-500, #6b7280);
}

.ssrp-bbp-v2 .ssrp-v2-pagination .bbp-pagination,
.ssrp-bbp-v2 .ssrp-v2-pagination .bbp-pagination-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ssrp-bbp-v2 .ssrp-v2-pagination .bbp-pagination-count {
  font-size: 15px;
  color: var(--gray-500, #6b7280);
}

.ssrp-bbp-v2 .ssrp-v2-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-0, #fff);
  color: var(--gray-700, #374151);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.ssrp-bbp-v2 .ssrp-v2-pagination .page-numbers:hover {
  border-color: var(--blue-400, #55bfea);
  color: var(--blue-700, #1577b8);
  text-decoration: none;
}

.ssrp-bbp-v2 .ssrp-v2-pagination .page-numbers.current {
  background: var(--ink, #030712);
  border-color: var(--ink, #030712);
  color: var(--gray-50, #f8fafc);
}

.ssrp-bbp-v2 .ssrp-v2-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* --- The reply form inside the v2 thread --------------------------------- */
.ssrp-bbp-v2 .ssrp-v2-replybox form,
.ssrp-bbp-v2 .ssrp-v2-replybox fieldset {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

.ssrp-bbp-v2 .ssrp-v2-replybox legend {
  display: none;
}

.ssrp-bbp-v2 .ssrp-v2-replybox textarea,
.ssrp-bbp-v2 .ssrp-v2-replybox input[type="text"] {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-0, #fff);
  padding: 14px 16px;
  min-height: 52px;
  font-family: var(--font-primary);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink, #030712);
  box-shadow: none;
}

.ssrp-bbp-v2 .ssrp-v2-replybox textarea {
  min-height: 160px;
  resize: vertical;
}

.ssrp-bbp-v2 .ssrp-v2-replybox textarea:focus,
.ssrp-bbp-v2 .ssrp-v2-replybox input[type="text"]:focus {
  border-color: var(--blue-400, #55bfea);
  outline: none;
}

.ssrp-bbp-v2 .ssrp-v2-replybox button,
.ssrp-bbp-v2 .ssrp-v2-replybox input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  margin-top: 16px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--blue-400, #55bfea);
  color: var(--ink, #030712);
  font-family: var(--font-secondary, "Public Sans", sans-serif);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.ssrp-bbp-v2 .ssrp-v2-replybox .bbp-template-notice {
  border-radius: var(--r-md);
  margin-bottom: 16px;
}

/* bbPress notices on the compose screen */
.ssrp-bbp-v2 .bbp-template-notice {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--orange-200, #ffcba9);
  background: var(--orange-50, #fff5ed);
  color: var(--orange-800, #9c2010);
  font-size: 15px;
  line-height: 1.5;
}

.ssrp-bbp-v2 .bbp-template-notice p { margin: 0; }
.ssrp-bbp-v2 .bbp-template-notice.info {
  border-color: var(--blue-200, #b6eaf8);
  background: var(--blue-50, #ebfcff);
  color: var(--blue-800, #0e527f);
}

/* --- Hero search dropdown ------------------------------------------------ */
.ssrp-v2-search { position: relative; }

.ssrp-v2-search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 380px;
  overflow-y: auto;
  border-radius: var(--r-md);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  box-shadow: 0 12px 32px rgba(3, 7, 18, 0.18);
  padding: 6px;
}

.ssrp-v2-search__results[hidden] { display: none; }

.ssrp-v2-search__hit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink, #030712);
}

.ssrp-v2-search__hit + .ssrp-v2-search__hit { border-top: 1px solid var(--gray-100, #f3f4f6); }
.ssrp-v2-search__hit:hover { background: var(--gray-100, #f3f4f6); text-decoration: none; }
.ssrp-v2-search__hit-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.ssrp-v2-search__hit-forum { font-family: var(--font-condensed); font-size: 14px; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-600, #1995e2); }
.ssrp-v2-search__empty { padding: 14px; font-size: 15px; color: var(--gray-500, #6b7280); text-align: center; }

/* --- Cards are now <article> with a linked title -------------------------- */
.ssrp-bbp-v2 [data-cardlink] { cursor: pointer; }

.ssrp-bbp-v2 .ssrp-v2-card__link {
  color: inherit;
  text-decoration: none;
}

.ssrp-bbp-v2 .ssrp-v2-card__link:hover {
  color: var(--blue-700, #1577b8);
  text-decoration: none;
}

.ssrp-bbp-v2 .ssrp-v2-forumname:hover { color: var(--blue-700, #1577b8); text-decoration: none; }

/* --- Tag archive: forum switch row ---------------------------------------- */
.ssrp-v2-switchrow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  width: fit-content;
  max-width: 100%;
}

/* --- Member profile ------------------------------------------------------- */
.ssrp-v2-userhead {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.ssrp-v2-userhead__text { min-width: 0; }
.ssrp-v2-userhead .ssrp-v2-thread__title { margin: 0; }

.ssrp-v2-userhead__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--gray-500, #6b7280);
}

.ssrp-bbp-v2 .ssrp-v2-avatar--xl {
  width: 84px;
  height: 84px;
  font-size: 26px;
}

.ssrp-v2-userbody {
  margin-top: 28px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--gray-0, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
}

.ssrp-v2-userbody #bbpress-forums { font-size: 1rem; line-height: 1.6; }
.ssrp-v2-userbody a { color: var(--blue-600, #1995e2); }

/* --- Accessible focus ----------------------------------------------------- */
.ssrp-bbp-v2 a:focus-visible,
.ssrp-bbp-v2 button:focus-visible,
.ssrp-bbp-v2 input:focus-visible,
.ssrp-bbp-v2 textarea:focus-visible {
  outline: 2px solid var(--blue-500, #2aace2);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .ssrp-v2-userhead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ssrp-v2-userbody { padding: 18px; }
  .ssrp-v2-switchrow { overflow-x: auto; flex-wrap: nowrap; }
  .ssrp-v2-switchrow .ssrp-v2-filter { flex: 0 0 auto; }
}

/* ============================================================================
   Hero watermark clipping

   The hero used to carry `overflow: hidden` so the oversized hexagon mark got
   trimmed at its rounded corners. That also clipped the search dropdown, which
   is absolutely positioned inside the hero — results were cut to a sliver.
   The mark now clips itself in a dedicated layer so the hero can overflow.
   ============================================================================ */
.ssrp-v2-hero__markwrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: 0;
}

.ssrp-bbp-v2 .ssrp-v2-hero__mark {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 340px;
  opacity: 0.07;
  color: #fff;
  pointer-events: none;
}

/* Hero content sits above the watermark layer.

   These two must NOT share a z-index. `__top` carries z-index, which makes it
   a stacking context — so the search dropdown's z-index is resolved *inside*
   `__top` and cannot compete with `__stats` directly. As siblings at the same
   level the later one (`__stats`) would win and paint its text straight
   through the results panel. Rank `__top` above `__stats` instead. */
.ssrp-v2-hero__top {
  position: relative;
  z-index: 5;
}

.ssrp-v2-hero__stats {
  position: relative;
  z-index: 1;
}

/* The dropdown must clear the hero and anything after it. */
.ssrp-v2-hero__actions { position: relative; z-index: 5; }
.ssrp-v2-search { position: relative; z-index: 5; }
.ssrp-v2-search__results { z-index: 80; }

@media (max-width: 767px) {
  .ssrp-v2-hero__markwrap { border-radius: var(--r-md); }
  /* Keep the panel inside the viewport on a phone. */
  .ssrp-v2-search__results { max-height: 60vh; }
}

/* ============================================================================
   Profile: contain bbPress's unresponsive markup

   content-single-user is delegated to bbPress, whose own CSS puts
   `white-space: nowrap` on .display-name. On a phone that pushed past the
   viewport (right edge 505px in a 375px window) and widened the whole
   document, dragging the footer out with it — the only v2 view that
   overflowed on mobile.

   Let the name wrap, and make the delegated block scroll inside itself as a
   backstop so anything else bbPress adds later cannot widen the page.
   ============================================================================ */
.ssrp-v2-userbody {
  overflow-x: auto;
  max-width: 100%;
}

.ssrp-v2-userbody .display-name,
.ssrp-v2-userbody #bbpress-forums .display-name {
  white-space: normal;
  overflow-wrap: anywhere;
}

.ssrp-v2-userbody #bbpress-forums,
.ssrp-v2-userbody #bbpress-forums * {
  max-width: 100%;
  min-width: 0;
}

.ssrp-v2-userbody img {
  height: auto;
}

@media (max-width: 767px) {
  .ssrp-v2-userbody #bbpress-forums div.bbp-user-section,
  .ssrp-v2-userbody #bbpress-forums #bbp-user-navigation,
  .ssrp-v2-userbody #bbpress-forums #bbp-user-body {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================================================
   Membership tier badges

   Scheme A is canonical (confirmed by Marcus):
     SSRP Certified  orange  #FF8C00
     SSRP Fellow     navy    #1E3A8A
     SSRP Faculty    black   #000000
     SSRP Staff      green   #059669

   Shape: a coloured rounded square holding the white SSRP emblem, with the
   full tier name beside it. Fellowship Candidate is intentionally not styled —
   it is excluded at the render layer for now.
   ============================================================================ */
.ssrp-v2-tier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  --tier-color: var(--gray-500, #6b7280);
  color: var(--tier-color);
}

.ssrp-v2-tier__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ssrp-v2-tier__icon svg,
.ssrp-v2-tier__icon .ssrp-icon {
  display: block;
  width: 20px;
  height: 20px;
}

/* The theme's emblem hardcodes fill="white" as a presentation attribute, and
   the bundled fallback uses currentColor. A CSS fill beats the attribute, so
   this one rule tints either source to the tier colour. */
.ssrp-v2-tier__icon svg path,
.ssrp-v2-tier__icon .ssrp-icon path {
  fill: var(--tier-color);
}

.ssrp-v2-tier__label {
  font-family: var(--font-secondary, "Public Sans", sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--tier-color);
  white-space: nowrap;
}

/* Founder reuses the SSRP signature blue, which Scheme A had assigned to
   Fellowship Candidate — a tier we do not render. */
.ssrp-v2-tier--founder   { --tier-color: #1995E2; }
.ssrp-v2-tier--certified { --tier-color: #FF8C00; }
.ssrp-v2-tier--fellow    { --tier-color: #1E3A8A; }
.ssrp-v2-tier--faculty   { --tier-color: #000000; }
.ssrp-v2-tier--staff     { --tier-color: #059669; }

/* Sits under the name, below credentials, alongside any specialty. */
.ssrp-bbp-v2 .ssrp-v2-post__sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  /* No square any more, so the badge can sit up close to the name. */
  margin-top: 5px;
}

.ssrp-v2-post__specialty {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--gray-600, #4b5563);
}

/* ============================================================================
   Reply form: strip bbPress's own frame

   bbPress wraps the reply form in .bbp-reply-form with its own border, padding
   and shadow. Inside .ssrp-v2-replybox that stacked a second box inside ours.
   ============================================================================ */
.ssrp-v2-replybox .bbp-reply-form {
  border: unset;
  padding: 0;
  box-shadow: unset;
}

.ssrp-v2-replybox .bbp-reply-form fieldset,
.ssrp-v2-replybox fieldset.bbp-form {
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: transparent;
}

@media (max-width: 767px) {
  .ssrp-v2-tier__icon svg,
  .ssrp-v2-tier__icon .ssrp-icon { width: 18px; height: 18px; }
  .ssrp-v2-tier__label { font-size: 13px; }
}