/* ===========================================================================
   Savepoint — bbPress and BuddyPress
   ---------------------------------------------------------------------------
   Loaded only when one of those plugins is active, so an ordinary page does not
   carry three hundred rules it will never use.

   STYLING ONLY. Not one of these plugins' templates is overridden, which is the
   whole point: updating bbPress or BuddyPress cannot break this design, because
   this design is a stylesheet sitting on top of their markup rather than a fork
   of it. The cost is that a few of their layouts are tables-in-spirit and cannot
   be reshaped from CSS alone; where that bites, the comment says so.

   Tokens come from style.css. Nothing here invents a colour.
   =========================================================================== */

/* ---------------------------------------------------------------- shared --- */

#bbpress-forums,
#buddypress {
  font-family: var(--sp-body);
  font-size: 16px;
  color: var(--sp-title);
  margin: 0;
}

#bbpress-forums a,
#buddypress a { color: var(--sp-accent); }
#bbpress-forums a:hover,
#buddypress a:hover { color: var(--sp-title); }

/* Both plugins ship their own button look. One button style per site. */
#bbpress-forums button,
#bbpress-forums input[type="submit"],
#buddypress button,
#buddypress input[type="submit"],
#buddypress a.button,
#buddypress .generic-button a,
#buddypress div.item-list-tabs ul li.selected a {
  font-family: var(--sp-body);
}
#buddypress a.button,
#buddypress .generic-button a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 22px;
  background: none; color: var(--sp-title);
  border: 1px solid var(--sp-rail); border-radius: 100px;
  font-size: 14px; font-weight: 500;
}
#buddypress a.button:hover,
#buddypress .generic-button a:hover {
  background: rgba(255, 244, 230, 0.05); color: var(--sp-title);
}

/* Avatars are square with a small radius everywhere, like the dashboard's own
   row icons. Circles belong to the swatches and nothing else. */
#bbpress-forums img.avatar,
#buddypress img.avatar {
  border-radius: 4px; border: 1px solid var(--sp-rail-soft);
  background: var(--sp-raised);
}

/* Notices. Three colours by role, each differing in lightness as well as hue so
   they are not told apart by hue alone. */
#bbpress-forums div.bbp-template-notice,
#buddypress div#message {
  border: 1px solid var(--sp-rail-soft);
  border-left: 3px solid var(--sp-accent);
  border-radius: 4px;
  background: rgba(255, 214, 158, 0.06);
  color: var(--sp-title);
  padding: 16px 20px; margin: 0 0 28px;
}
#bbpress-forums div.bbp-template-notice p,
#buddypress div#message p { margin: 0; font-size: 15px; }
#bbpress-forums div.bbp-template-notice.error,
#buddypress div#message.error {
  border-left-color: #e8a0a0; background: rgba(232, 160, 160, 0.08);
}
#buddypress div#message.updated {
  border-left-color: var(--sp-cool); background: rgba(143, 199, 232, 0.08);
}

/* ===========================================================================
   bbPress — breadcrumb and search
   =========================================================================== */
#bbpress-forums div.bbp-breadcrumb { margin: 0 0 24px; }
#bbpress-forums div.bbp-breadcrumb p { margin: 0; font-size: 13px; color: var(--sp-desc); }
#bbpress-forums div.bbp-breadcrumb .bbp-breadcrumb-sep { padding: 0 8px; opacity: 0.5; }

#bbpress-forums #bbp-search-form { margin: 0 0 28px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
#bbpress-forums #bbp-search-form label { margin: 0; }
#bbpress-forums #bbp-search-form input[type="search"] { min-width: 240px; }

/* ===========================================================================
   bbPress — the forum index
   ---------------------------------------------------------------------------
   The design: a section header in small amber capitals, then one row per
   subforum with the topic count and the freshness column on the right. bbPress
   nests subforums inside the parent row's description, so the parent row is
   treated as the section header rather than as a row.
   =========================================================================== */
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-lead-topic {
  background: none;
  border: 1px solid var(--sp-rail-soft);
  border-radius: var(--sp-radius);
  margin: 0 0 36px;
  overflow: hidden;
}

/* The column header strip. */
#bbpress-forums li.bbp-header {
  background: rgba(255, 244, 230, 0.03);
  border-bottom: 1px solid var(--sp-rail);
  color: var(--sp-accent);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
  padding: 14px 20px;
}
#bbpress-forums li.bbp-header a { color: var(--sp-accent); }

#bbpress-forums li.bbp-footer {
  background: rgba(255, 244, 230, 0.02);
  border-top: 1px solid var(--sp-rail-soft);
  color: var(--sp-desc);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 20px;
}

/* A row. */
#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic {
  border-top: 1px solid var(--sp-rail-soft);
  padding: 20px;
  transition: background 200ms ease;
}
#bbpress-forums li.bbp-body ul.forum:first-child,
#bbpress-forums li.bbp-body ul.topic:first-child { border-top: none; }
#bbpress-forums li.bbp-body ul.forum:hover,
#bbpress-forums li.bbp-body ul.topic:hover { background: rgba(255, 244, 230, 0.025); }

/* bbPress alternates a background on odd and even rows. One ground here. */
#bbpress-forums div.even, #bbpress-forums div.odd,
#bbpress-forums ul.even, #bbpress-forums ul.odd { background: none; }

#bbpress-forums li.bbp-forum-info,
#bbpress-forums li.bbp-topic-title { min-width: 0; }

#bbpress-forums div.bbp-forum-title h3,
#bbpress-forums div.bbp-topic-title h3,
#bbpress-forums li.bbp-forum-info > a,
#bbpress-forums li.bbp-topic-title > a {
  font-family: var(--sp-display);
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--sp-title);
  margin: 0;
}
#bbpress-forums li.bbp-forum-info > a:hover,
#bbpress-forums li.bbp-topic-title > a:hover { color: var(--sp-accent); }

#bbpress-forums div.bbp-forum-content,
#bbpress-forums p.bbp-topic-meta {
  margin: 6px 0 0;
  font-size: 14px; line-height: 1.6; color: var(--sp-desc);
}

/* Counts. Tabular figures so a column of them lines up. */
#bbpress-forums li.bbp-forum-topic-count,
#bbpress-forums li.bbp-forum-reply-count,
#bbpress-forums li.bbp-topic-voice-count,
#bbpress-forums li.bbp-topic-reply-count {
  font-family: var(--sp-display);
  font-size: 17px; color: var(--sp-title);
  font-variant-numeric: tabular-nums;
}

/* Freshness column. */
#bbpress-forums li.bbp-forum-freshness,
#bbpress-forums li.bbp-topic-freshness {
  font-size: 13px; color: var(--sp-desc);
}
#bbpress-forums li.bbp-forum-freshness a,
#bbpress-forums li.bbp-topic-freshness a { font-size: 14px; }

/* Sticky and closed topics, marked by more than colour. */
#bbpress-forums li.bbp-body ul.topic.sticky,
#bbpress-forums li.bbp-body ul.topic.super-sticky {
  background: rgba(255, 214, 158, 0.05);
  border-left: 2px solid var(--sp-accent);
}
#bbpress-forums li.bbp-body ul.topic.status-closed li.bbp-topic-title > a { color: var(--sp-desc); }
#bbpress-forums li.bbp-body ul.topic.status-closed li.bbp-topic-title > a::after {
  content: " · closed";
  font-family: var(--sp-body);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sp-cool);
}

/* Subforum list inside a parent row. */
#bbpress-forums .bbp-forums-list {
  margin: 12px 0 0; padding: 0; border: none;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
#bbpress-forums .bbp-forums-list li {
  list-style: none; margin: 0; font-size: 13px; color: var(--sp-desc);
}

/* ===========================================================================
   bbPress — a topic
   =========================================================================== */
#bbpress-forums div.bbp-reply-header,
#bbpress-forums div.bbp-topic-header {
  background: rgba(255, 244, 230, 0.02);
  border-bottom: 1px solid var(--sp-rail-soft);
  padding: 12px 20px;
  font-size: 12px; color: var(--sp-desc);
}

#bbpress-forums div.bbp-reply-author,
#bbpress-forums div.bbp-topic-author { padding: 24px 20px; }
#bbpress-forums div.bbp-reply-author a.bbp-author-name,
#bbpress-forums div.bbp-topic-author a.bbp-author-name {
  font-family: var(--sp-body);
  font-size: 15px; font-weight: 500; color: var(--sp-title);
  display: block; margin-top: 10px;
}
#bbpress-forums div.bbp-author-role {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sp-accent); margin-top: 4px;
}
#bbpress-forums div.bbp-reply-author img.avatar,
#bbpress-forums div.bbp-topic-author img.avatar {
  width: 56px; height: 56px; float: none; margin: 0;
}

#bbpress-forums div.bbp-reply-content,
#bbpress-forums div.bbp-topic-content { padding: 24px 24px 24px 0; }
#bbpress-forums div.bbp-reply-content p,
#bbpress-forums div.bbp-topic-content p { font-size: 15px; line-height: 1.75; color: var(--sp-title); }
#bbpress-forums div.bbp-reply-content blockquote,
#bbpress-forums div.bbp-topic-content blockquote {
  margin: 1.4em 0; padding: 14px 18px;
  background: var(--sp-deep); border-left: 2px solid var(--sp-accent); border-radius: 3px;
  color: var(--sp-desc);
}
#bbpress-forums div.bbp-reply-content pre,
#bbpress-forums div.bbp-topic-content pre {
  background: var(--sp-deep); border-left: 2px solid var(--sp-accent);
  border-radius: 3px; padding: 16px 18px; overflow-x: auto;
}
#bbpress-forums div.bbp-reply-content code,
#bbpress-forums div.bbp-topic-content code {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 13px; background: var(--sp-deep); padding: 2px 6px; border-radius: 3px;
}

#bbpress-forums span.bbp-admin-links { font-size: 12px; }
#bbpress-forums span.bbp-admin-links a { color: var(--sp-desc); }
#bbpress-forums span.bbp-admin-links a:hover { color: var(--sp-accent); }

/* ===========================================================================
   bbPress — forms
   =========================================================================== */
#bbpress-forums div.bbp-the-content-wrapper { margin-bottom: 18px; }
#bbpress-forums fieldset.bbp-form {
  border: 1px solid var(--sp-rail); border-radius: var(--sp-radius);
  background: rgba(255, 214, 158, 0.03);
  padding: 28px; margin: 36px 0;
}
#bbpress-forums fieldset.bbp-form legend {
  font-family: var(--sp-display); font-size: 18px; font-weight: 700;
  color: var(--sp-title); padding: 0 10px;
}
#bbpress-forums div.bbp-submit-wrapper { margin-top: 18px; text-align: left; }

/* The visual editor's chrome, which arrives light by default. */
#bbpress-forums .wp-editor-container,
#bbpress-forums .quicktags-toolbar {
  background: var(--sp-deep);
  border-color: var(--sp-rail-soft);
}
#bbpress-forums .wp-switch-editor {
  background: var(--sp-raised); border-color: var(--sp-rail-soft);
  color: var(--sp-desc);
}

/* ===========================================================================
   bbPress and BuddyPress — pagination
   =========================================================================== */
#bbpress-forums div.bbp-pagination,
#buddypress div.pagination {
  padding: 18px 0; border: none; background: none;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
#bbpress-forums div.bbp-pagination-count,
#buddypress div.pag-count { font-size: 13px; color: var(--sp-desc); }
#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span.current,
#buddypress div.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--sp-rail-soft); border-radius: 6px;
  font-size: 14px; color: var(--sp-desc);
}
#bbpress-forums .bbp-pagination-links span.current,
#buddypress div.pagination .page-numbers.current {
  border-color: var(--sp-accent); color: var(--sp-deep); background: var(--sp-accent);
}

/* ===========================================================================
   BuddyPress — the profile header
   =========================================================================== */
#buddypress div#item-header {
  padding: 0 0 36px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--sp-rail-soft);
  display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end;
  overflow: visible;
}
#buddypress div#item-header-avatar { float: none; margin: 0; flex-shrink: 0; }
#buddypress div#item-header-avatar img.avatar {
  width: 112px; height: 112px; border-radius: 6px; margin: 0;
}
#buddypress div#item-header-content { float: none; margin: 0; flex: 999 1 300px; min-width: 0; }
#buddypress div#item-header-content h2,
#buddypress div#item-header-content h1 {
  font-family: var(--sp-display); font-size: clamp(28px, 4vw, 36px);
  font-weight: 900; letter-spacing: -0.02em; color: var(--sp-title);
  margin: 0 0 8px;
}
#buddypress div#item-header-content h2 a { color: var(--sp-title); }
#buddypress span.activity,
#buddypress div#item-meta { font-size: 14px; color: var(--sp-desc); }
#buddypress div#item-buttons { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
#buddypress div#item-buttons div { float: none; margin: 0; }

/* The primary action reads as primary. */
#buddypress div#item-buttons .friendship-button a,
#buddypress div#item-buttons .send-private-message a {
  background: var(--sp-accent); color: var(--sp-deep);
  border-color: transparent; font-weight: 600;
}
#buddypress div#item-buttons .friendship-button a:hover,
#buddypress div#item-buttons .send-private-message a:hover {
  background: #ffe4bd; color: var(--sp-deep);
}

/* ===========================================================================
   BuddyPress — the tab rail
   =========================================================================== */
#buddypress div.item-list-tabs {
  background: none; border: none; overflow: visible;
  border-bottom: 1px solid var(--sp-rail-soft);
  margin: 0 0 32px;
}
#buddypress div.item-list-tabs ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
#buddypress div.item-list-tabs ul li { float: none; margin: 0; }
#buddypress div.item-list-tabs ul li a {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  font-size: 14px; color: var(--sp-desc);
  border-bottom: 2px solid transparent;
}
#buddypress div.item-list-tabs ul li a:hover { color: var(--sp-title); }
#buddypress div.item-list-tabs ul li.current a,
#buddypress div.item-list-tabs ul li.selected a {
  color: var(--sp-title); background: none;
  border-bottom-color: var(--sp-accent);
}
#buddypress div.item-list-tabs ul li a span {
  background: var(--sp-raised); color: var(--sp-accent);
  border-radius: 100px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; min-width: 0;
}
#buddypress div.item-list-tabs ul li.current a span { background: var(--sp-accent); color: var(--sp-deep); }

/* ===========================================================================
   BuddyPress — the wall, which is the activity stream
   =========================================================================== */
#buddypress form#whats-new-form {
  border: 1px solid var(--sp-rail); border-radius: var(--sp-radius);
  background: rgba(255, 214, 158, 0.03);
  padding: 22px; margin: 0 0 34px;
}
#buddypress form#whats-new-form h5,
#buddypress form#whats-new-form #whats-new-content { margin: 0; }
#buddypress form#whats-new-form textarea { margin: 0 0 14px; }
#buddypress #whats-new-submit { margin: 0; }
#buddypress form#whats-new-form #whats-new-avatar { float: left; margin-right: 16px; }

#buddypress ul.activity-list { margin: 0; padding: 0; }
#buddypress ul.activity-list li.activity-item {
  border: none; border-top: 1px solid var(--sp-rail-soft);
  padding: 26px 0; margin: 0;
  display: flex; gap: 18px;
}
#buddypress ul.activity-list li.activity-item:first-child { border-top: none; padding-top: 0; }
#buddypress li.activity-item div.activity-avatar { float: none; margin: 0; flex-shrink: 0; }
#buddypress li.activity-item div.activity-avatar img.avatar { width: 44px; height: 44px; margin: 0; }
#buddypress li.activity-item div.activity-content { margin: 0; flex-grow: 1; min-width: 0; }
#buddypress div.activity-header p { margin: 0 0 8px; font-size: 14px; color: var(--sp-desc); }
#buddypress div.activity-header a { font-weight: 500; color: var(--sp-title); }
#buddypress div.activity-inner p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--sp-title); }

#buddypress div.activity-meta { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 16px; }
#buddypress div.activity-meta a {
  font-size: 13px; color: var(--sp-desc);
  min-height: 44px; display: inline-flex; align-items: center;
  background: none; border: none; padding: 0;
}
#buddypress div.activity-meta a:hover { color: var(--sp-accent); }

#buddypress div.activity-comments {
  margin: 18px 0 0; padding: 0 0 0 20px;
  border-left: 1px solid var(--sp-rail-soft);
}
#buddypress div.activity-comments ul { margin: 0; padding: 0; }
#buddypress div.activity-comments li { border: none; padding: 14px 0; }
#buddypress div.activity-comments form.ac-form { background: none; border: none; padding: 14px 0 0; }
#buddypress div.activity-comments div.ac-reply-content p { font-size: 14px; line-height: 1.7; }

/* ===========================================================================
   BuddyPress — members, friends, messages
   =========================================================================== */
#buddypress ul.item-list { margin: 0; padding: 0; border: none; }
#buddypress ul.item-list li {
  border: none; border-bottom: 1px solid var(--sp-rail-soft);
  padding: 20px 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
#buddypress ul.item-list li div.item-avatar { float: none; margin: 0; flex-shrink: 0; }
#buddypress ul.item-list li div.item-avatar img.avatar { width: 48px; height: 48px; margin: 0; }
#buddypress ul.item-list li div.item { margin: 0; flex: 999 1 220px; min-width: 0; }
#buddypress ul.item-list li div.item-title,
#buddypress ul.item-list li h2 {
  font-family: var(--sp-body); font-size: 16px; font-weight: 500; margin: 0;
}
#buddypress ul.item-list li div.item-title a { color: var(--sp-title); }
#buddypress ul.item-list li span.activity,
#buddypress ul.item-list li div.item-meta { font-size: 13px; color: var(--sp-desc); margin: 4px 0 0; }
#buddypress ul.item-list li div.action { float: none; margin: 0; position: static; }

/* Message threads: unread has to be visible without relying on weight alone. */
#buddypress table#message-threads { width: 100%; border-collapse: collapse; }
#buddypress table#message-threads th,
#buddypress table#message-threads td {
  border: none; border-bottom: 1px solid var(--sp-rail-soft);
  padding: 16px 12px; font-size: 15px; background: none;
}
#buddypress table#message-threads tr.unread td {
  background: rgba(255, 214, 158, 0.05);
}
#buddypress table#message-threads tr.unread td.thread-info a { color: var(--sp-title); font-weight: 600; }
#buddypress table#message-threads td.thread-info p { margin: 4px 0 0; font-size: 13px; color: var(--sp-desc); }

/* A single conversation. */
#buddypress div.message-box {
  border-top: 1px solid var(--sp-rail-soft);
  padding: 24px 0; margin: 0;
  display: flex; gap: 18px;
}
#buddypress div.message-box div.message-metadata { float: none; margin: 0; flex-shrink: 0; }
#buddypress div.message-box img.avatar { width: 44px; height: 44px; margin: 0; }
#buddypress div.message-content { margin: 0; flex-grow: 1; min-width: 0; }

/* ===========================================================================
   NARROW SCREENS
   ---------------------------------------------------------------------------
   Both plugins position several of these columns absolutely or as floats at
   small widths. These rules put them back into normal flow, which is the one
   place a stylesheet-only approach has to push hardest.
   =========================================================================== */
@media (max-width: 760px) {
  #bbpress-forums li.bbp-header,
  #bbpress-forums li.bbp-footer { padding: 12px 16px; }

  #bbpress-forums li.bbp-body ul.forum,
  #bbpress-forums li.bbp-body ul.topic {
    display: flex; flex-direction: column; gap: 10px; padding: 18px 16px;
  }
  #bbpress-forums li.bbp-forum-topic-count,
  #bbpress-forums li.bbp-forum-reply-count,
  #bbpress-forums li.bbp-topic-voice-count,
  #bbpress-forums li.bbp-topic-reply-count,
  #bbpress-forums li.bbp-forum-freshness,
  #bbpress-forums li.bbp-topic-freshness {
    float: none; width: auto; text-align: left; font-size: 14px;
  }

  #bbpress-forums div.bbp-reply-author,
  #bbpress-forums div.bbp-topic-author {
    display: flex; gap: 14px; align-items: center;
    padding: 18px 16px 0; text-align: left;
  }
  #bbpress-forums div.bbp-reply-author img.avatar,
  #bbpress-forums div.bbp-topic-author img.avatar { width: 40px; height: 40px; }
  #bbpress-forums div.bbp-reply-author a.bbp-author-name,
  #bbpress-forums div.bbp-topic-author a.bbp-author-name { margin: 0; }
  #bbpress-forums div.bbp-reply-content,
  #bbpress-forums div.bbp-topic-content { padding: 16px; margin: 0; }

  #buddypress div#item-header { gap: 20px; }
  #buddypress div#item-header-avatar img.avatar { width: 80px; height: 80px; }
  #buddypress ul.item-list li { gap: 14px; }
  #buddypress table#message-threads td.thread-options { white-space: nowrap; }
}