/*
 * Feedback board styling for community_topic_page.hbs and community_topic_list_page.hbs.
 * Visual language and tokens taken from docs.smseagle.eu (smseagle-docs, 7.00):
 * page bg #f5f8fa, white cards r16 + soft shadow, brand gradient hero, neutral pills.
 * Loaded as a theme asset from document_head.hbs (not merged into style.css). Everything is scoped under .fb.
 */
.fb {
  /* Tokens mirrored from docs.smseagle.eu :root */
  --fb-primary-50:  #f0f9ff;
  --fb-primary-100: #b3e5fc;
  --fb-primary-500: #399aeb;   /* --color-brand */
  --fb-primary-600: #2080d0;   /* --color-brand-strong / fg-brand-soft */
  --fb-primary-800: #144d7f;
  --fb-secondary-500: #6f6fe2; /* hero gradient end */
  --fb-neutral-50:  #f7f9fc;
  --fb-neutral-100: #eff4fa;
  --fb-neutral-200: #dde7f1;
  --fb-neutral-300: #c3d2e4;
  --fb-neutral-500: #4f6d8a;   /* body-subtle */
  --fb-neutral-600: #314c66;   /* body */
  --fb-neutral-700: #1c3750;
  --fb-neutral-800: #041f34;   /* heading */
  --fb-success-50:  #d9ffee;
  --fb-success-600: #007a59;
  --fb-warning-50:  #fff5ee;
  --fb-warning-600: #c27c07;
  --fb-danger-50:   #ffeeeb;
  --fb-danger-600:  #aa2200;
  --fb-bg: #f5f8fa;            /* --color-base-background */
  --fb-radius-card: 16px;
  --fb-radius: 8px;
  --fb-radius-sm: 6px;
  --fb-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --fb-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); /* tw shadow-lg, as docs cards */
  --fb-primary-700: #1a66a8;
  --fb-secondary-100: #eaeafb;
  --fb-secondary-200: #cbcbf5;

  /* Docs use Inter; falls back to the theme font if Inter is not loaded. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--fb-neutral-600);
  padding-top: 16px;
  padding-bottom: 56px;
}
/* Docs-like page background only on pages that contain the board. */
body:has(.fb) { background: #f5f8fa; }
.fb a { text-decoration: none; }
.fb a:hover { text-decoration: none; }
.fb .fb-muted { color: var(--fb-neutral-500); }
/* ---------- Hero header (docs landing banner) ---------- */
.fb .fb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 24px; }
.fb .fb-hero {
  position: relative; overflow: hidden;
  padding: 36px 40px; border-radius: var(--fb-radius-card);
  background: linear-gradient(to bottom right, var(--fb-primary-500) 0%, var(--fb-primary-500) 50%, var(--fb-secondary-500) 100%);
  color: #fff;
}
.fb .fb-hero > * { position: relative; z-index: 1; }
.fb .fb-hero::before {            /* dot grid on the right, fading left */
  content: ""; position: absolute; inset: 0 0 0 auto; width: 66%; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .22) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
          mask-image: linear-gradient(to left, #000, transparent);
}
.fb .fb-hero::after {             /* soft secondary blob bottom-right */
  content: ""; position: absolute; right: -40px; bottom: -128px; width: 320px; height: 320px; z-index: 0;
  border-radius: 50%; background: rgba(111, 111, 226, .6); filter: blur(64px); pointer-events: none;
}
.fb .fb-eyebrow {
  display: inline-flex; align-items: center; margin: 0 0 12px; padding: 4px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #fff;
}
.fb .fb-head__title { margin: 0 0 8px; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--fb-neutral-800); }
.fb .fb-hero .fb-head__title { color: #fff; }
.fb .fb-head__desc { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--fb-neutral-500); }
.fb .fb-hero .fb-head__desc { color: rgba(255, 255, 255, .92); }
.fb .fb-head__follow,
.fb .fb-head__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.fb .fb-hero .fb-muted { color: rgba(255, 255, 255, .85); }
.fb .fb-section-label {
  margin: 0 0 12px; padding: 0 4px;
  font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--fb-neutral-500);
}
/* ---------- Buttons & chips ---------- */
.fb .fb-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  border-radius: var(--fb-radius); border: 0;
  background: var(--fb-primary-500); color: #fff !important;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  transition: background .15s;
}
.fb .fb-btn:hover { background: var(--fb-primary-600); }
.fb .fb-btn--ghost { background: var(--fb-neutral-200); color: var(--fb-neutral-600) !important; }
.fb .fb-btn--ghost:hover { background: var(--fb-neutral-300); }
/* Buttons on the gradient: white primary, translucent secondary */
.fb .fb-hero .fb-btn { background: #fff; color: var(--fb-primary-600) !important; }
.fb .fb-hero .fb-btn:hover { background: var(--fb-primary-50); }
.fb .fb-hero .fb-btn--ghost { background: rgba(255, 255, 255, .15); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.fb .fb-hero .fb-btn--ghost:hover { background: rgba(255, 255, 255, .25); }
.fb .fb-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--fb-radius-sm);
  font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; vertical-align: middle;
  background: var(--fb-neutral-100); color: var(--fb-neutral-700);
}
.fb .fb-chip--internal { background: var(--fb-warning-50); color: var(--fb-warning-600); margin-right: 8px; }
.fb .fb-hero .fb-chip--internal { background: rgba(255, 255, 255, .2); color: #fff; }
.fb .fb-chip--official { background: var(--fb-success-50); color: var(--fb-success-600); }
/* ---------- Board switcher ---------- */
.fb .fb-boards { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.fb .fb-board {
  padding: 6px 12px; border-radius: var(--fb-radius);
  background: #fff; box-shadow: var(--fb-shadow);
  color: var(--fb-neutral-600); font-size: 13px; font-weight: 600;
  transition: color .15s, box-shadow .15s;
}
.fb .fb-board:hover { color: var(--fb-primary-600); box-shadow: var(--fb-shadow-hover); }
.fb .fb-board.is-active { background: var(--fb-primary-100); color: var(--fb-primary-700); box-shadow: none; }
/* docs sidebar "current" */
/* ---------- "Share an idea" bar ---------- */
.fb .fb-share {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 10px 10px 10px 14px;
  border-radius: var(--fb-radius-card); background: #fff; box-shadow: var(--fb-shadow);
  color: var(--fb-neutral-500) !important; transition: box-shadow .15s;
}
.fb .fb-share:hover { box-shadow: var(--fb-shadow-hover), 0 0 0 2px var(--fb-primary-100); }
.fb .fb-share__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--fb-radius); background: var(--fb-primary-50); color: var(--fb-primary-600);
}
.fb .fb-share__placeholder { flex: 1 1 auto; font-size: 15px; }
.fb .fb-share__btn { padding: 9px 16px; border-radius: var(--fb-radius); background: var(--fb-primary-500); color: #fff; font-weight: 600; font-size: 14px; }
.fb .fb-share:hover .fb-share__btn { background: var(--fb-primary-600); }
/* ---------- Toolbar: sort tabs + status filter ---------- */
.fb .fb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.fb .fb-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--fb-neutral-200); }
.fb .fb-tab { padding: 6px 12px; border-radius: var(--fb-radius-sm); color: var(--fb-neutral-500); font-size: 13px; font-weight: 600; }
.fb .fb-tab:hover { color: var(--fb-neutral-800); }
.fb .fb-tab.is-active { background: #fff; color: var(--fb-neutral-800); box-shadow: var(--fb-shadow); }
.fb .fb-select {
  display: inline-block; padding: 8px 30px 8px 12px; border-radius: var(--fb-radius);
  background: var(--fb-neutral-200); font-size: 13px; font-weight: 600; color: var(--fb-neutral-600); cursor: pointer;
}
/* ---------- Post list ---------- */
.fb .fb-list {
  list-style: none; margin: 0 0 24px; padding: 0;
  border-radius: var(--fb-radius-card); background: #fff; box-shadow: var(--fb-shadow); overflow: hidden;
}
.fb .fb-post { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--fb-neutral-100); transition: background .15s; }
.fb .fb-post:first-child { border-top: 0; }
.fb .fb-post:hover { background: var(--fb-neutral-50); }
.fb .fb-post--pinned { background: var(--fb-primary-50); }
.fb .fb-vote {
  flex: 0 0 48px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--fb-radius); background: var(--fb-neutral-100); color: var(--fb-neutral-500);
  transition: background .15s, color .15s;
}
.fb .fb-vote:hover { background: var(--fb-primary-50); color: var(--fb-primary-600); }
.fb .fb-vote__count { font-size: 16px; font-weight: 700; line-height: 1; color: var(--fb-neutral-800); }
.fb .fb-vote:hover .fb-vote__count { color: var(--fb-primary-600); }
.fb .fb-post__main { flex: 1 1 auto; min-width: 0; }
.fb .fb-post__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.fb .fb-post__title a { color: var(--fb-neutral-800); }
.fb .fb-post__title a:hover { color: var(--fb-primary-600); }
.fb .fb-pin { font-size: 12px; margin-right: 4px; }
.fb .fb-post__excerpt {
  margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--fb-neutral-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fb .fb-post__excerpt:empty { display: none; }
.fb .fb-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.fb .fb-comments { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding-top: 2px; font-size: 13px; color: var(--fb-neutral-500); }
.fb .fb-comments:hover { color: var(--fb-primary-600); }
/* ---------- Status chips (list) + Castor's native post-page badges ---------- */
.fb .fb-status,
.fb .post-planned,
.fb .post-not-planned,
.fb .post-completed,
.fb .post-answered {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--fb-radius-sm);
  font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.fb .fb-status::before,
.fb .post-planned::before,
.fb .post-not-planned::before,
.fb .post-completed::before,
.fb .post-answered::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.fb .fb-status--open { background: var(--fb-neutral-100); color: var(--fb-neutral-600); }
.fb .fb-status.post-planned,
.fb .post-planned { background: var(--fb-primary-50);  color: var(--fb-primary-600); }
.fb .fb-status.post-completed,
.fb .post-completed { background: var(--fb-success-50);  color: var(--fb-success-600); }
.fb .fb-status.post-not-planned,
.fb .post-not-planned { background: var(--fb-danger-50);   color: var(--fb-danger-600); }
.fb .fb-status.post-answered,
.fb .post-answered { background: var(--fb-warning-50);  color: var(--fb-warning-600); }
.fb .fb-empty { padding: 40px; text-align: center; color: var(--fb-neutral-500); background: #fff; border-radius: var(--fb-radius-card); box-shadow: var(--fb-shadow); }
/* ---------- Topic list page: board cards (docs device cards) ---------- */
.fb .fb-boards-grid {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.fb .fb-board-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px;
  border-radius: var(--fb-radius-card); background: #fff; box-shadow: var(--fb-shadow);
  transition: box-shadow .15s, transform .15s;
}
.fb .fb-board-card:hover { box-shadow: var(--fb-shadow-hover); }
.fb .fb-board-card:focus-within { box-shadow: var(--fb-shadow), 0 0 0 3px var(--fb-primary-50); }
.fb .fb-board-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fb-primary-600); }
.fb .fb-board-card__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.fb .fb-board-card__title a { color: var(--fb-primary-600); }
.fb .fb-board-card__title a::after { content: ""; position: absolute; inset: 0; }
/* stretched link */
.fb .fb-board-card__desc {
  flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.55; color: var(--fb-neutral-500);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fb .fb-board-card__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.fb .fb-board-card__stats span {
  padding: 2px 8px; border-radius: var(--fb-radius-sm); background: var(--fb-neutral-100);
  font-size: 12px; font-weight: 600; color: var(--fb-neutral-700);
}
.fb .fb-board-card__title .fb-chip--internal { margin: 0 0 0 8px; }
/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .fb .fb-head { flex-direction: column; gap: 16px; }
  .fb .fb-hero { padding: 32px 24px; }
  .fb .fb-head__title { font-size: 24px; }
  .fb .fb-post { gap: 12px; padding: 14px; }
  .fb .fb-vote { flex-basis: 42px; height: 50px; }
  .fb .fb-comments { display: none; }
  .fb .fb-share__placeholder { font-size: 14px; }
  .fb .fb-tabs { overflow-x: auto; max-width: 100%; }
  .fb .fb-tab { white-space: nowrap; }
  .fb .fb-boards { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; }
  .fb .fb-board { white-space: nowrap; }
}
/* =====================================================================
 * Shared card + small elements (new post page, post page)
 * ===================================================================== */
.fb .fb-card { background: #fff; border-radius: var(--fb-radius-card); box-shadow: var(--fb-shadow); padding: 24px; }
.fb .fb-eyebrow--light { background: var(--fb-primary-50); color: var(--fb-primary-600); box-shadow: inset 0 0 0 1px var(--fb-primary-100); }
.fb .fb-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--fb-neutral-100); }
.fb .fb-avatar--sm { width: 28px; height: 28px; }
.fb .fb-avatar--agent { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fb-primary-500); }
/* =====================================================================
 * New idea form (new_community_post_page.hbs)
 * Zendesk renders the inputs; we only style them inside .fb-form.
 * ===================================================================== */
.fb .fb-newpost__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.fb .fb-form .form-field { margin: 0 0 20px; }
.fb .fb-form .form-field > label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--fb-neutral-800); }
.fb .fb-form .form-field.required > label::after { content: " *"; color: var(--fb-danger-600); }
.fb .fb-form input[type="text"],
.fb .fb-form select,
.fb .fb-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; min-height: 42px;
  border: 1px solid var(--fb-neutral-300); border-radius: var(--fb-radius); background: #fff;
  font: inherit; font-size: 15px; color: var(--fb-neutral-800);
  transition: border-color .1s, box-shadow .1s;
}
.fb .fb-form input[type="text"]:hover,
.fb .fb-form select:hover,
.fb .fb-form textarea:hover { border-color: var(--fb-primary-600); }
.fb .fb-form input[type="text"]:focus,
.fb .fb-form select:focus,
.fb .fb-form textarea:focus {
  outline: none; border-color: var(--fb-primary-600); box-shadow: 0 0 0 3px var(--fb-primary-50);  /* docs .input */
}
/* Zendesk WYSIWYG: outer box + toolbar */
.fb .fb-form [class*="wysiwyg"],
.fb .fb-reply [class*="wysiwyg"] { border-radius: var(--fb-radius); }
.fb .fb-form .form-field [contenteditable="true"],
.fb .fb-reply [contenteditable="true"] { min-height: 200px; font-size: 15px; line-height: 1.6; color: var(--fb-neutral-800); }
.fb .fb-form .notification-error { margin-top: 6px; padding: 6px 10px; border-radius: var(--fb-radius-sm); background: var(--fb-danger-50); color: var(--fb-danger-600); font-size: 13px; border: 0; }
.fb .fb-suggestions { margin: -8px 0 20px; }
.fb .fb-suggestions:empty { display: none; }
.fb .fb-suggestions ul { list-style: none; margin: 0; padding: 8px; border-radius: var(--fb-radius); background: var(--fb-primary-50); }
.fb .fb-suggestions a { display: block; padding: 6px 8px; border-radius: var(--fb-radius-sm); color: var(--fb-primary-700); font-size: 14px; }
.fb .fb-suggestions a:hover { background: #fff; }
.fb .fb-form__footer { display: flex; justify-content: flex-end; padding-top: 4px; }
.fb .fb-tips__title { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--fb-neutral-800); }
.fb .fb-tips__list { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: tip; }
.fb .fb-tips__list li { counter-increment: tip; position: relative; padding: 0 0 12px 34px; font-size: 14px; line-height: 1.45; }
.fb .fb-tips__list li::before {
  content: counter(tip); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; background: var(--fb-primary-50); color: var(--fb-primary-700); font-size: 12px; font-weight: 700;
}
.fb .fb-tips__list strong { display: block; color: var(--fb-neutral-800); }
.fb .fb-tips__list span { color: var(--fb-neutral-500); }
.fb .fb-tips__note { margin: 0; padding: 12px; border-radius: var(--fb-radius); background: var(--fb-neutral-100); font-size: 13px; line-height: 1.5; color: var(--fb-neutral-600); }
/* =====================================================================
 * Post page (community_post_page.hbs)
 * ===================================================================== */
.fb .fb-postbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.fb .fb-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--fb-primary-600); }
.fb .fb-back:hover { color: var(--fb-primary-800); }
.fb .fb-postbar__right { display: flex; align-items: center; gap: 10px; }
.fb .fb-actions { font-size: 13px; color: var(--fb-neutral-500); }
.fb .fb-idea { display: flex; gap: 20px; padding: 28px; margin: 0 0 16px; }
.fb .fb-idea__vote,
.fb .fb-comment__vote { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fb .fb-idea__sum { font-size: 20px; font-weight: 700; color: var(--fb-neutral-800); line-height: 1.2; }
.fb .fb-comment__sum { font-size: 14px; font-weight: 700; color: var(--fb-neutral-700); }
/* Vote buttons: Zendesk renders empty <a>; draw chevrons with a mask. */
.fb .fb-vbtn {
  display: grid; place-items: center; width: 40px; height: 36px; border-radius: var(--fb-radius);
  background: var(--fb-neutral-100); color: var(--fb-neutral-500); cursor: pointer;
  font-size: 0; transition: background .15s, color .15s;
}
.fb .fb-vbtn::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fb .fb-vbtn--down::before { transform: rotate(180deg); }
.fb .fb-vbtn:hover { background: var(--fb-primary-50); color: var(--fb-primary-600); }
.fb .fb-vbtn--up.is-voted { background: var(--fb-primary-500); color: #fff; }
.fb .fb-vbtn--down.is-voted { background: var(--fb-neutral-600); color: #fff; }
.fb .fb-vbtn--sm { width: 30px; height: 26px; }
.fb .fb-vbtn--sm::before { width: 14px; height: 14px; }
.fb .fb-idea__main { flex: 1 1 auto; min-width: 0; }
.fb .fb-idea__labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.fb .fb-idea__title { margin: 0 0 12px; font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--fb-neutral-800); }
.fb .fb-idea__author { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; color: var(--fb-neutral-700); }
.fb .fb-idea__author a { color: var(--fb-neutral-800); font-weight: 600; }
.fb .fb-idea__body { font-size: 15px; line-height: 1.7; color: var(--fb-neutral-600); }
.fb .fb-idea__body hr { border: 0; border-top: 1px solid var(--fb-neutral-200); margin: 20px 0 12px; }
.fb .fb-idea__body hr + p { font-size: 13px; color: var(--fb-neutral-500); }
/* migration footer */
.fb .fb-idea__footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--fb-neutral-100); font-size: 13px;
}
/* Comments */
.fb .fb-comments-heading { margin-top: 28px; }
.fb .fb-comment { display: flex; gap: 14px; }
.fb .fb-comment-list { padding: 0; overflow: hidden; margin: 0 0 16px; }
.fb .fb-comment-list .fb-comment { padding: 18px 20px; border-top: 1px solid var(--fb-neutral-100); }
.fb .fb-comment-list .fb-comment:first-child { border-top: 0; }
.fb .fb-comment__main { flex: 1 1 auto; min-width: 0; }
.fb .fb-comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 8px; font-size: 13px; }
.fb .fb-comment__author,
.fb .fb-comment__author a { font-weight: 600; color: var(--fb-neutral-800); }
.fb .fb-comment__actions { margin-left: auto; color: var(--fb-neutral-500); }
.fb .fb-comment__body { font-size: 15px; line-height: 1.65; color: var(--fb-neutral-600); }
.fb .fb-comment--official { display: block; margin: 0 0 16px; box-shadow: var(--fb-shadow), inset 4px 0 0 var(--fb-success-600); background: #fbfffd; }
.fb .fb-comment__badge {
  display: inline-flex; margin: 0 0 12px; padding: 2px 8px; border-radius: var(--fb-radius-sm);
  background: var(--fb-success-50); color: var(--fb-success-600); font-size: 12px; font-weight: 600;
}
/* Reply box */
.fb .fb-reply { margin-top: 8px; }
.fb .fb-reply__callout { margin: 0 0 12px; font-size: 14px; color: var(--fb-neutral-500); }
.fb .fb-reply__callout:empty { display: none; }
.fb .fb-reply__row { display: flex; gap: 14px; align-items: flex-start; }
.fb .fb-reply__editor { flex: 1 1 auto; min-width: 0; }
.fb .fb-reply textarea { width: 100%; box-sizing: border-box; min-height: 120px; padding: 12px; border: 1px solid var(--fb-neutral-300); border-radius: var(--fb-radius); font: inherit; }
.fb .fb-reply textarea:focus { outline: none; border-color: var(--fb-primary-600); box-shadow: 0 0 0 3px var(--fb-primary-50); }
.fb .fb-reply__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.fb .fb-reply__official { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fb-neutral-700); }
.fb .fb-reply__official label { margin: 0; }
.fb .fb-reply__official:empty { display: none; }
@media (max-width: 900px) {
  .fb .fb-newpost__grid { grid-template-columns: 1fr; }
  .fb .fb-tips { order: -1; }
}
@media (max-width: 640px) {
  .fb .fb-idea { gap: 14px; padding: 18px; }
  .fb .fb-idea__title { font-size: 21px; }
  .fb .fb-vbtn { width: 34px; height: 30px; }
  .fb .fb-card { padding: 18px; }
}

/* Castor-generated widgets inside the board: neutralise theme defaults */
.fb .fb-idea img, .fb .fb-comment img, .fb .fb-reply img { max-width: none; }
.fb img.fb-avatar, .fb .fb-reply__row > img, .fb .fb-reply__row .user-avatar { width: 32px !important; height: 32px !important; border-radius: 50%; object-fit: cover; }
/* Follow (subscribe helper) and form submit buttons: identical to .fb-btn ("+ New idea").
 * Castor styles these via its own .btn rules (Raleway, bright blue, arrow icon), hence !important. */
.fb .fb-subscribe :is(a, button),
.fb .fb-head__follow :is(a, button),
.fb input[type="submit"] {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 9px 16px !important; margin: 0 !important;
  border: 0 !important; border-radius: var(--fb-radius) !important; box-shadow: none !important;
  background: var(--fb-primary-500) !important; color: #fff !important;
  font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important;
  line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important;
  height: auto !important; min-height: 0 !important; cursor: pointer; transition: background .15s;
}
.fb .fb-subscribe :is(a, button):hover,
.fb .fb-head__follow :is(a, button):hover,
.fb input[type="submit"]:hover { background: var(--fb-primary-600) !important; }
/* Drop Castor's arrow icon on these buttons */
.fb .fb-subscribe :is(a, button)::before, .fb .fb-subscribe :is(a, button)::after,
.fb .fb-head__follow :is(a, button)::before, .fb .fb-head__follow :is(a, button)::after { display: none !important; content: none !important; }
.fb .fb-subscribe :is(a, button) :is(i, svg, .icon, [class*="arrow"]),
.fb .fb-head__follow :is(a, button) :is(i, svg, .icon, [class*="arrow"]) { display: none !important; }
/* On the gradient hero, Follow matches the hero's white primary button */
.fb .fb-hero .fb-head__follow :is(a, button) { background: #fff !important; color: var(--fb-primary-600) !important; }
.fb .fb-hero .fb-head__follow :is(a, button):hover { background: var(--fb-primary-50) !important; }