/* Big Red Bulb redesign. Loaded on Big Red Bulb only (see _functions-includes/brb-redesign.php).
   Clean civic utility: white page, cool gray structure, one red for the main action. */

/* ---------- tokens ---------- */
:root {
  --red-600: #d0212b; --red-700: #a8161f; --red-link: #b5161f; --red-100: #fdecec; --red-900: #7a0f15;
  --gold-400: #ffcf5c; --star-500: #f5a524;
  --ink-900: #121826; --ink-800: #1b2130; --ink-700: #344054; --ink-600: #475467; --ink-500: #667085;
  --ink-400: #98a2b3; --ink-300: #d0d5dd; --ink-200: #e4e7ec; --ink-100: #f2f4f7; --ink-50: #f5f7fa; --ink-25: #f9fafb;
  --ok-600: #067a55; --ok-100: #e7f5ef; --ok-800: #05603a;
  --warn-600: #b54708; --warn-100: #fff4e5; --warn-50: #fff8e6; --warn-200: #fde7b0;
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 20px; --section-gap: 36px; --card-gap: 16px;
  --container-wide: 1200px; --container-narrow: 880px; --container-form: 680px; --container-prose: 760px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-pill: 999px;
  --shadow-float: 0 2px 8px rgba(16, 24, 40, 0.18);
  --shadow-sticky: 0 -4px 16px rgba(16, 24, 40, 0.06);

  /* Bootstrap, for the pages that still use its components. */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ink-900);
  --bs-body-bg: #fff;
  --bs-primary: var(--red-600);
  --bs-primary-rgb: 208, 33, 43;
  --bs-link-color: var(--red-link);
  --bs-link-color-rgb: 181, 22, 31;
  --bs-link-hover-color: #8a1018;
  --bs-link-hover-color-rgb: 138, 16, 24;
  --bs-border-color: var(--ink-200);
}

body { background: #fff; color: var(--ink-900); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline-color: var(--red-600); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--ink-900); }

.btn-primary {
  --bs-btn-bg: var(--red-600); --bs-btn-border-color: var(--red-600);
  --bs-btn-hover-bg: var(--red-700); --bs-btn-hover-border-color: var(--red-700);
  --bs-btn-active-bg: var(--red-700); --bs-btn-active-border-color: var(--red-700);
  --bs-btn-disabled-bg: var(--red-600); --bs-btn-disabled-border-color: var(--red-600);
}
.btn-outline-primary {
  --bs-btn-color: var(--red-link); --bs-btn-border-color: var(--red-600);
  --bs-btn-hover-bg: var(--red-600); --bs-btn-hover-border-color: var(--red-600);
  --bs-btn-active-bg: var(--red-600); --bs-btn-active-border-color: var(--red-600);
}

/* ---------- layout ---------- */
/* A redesigned page lays itself out; undo the theme's nested Bootstrap containers. */
.brb-page #theme-main .container { max-width: none; padding-left: 0; padding-right: 0; }
.brb-page #theme-main .row { margin-left: 0; margin-right: 0; }
.brb-page #theme-main .col-12 { padding-left: 0; padding-right: 0; }
.brb-page #primary .col-12 > .alert { box-sizing: border-box; max-width: calc(var(--container-wide) - 2 * var(--gutter)); margin: 16px auto 0; border-radius: var(--r-lg); }
@media (max-width: 1200px) { .brb-page #primary .col-12 > .alert { margin-left: var(--gutter); margin-right: var(--gutter); } }

.brb-wrap { box-sizing: border-box; width: 100%; max-width: var(--container-wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.brb-wrap--narrow { max-width: var(--container-narrow); }
.brb-wrap--form { max-width: var(--container-form); }
.brb-wrap--prose { max-width: var(--container-prose); }
.brb-stack { display: flex; flex-direction: column; gap: var(--section-gap); padding-top: 28px; padding-bottom: 40px; }

.brb-h1 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.brb-h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.brb-h2--sm { font-size: 20px; font-weight: 700; }
.brb-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.brb-meta { font-size: 13px; line-height: 1.45; color: var(--ink-500); }
.brb-num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.brb-prose { font-size: 16px; line-height: 1.6; color: var(--ink-700); }
.brb-prose p { margin: 0 0 12px; }
.brb-prose h2 { margin: 28px 0 12px; font-size: 22px; font-weight: 800; }
.brb-prose a { color: var(--red-link); }
.brb-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--red-link); text-decoration: none; }

/* A section's heading row: title left, count or control right. */
.brb-sechead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.brb-sechead > span { font-size: 14px; color: var(--ink-500); }

/* ---------- buttons ---------- */
.brb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md); background: none; font: inherit; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.brb-btn--primary { background: var(--red-600); color: #fff; font-weight: 700; }
.brb-btn--primary:hover { background: var(--red-700); color: #fff; }
.brb-btn--secondary { border-color: var(--ink-300); background: #fff; color: var(--ink-900); }
.brb-btn--secondary:hover { border-color: var(--ink-900); color: var(--ink-900); }
.brb-btn--dark { background: var(--ink-900); color: #fff; }
.brb-btn--dark:hover { background: var(--ink-800); color: #fff; }
.brb-btn--text { height: auto; padding: 0; color: var(--red-link); }
.brb-btn--text:hover { color: #8a1018; text-decoration: underline; }
.brb-btn--seen { border-color: var(--ok-600); background: var(--ok-100); color: var(--ok-600); }
.brb-btn--seen:hover { color: var(--ok-800); }
.brb-btn--sm { height: 40px; padding: 0 12px; font-size: 14px; }
.brb-btn--lg { height: 48px; }
.brb-btn--submit { width: 100%; height: 52px; font-size: 16px; }
.brb-btn[disabled], .brb-btn.is-disabled { border-color: var(--ink-200); background: var(--ink-50); color: var(--ink-400); cursor: not-allowed; }

/* ---------- status chip ---------- */
.brb-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.brb-chip--ok { background: var(--ok-100); color: var(--ok-600); }
.brb-chip--warn { background: var(--warn-100); color: var(--warn-600); }
.brb-chip--neutral { background: var(--ink-100); color: var(--ink-600); }
.brb-chip--lg { padding: 4px 10px; font-size: 14px; }

/* ---------- header ---------- */
.brb-header { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--ink-200); background: #fff; }
.brb-header__row { display: flex; align-items: center; gap: 28px; box-sizing: border-box; max-width: var(--container-wide); margin: 0 auto; padding: 12px 32px; }
.brb-header__brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink-900); text-decoration: none; }
.brb-header__brand:hover { color: var(--ink-900); text-decoration: none; }
.brb-header__logo { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.brb-header__logo--bulb { display: flex; align-items: center; justify-content: center; background: var(--red-600); color: #fff; font-size: 21px; }
.brb-header__name { display: flex; flex-direction: column; min-width: 0; }
.brb-header__name b { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.brb-header__name span { overflow: hidden; font-size: 12px; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; }
.brb-header__menu { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--ink-200); border-radius: var(--r-md); background: #fff; color: var(--ink-900); font-size: 22px; cursor: pointer; }
.brb-nav { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.brb-nav__list { display: flex; flex: 1; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.brb-nav__list li { position: relative; }
.brb-nav__list a { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; color: var(--ink-600); text-decoration: none; }
.brb-nav__list a:hover { background: var(--ink-50); color: var(--ink-900); }
.brb-nav__list .current-menu-item > a { color: var(--ink-900); box-shadow: inset 0 -2px 0 var(--red-600); }
.brb-nav__list .menu-item-has-children > a::after { content: " \25BE"; }
.brb-nav__list .sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1200; min-width: 200px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-float); }
.brb-nav__list li:hover > .sub-menu, .brb-nav__list li:focus-within > .sub-menu { display: block; }
.brb-nav__list .sub-menu a { white-space: nowrap; }
.brb-nav__add { flex: none; height: 40px; }

/* ---------- footer ---------- */
.brb-footer { margin-top: 0; padding: 0; border: 0; background: var(--ink-900); color: var(--ink-300); }
.brb-footer__inner { display: flex; flex-direction: column; gap: 28px; box-sizing: border-box; max-width: var(--container-wide); margin: 0 auto; padding: 36px var(--gutter) 24px; }
.brb-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.brb-footer__brand, .brb-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; font-size: 14px; }
.brb-footer__brand b { font-size: 18px; font-weight: 800; color: #fff; }
.brb-footer__brand span { font-size: 13px; line-height: 1.5; color: var(--ink-400); }
.brb-footer__brand a { font-size: 20px; color: #fff; }
.brb-footer__col > span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); }
.brb-footer__col a { color: #fff; text-decoration: none; }
.brb-footer__col a:hover { text-decoration: underline; }
.brb-footer__col a i { font-size: 11px; }
.brb-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ink-700); font-size: 13px; color: var(--ink-400); }
.brb-footer__legal span:last-child { display: flex; gap: 16px; }
.brb-footer__legal a { color: var(--ink-300); text-decoration: none; }
.brb-footer__legal a:hover { color: #fff; text-decoration: underline; }

/* ---------- display card ---------- */
.brb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--card-gap); }
.brb-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; box-sizing: border-box; border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: #fff; color: var(--ink-900); transition: border-color 0.15s; }
.brb-card:hover { border-color: var(--ink-400); }
.brb-card__photo { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--ink-800); }
.brb-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brb-card__lights { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-sm); background: rgba(18, 24, 38, 0.82); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.brb-card__lights i { color: var(--gold-400); }
.brb-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.brb-card__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; text-wrap: pretty; }
.brb-card__title a { color: var(--ink-900); text-decoration: none; }
.brb-card__title a:hover { color: var(--red-link); }
.brb-card__address { font-size: 14px; line-height: 1.4; color: var(--ink-600); }
.brb-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-500); }
.brb-card__meta span { display: flex; align-items: center; gap: 6px; }
.brb-card__actions { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px; margin-top: auto; padding-top: 6px; }
.brb-card__actions .brb-btn { height: 40px; padding: 0 8px; font-size: 14px; }

/* ---------- map ---------- */
.brb-map { position: relative; z-index: 0; overflow: hidden; height: 400px; border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: #eef0f3; }
.brb-mapwrap { position: relative; }
.brb-mapwrap__float { position: absolute; right: 12px; bottom: 12px; z-index: 500; box-shadow: var(--shadow-float); }

/* ---------- ad slot ---------- */
.brb-ad, .ad-container { box-sizing: border-box; width: 100%; padding: 24px var(--gutter); overflow: hidden; text-align: center; }
.brb-ad .ad-container { padding: 0; }
.brb-ad:empty { display: none; }
.ad-container .ad-label { margin-bottom: 6px !important; font-size: 11px !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400) !important; }

/* ---------- small shared components ---------- */
.brb-panel { padding: 16px; border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: #fff; }
.brb-panel--inset { border: 0; background: var(--ink-50); }
.brb-attention { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; border: 1px solid var(--warn-200); border-radius: var(--r-lg); background: var(--warn-50); }
.brb-attention > i { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); background: #fff; color: var(--warn-600); font-size: 18px; }
.brb-attention > div { display: flex; flex: 1 1 220px; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; color: var(--ink-700); }
.brb-attention b { font-size: 15px; color: var(--ink-900); }
.brb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.brb-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-md); background: var(--ink-50); }
.brb-stat b { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.brb-stat span { font-size: 13px; color: var(--ink-600); }
.brb-stat--lead { background: var(--warn-50); }
.brb-stat--zero b { color: var(--ink-400); }
.brb-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--ink-200); scrollbar-width: none; }
.brb-tabs::-webkit-scrollbar { display: none; }
.brb-tabs a, .brb-tabs button { display: flex; flex: none; align-items: center; height: 44px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-600); white-space: nowrap; text-decoration: none; cursor: pointer; }
.brb-tabs .is-on { color: var(--ink-900); box-shadow: inset 0 -2px 0 var(--red-600); }
.brb-segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--ink-100); }
.brb-segmented a, .brb-segmented button { display: flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-600); text-decoration: none; cursor: pointer; }
.brb-segmented .is-on { background: #fff; color: var(--ink-900); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
.brb-input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: #fff; font: inherit; font-size: 16px; color: var(--ink-900); }
textarea.brb-input { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; }
.brb-input:focus { outline: 2px solid var(--red-600); outline-offset: 1px; border-color: var(--red-600); }
.brb-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.brb-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--ink-600); }
.brb-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--ok-100); color: var(--ok-800); font-size: 15px; font-weight: 600; }
.brb-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.brb-pager a, .brb-pager span { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-900); text-decoration: none; }
.brb-pager a:hover { border-color: var(--ink-900); }
.brb-pager .is-on { border-color: var(--ink-900); background: var(--ink-900); color: #fff; }
.brb-pager .is-off { border-color: var(--ink-200); color: var(--ink-400); }

/* ---------- listing pages: home, newest displays, join a community ---------- */

/* Community card (brb_community_card): a .brb-card with one button. */
.brb-ccard__photo { display: flex; align-items: center; justify-content: center; background: var(--ink-100); color: var(--ink-400); font-size: 32px; }
.brb-ccard__badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: var(--r-sm); background: var(--ok-600); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.5; }
.brb-ccard__near { display: flex; gap: 6px; }
.brb-ccard__none { font-weight: 700; color: var(--ink-400); }
.brb-ccard__btn { margin-top: auto; }
.brb-ccard .brb-card__body > :nth-last-child(2) { margin-bottom: 6px; }

/* The SEO prose under a listing. */
.brb-listing__prose { padding-top: 4px; padding-bottom: 24px; }
.brb-listing__prose h2:first-child { margin-top: 0; font-size: 24px; letter-spacing: -0.01em; text-wrap: balance; }

/* Home */
.brb-home__banner { background: var(--red-100); color: var(--red-900); font-size: 13px; font-weight: 600; }
.brb-home__banner .brb-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; padding-top: 10px; padding-bottom: 10px; }
.brb-home__banner b { font-weight: 800; }
.brb-home__banner a { color: var(--red-link); font-weight: 700; text-decoration: underline; }
.brb-home__banner span:empty { display: none; }
.brb-home { gap: 20px; padding-top: 24px; }

/* Your community: the one nearest the visitor, or an invitation to start one. */
.brb-home__mine { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; padding: 22px 24px; border: 1px solid #f2c4cb; border-radius: 14px; background: linear-gradient(90deg, #fff6f7, #fff); scroll-margin-top: 90px; }
.brb-home__mine--none { border: 1.5px dashed var(--ink-300); background: var(--ink-25); }
.brb-home__minebody { display: flex; flex-direction: column; gap: 10px; min-width: 0; font-size: 14px; color: var(--ink-700); }
.brb-home__mine .brb-eyebrow { font-size: 12px; letter-spacing: 0.1em; color: var(--red-600); }
.brb-home__mine h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.brb-home__mine h2 a { color: var(--ink-900); text-decoration: none; }
.brb-home__mine h2 a:hover { text-decoration: underline; }
.brb-home__minestats { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.brb-home__minestats b, .brb-home__minepeople b { color: var(--ink-900); }
.brb-home__minepeople { display: flex; align-items: center; gap: 8px; }
.brb-home__minepeople i { color: var(--ink-500); font-size: 18px; }
.brb-home__mineact { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: 330px; font-size: 12px; line-height: 1.5; color: var(--ink-600); text-align: right; }
.brb-home__mineact .brb-btn--primary { height: 50px; padding: 0 28px; border-radius: var(--r-lg); font-size: 16px; font-weight: 800; white-space: normal; box-shadow: 0 6px 16px rgba(208, 33, 43, 0.25); }
.brb-home__mineact > a:not(.brb-btn) { color: var(--ink-600); }

/* The join control (brb_member_control): a Join button, or "Joined" with a quiet Leave. */
.brb-member { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.brb-member .brb-chip { align-self: center; }
.brb-member__leave { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-600); text-decoration: underline; cursor: pointer; }
.brb-member__leave:hover { color: var(--ink-900); }
.brb-home__mineact .brb-member { justify-content: flex-end; }
.brb-home__mineact .brb-btn--primary { justify-content: center; text-align: center; }

/* The next few communities, and the way to start one. */
.brb-home__label { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-700); }
.brb-home__nearby { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.brb-home__ncard { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--ink-200); border-radius: var(--r-xl); background: #fff; font-size: 12px; line-height: 1.5; color: var(--ink-600); text-decoration: none; transition: border-color 0.15s; }
a.brb-home__ncard:hover { border-color: var(--red-600); color: var(--ink-600); }
.brb-home__ncard b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink-900); text-wrap: pretty; }
.brb-home__nhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.brb-home__nhead span { flex: none; font-size: 11px; white-space: nowrap; }
.brb-home__ncard em { font-style: normal; font-weight: 700; color: var(--red-600); }
.brb-home__ngo { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--red-link); text-decoration: none; }
a.brb-home__ngo:hover { text-decoration: underline; }
.brb-home__ncard--start { justify-content: center; border: 1.5px dashed var(--ink-300); background: var(--ink-25); }

/* Communities on the map: a chip at each one's centre, and the legend. */
.brb-map__chip { width: auto !important; height: auto !important; }
.brb-map .brb-map__community { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #f2c4cb; border-radius: var(--r-md); background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--ink-900); white-space: nowrap; text-decoration: none; transform: translate(-50%, -130%); }
.brb-map__community::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red-600); }
.brb-map .brb-map__community:hover { border-color: var(--red-600); color: var(--ink-900); }
.brb-map__more { padding: 6px 10px; border-radius: var(--r-md); background: var(--ink-900); box-shadow: var(--shadow-float); font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: #fff; }
.brb-map__legend { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: var(--r-md); background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); font-family: var(--font-sans); font-size: 12px; color: var(--ink-700); }
.brb-map__legend span { display: flex; align-items: center; gap: 8px; }
.brb-map__key { width: 10px; height: 10px; border-radius: 50%; background: var(--red-600); }
.brb-map__key--community { width: 16px; height: 10px; margin: 0 -3px; border: 1px solid #f2c4cb; border-radius: 3px; background: #fff; }

/* A display card's community, where the page looked it up. */
.brb-card__community { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: var(--r-pill); background: var(--red-100); font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--red-link); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.brb-card__community:hover { color: var(--red-900); text-decoration: underline; }
.brb-card__community--none { background: var(--ink-100); font-weight: 600; color: var(--ink-600); }
.brb-home__near { display: flex; flex-direction: column; gap: 28px; }
.brb-home__section { display: flex; flex-direction: column; gap: 14px; }
.brb-home__loc { display: flex; flex-wrap: wrap; gap: 8px; }
.brb-home__field { display: flex; flex: 1 1 220px; align-items: center; gap: 10px; box-sizing: border-box; min-width: 0; height: 48px; padding: 0 1px 0 14px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: #fff; }
.brb-home__field:focus-within { outline: 2px solid var(--red-600); outline-offset: 1px; border-color: var(--red-600); }
.brb-home__field > i { font-size: 16px; color: var(--red-600); }
.brb-home__field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink-900); }
/* A 44px target around the 36px square the design draws. */
.brb-home__here { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.brb-home__here[hidden] { display: none; }
.brb-home__here i { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--ink-100); color: var(--ink-700); font-size: 16px; }
.brb-home__here:hover i { background: var(--ink-200); }
.brb-home__here:disabled { cursor: progress; opacity: 0.6; }
.brb-home__note { margin: 0; font-size: 15px; color: var(--ink-600); }
.brb-home__newest { margin: -12px 0 0; font-size: 15px; color: var(--ink-600); }
.brb-home__newest a { font-weight: 600; color: var(--red-link); text-decoration: none; }
.brb-home__newest a:hover { text-decoration: underline; }

/* Newest displays */
.brb-newest { gap: 18px; }
.brb-newest__head { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-600); }
.brb-newest__pager { margin-top: 6px; font-variant-numeric: tabular-nums; }
.brb-newest__pager a, .brb-newest__pager span { min-width: 44px; height: 44px; padding: 0 14px; font-size: 15px; }
.brb-pager__status { display: none; font-size: 14px; font-weight: 400; color: var(--ink-600); }

/* Join a community */
.brb-join__intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; gap: 20px; }
.brb-join__copy { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.brb-join__copy p, .brb-join__launch p { margin: 0; }
.brb-join__note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--ink-50); color: var(--ink-900); }
.brb-join__note i { color: var(--red-600); }
.brb-join__launch { display: flex; flex-direction: column; gap: 10px; padding: 18px; font-size: 16px; }
.brb-join__launch ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-700); }
.brb-join__launch .brb-btn { align-self: flex-start; }
.brb-join__group { display: flex; flex-direction: column; gap: 14px; }
.brb-join__group h2 { text-wrap: balance; }
.brb-join__group h2 span { font-weight: 600; color: var(--ink-500); }

@media (max-width: 759px) {
  /* Small text links get a taller touch area without moving the layout. */
  .brb-home__banner a, .brb-home__newest a { padding-block: 12px; margin-block: -12px; }
  .brb-home__newest a { display: inline-block; }
  .brb-home__mine { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .brb-home__mineact { align-items: stretch; max-width: none; text-align: left; }
  .brb-home__mineact .brb-btn--primary { height: auto; min-height: 50px; padding: 8px 16px; }
  .brb-home__mineact .brb-member { justify-content: flex-start; }
  .brb-home__mineact .brb-member .brb-btn { flex: 1; }
  .brb-member__leave { min-height: 44px; }
  .brb-home__mineact > a:not(.brb-btn), .brb-home__ngo, .brb-home__section .brb-sechead a { display: inline-flex; align-items: center; min-height: 44px; }
  .brb-home__nearby { grid-template-columns: minmax(0, 1fr); }
  .brb-home__field { flex-basis: 100%; }
  .brb-home__loc > .brb-btn { flex: 1; }
  .brb-newest__pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .brb-newest__pager .brb-pager__num { display: none; }
  .brb-newest__pager .brb-pager__step { height: 48px; }
  .brb-pager__status { display: block; }
}

/* ---------- community page (single-brb_community.php) ---------- */
.brb-community [hidden] { display: none; }
.brb-community__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.brb-community__logo { flex: none; width: 140px; height: 140px; border: 1px solid var(--ink-200); border-radius: var(--r-2xl); background: var(--ink-100); object-fit: cover; }
.brb-community__title { display: flex; flex: 1 1 300px; flex-direction: column; gap: 8px; min-width: 0; }
.brb-community__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; color: var(--ink-600); }
.brb-community__confirmed { font-weight: 600; color: var(--ok-600); }

.brb-community__mapsec { display: flex; flex-direction: column; gap: 10px; }
.brb-community__maphead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.brb-community__legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-600); }
.brb-community__legend span { display: flex; align-items: center; gap: 6px; }
.brb-community__dot { box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; background: var(--red-600); }
.brb-community__dot--open { border: 2px solid var(--red-600); background: #fff; }
.brb-community__switch { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-900); cursor: pointer; }
.brb-community__switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.brb-community__switch span { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--ink-300); transition: background 0.15s; }
.brb-community__switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.brb-community__switch input:checked + span { background: var(--red-600); }
.brb-community__switch input:checked + span::after { left: 18px; }
.brb-community__switch input:focus-visible + span { outline: 2px solid var(--red-600); outline-offset: 2px; }

.brb-community__text { font-size: 15px; line-height: 1.6; color: var(--ink-700); overflow-wrap: anywhere; }
.brb-community__text p { margin: 0 0 10px; }
.brb-community__text p:last-child { margin-bottom: 0; }
.brb-community__text a { color: var(--red-link); }
.brb-community__facts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-700); }
.brb-community__facts li { display: flex; gap: 8px; }
.brb-community__facts i { color: var(--ink-500); }
.brb-community__contest { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.brb-community__contest-title { font-size: 16px; font-weight: 700; color: var(--ink-900); text-decoration: none; }
.brb-community__contest-title:hover { color: var(--red-link); }
.brb-community__contest p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-600); }
.brb-community__contest .bi-circle-fill { font-size: 8px; }
.brb-community__linkgroup { margin-top: 4px; font-size: 14px; color: var(--ink-500); }
.brb-community__link { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--red-link); text-decoration: none; overflow-wrap: anywhere; }
.brb-community__link:hover { color: #8a1018; text-decoration: underline; }

.brb-community__displays, .brb-community__mediasec { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.brb-community__count { font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.brb-community__grid .brb-card[hidden] { display: none; }
/* Before the page script takes over (or without it): hide cards carrying the "Not yet seen" chip. */
.brb-community__grid.is-confirmed-only .brb-card:has(.brb-chip--warn) { display: none; }
.brb-community__more { align-self: center; }

.brb-community__reviews { display: flex; flex-direction: column; }
.brb-community__reviews > .brb-h2 { margin-bottom: 14px; }
.brb-community__review { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--ink-200); }
.brb-community__review-photo { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: var(--r-md); background: var(--ink-800); }
.brb-community__review-photo img, .brb-community__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brb-community__review > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.brb-community__stars { display: flex; gap: 2px; font-size: 14px; color: var(--star-500); }
.brb-community__review p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-700); text-wrap: pretty; overflow-wrap: anywhere; }
.brb-community__review-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.brb-community__review-meta a { font-weight: 600; color: var(--red-link); text-decoration: none; }
.brb-community__allreviews summary { width: fit-content; margin-top: 4px; list-style: none; }
.brb-community__allreviews summary::-webkit-details-marker { display: none; }
.brb-community__allreviews[open] summary { display: none; }

.brb-community__media { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.brb-community__media a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--ink-800); }

/* ---------- community page, two-column layout (single-brb_community.php) ---------- */
/* Title block: 56px logo, then title + meta, then the buttons under the title. */
.brb-community__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 0; }
.brb-community__logo { grid-row: 1 / span 2; width: 56px; height: 56px; margin-right: 14px; border-radius: var(--r-lg); }
.brb-community__title { grid-column: 2; gap: 6px; }
.brb-community__meta { display: block; margin: 0; line-height: 1.5; }
.brb-community__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }

/* Map, sidebar, lists. One column in source order; the sidebar becomes the right column from 1024px. */
.brb-community__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--section-gap) 24px; }
.brb-community__main, .brb-community__side { display: flex; flex-direction: column; min-width: 0; }
.brb-community__main { gap: var(--section-gap); }
.brb-community__side { gap: 24px; }
.brb-community__side > section { display: flex; flex-direction: column; gap: 8px; }
.brb-community__side h2 { margin: 0; }
.brb-community__contest { margin-top: 0; }
.brb-community__ad { min-height: 273px; padding: 0; } /* label + 250px, so the column does not jump when the ad fills */
.brb-community__mapsec { position: relative; }

@media (min-width: 760px) {
  /* Legend and switch sit on a white plate inside the map, top right. */
  .brb-community__maphead { position: absolute; top: 10px; right: 10px; z-index: 500; gap: 0 14px; padding: 0 10px; border-radius: 4px; background: #fff; box-shadow: var(--shadow-float); }
  .brb-community__switch { min-height: 36px; }
}
@media (min-width: 1024px) {
  .brb-community__cols { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; align-items: start; }
  .brb-community__mapsec { grid-column: 1; grid-row: 1; }
  .brb-community__side { grid-column: 2; grid-row: 1 / span 2; }
  .brb-community__main { grid-column: 1; grid-row: 2; }
  .brb-community__side:first-child + .brb-community__main { grid-row: 1 / span 2; } /* no map */
}
@media (max-width: 759px) {
  .brb-community__logo { grid-row: auto; width: 56px; height: 56px; }
  .brb-community__actions { grid-column: 1 / -1; }
  .brb-community__actions .brb-btn { flex: 1 1 auto; padding: 0 10px; font-size: 14px; }
  .brb-community__actions .brb-btn--primary { flex-basis: 100%; font-size: 15px; }
}

/* ---------- contest leaderboard (communitycontest-leaderboard.php) ---------- */
.brb-contest { gap: 18px; }
.brb-contest__head { display: flex; flex-direction: column; gap: 8px; }
.brb-contest__head .bi-circle-fill { font-size: 8px; }
.brb-contest__desc { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.brb-contest__rules { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.brb-contest__rules b { font-size: 15px; }
.brb-contest__rules ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; line-height: 1.45; color: var(--ink-700); }
.brb-contest__rules li { display: flex; gap: 8px; }
.brb-contest__rules li i { color: var(--red-600); }
.brb-contest__rules > a { align-self: flex-start; font-weight: 600; color: var(--red-link); text-decoration: none; }
.brb-contest__rules > a:hover { text-decoration: underline; }
.brb-contest__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.brb-contest__board { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.brb-contest__award { display: flex; align-items: flex-start; gap: 12px; }
.brb-contest__award img { flex: none; width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover; }
.brb-contest__award p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-600); }
.brb-contest__rows { margin: 0; padding: 0; border-top: 1px solid var(--ink-200); list-style: none; }
.brb-contest__row { display: grid; grid-template-columns: 28px 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink-200); }
.brb-contest__rank { font-size: 18px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-400); }
.brb-contest__row:first-child .brb-contest__rank { color: var(--red-600); }
.brb-contest__thumb { display: block; width: 56px; height: 56px; overflow: hidden; border-radius: var(--r-md); background: var(--ink-800); }
.brb-contest__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brb-contest__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brb-contest__name { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink-900); text-decoration: none; text-wrap: pretty; }
.brb-contest__name:hover { color: var(--red-link); }
.brb-contest__bar { flex: 1; max-width: 220px; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: #eef0f3; }
.brb-contest__bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--red-600); }
.brb-contest__community { margin: 0; }
.brb-contest__community a { font-weight: 600; color: var(--red-link); text-decoration: none; }

@media (max-width: 759px) {
  .brb-community__logo { width: 96px; height: 96px; }
  .brb-community__link { align-items: center; min-height: 44px; }
  .brb-community .brb-btn--sm, .brb-contest .brb-btn--sm { height: 44px; }
  .brb-contest__row { gap: 10px; }
}

/* ---------- voting: leaderboard vote controls and search list (communitycontest-leaderboard.php),
   ballot page (communitycontest-vote.php), and the closed / not-found panel both use ---------- */
.brb-voting { gap: 18px; }
.brb-voting__form { margin: 0; }
.brb-voting__btn { min-width: 76px; }
.brb-voting__notice { margin: 0; }
.brb-voting__notice--no { background: var(--warn-100); color: var(--warn-600); }

/* Status line under the award tabs: where you stand on the left, votes cast on the right. */
.brb-voting__status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; line-height: 1.45; color: var(--ink-700); }
.brb-voting__status a { font-weight: 600; color: var(--red-link); text-decoration: none; }
.brb-voting__status a:hover { text-decoration: underline; }
.brb-voting__status .bi-check-lg { color: var(--ok-600); }
.brb-voting__cast { margin-left: auto; color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* Rows: the bar sits on its own line above "412 votes · Milton"; search rows have no rank column. */
.brb-contest__body > .brb-contest__bar { flex: none; width: 100%; }
.brb-contest__row--plain { grid-template-columns: 56px minmax(0, 1fr) auto; }
.brb-contest__row[hidden] { display: none; }

/* "Don't see a display?" */
.brb-voting__search summary { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--red-link); cursor: pointer; list-style: none; }
.brb-voting__search summary::-webkit-details-marker { display: none; }
.brb-voting__search summary .bi { font-size: 12px; }
.brb-voting__search[open] summary .bi { transform: rotate(180deg); }
.brb-voting__field { margin: 4px 0 12px; }
.brb-voting__search > .brb-meta { margin: 10px 0 0; }
.brb-voting__search > .brb-meta a { font-weight: 600; color: var(--red-link); text-decoration: none; }

/* Closed, not eligible, not found: one title, one sentence, one button. */
.brb-voting__closed { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border: 1px dashed var(--ink-300); border-radius: var(--r-lg); text-align: center; }
.brb-voting__closed b { font-size: 16px; }
.brb-voting__closed p { max-width: 52ch; margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--ink-600); }

/* Ballot page: the display, then one row per award. */
.brb-voting__display { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brb-voting__display:hover { border-color: var(--ink-300); color: inherit; }
.brb-voting__display img { flex: none; width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; }
.brb-voting__display > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brb-voting__display b { font-size: 16px; line-height: 1.25; text-wrap: pretty; }
.brb-voting__ballot { display: flex; flex-direction: column; gap: 10px; }
.brb-voting__ballot > .brb-meta { margin: 0; }
.brb-voting__awards { margin: 0; padding: 0; border-top: 1px solid var(--ink-200); list-style: none; }
.brb-voting__awards li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink-200); }
.brb-voting__awards li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brb-voting__awards b { font-size: 15px; line-height: 1.25; }
.brb-voting__more { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; font-size: 14px; font-weight: 600; }
.brb-voting__more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--red-link); text-decoration: none; }
.brb-voting__more a:hover { text-decoration: underline; }

@media (max-width: 759px) {
  .brb-voting .brb-btn--sm { height: 44px; }
  .brb-voting__btn { min-width: 64px; padding: 0 10px; }
}

/* ---------- display page (single-brb_display.php) ---------- */
.brb-display { gap: 24px; }
.brb-display__head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.brb-display__photo { position: relative; display: flex; flex: none; align-items: center; justify-content: center; overflow: hidden; width: 140px; height: 140px; border-radius: var(--r-xl); background: var(--ink-800); color: var(--ink-500); font-size: 40px; }
.brb-display__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brb-display__title { display: flex; flex: 1 1 280px; flex-direction: column; gap: 10px; min-width: 0; }
.brb-display__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.brb-display__chips .brb-chip { padding: 3px 10px; font-size: 14px; text-decoration: none; }
.brb-display__chips .brb-chip--neutral { color: var(--ink-700); }
.brb-display__chips a.brb-chip { position: relative; }
.brb-display__chips a.brb-chip::after { content: ""; position: absolute; inset: -9px 0; } /* 44px tap target */
.brb-display__chips .bi-star, .brb-display__chips .bi-star-fill, .brb-display__stars { color: var(--star-500); }
.brb-display__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.brb-display .brb-mapwrap__float { bottom: 24px; }

.brb-display__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; gap: 20px; }
.brb-display__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.brb-display__panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; }
.brb-display__h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.brb-display__text { font-size: 15px; overflow-wrap: anywhere; }
.brb-display__text p:last-child { margin-bottom: 0; }
.brb-display__fact { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; }
.brb-display__fact > i { flex: none; color: var(--ink-500); }
.brb-display__fact > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ink-600); overflow-wrap: anywhere; }
.brb-display__fact b { font-weight: 700; color: var(--ink-900); }
.brb-display__fact a { align-self: flex-start; font-weight: 600; color: var(--red-link); }
.brb-display__none { margin: 0; font-size: 15px; color: var(--ink-500); }
.brb-display__more { align-self: flex-start; white-space: normal; text-align: left; line-height: 1.3; }
/* Features and technologies: an icon or logo tile beside each name. */
.brb-display__marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.brb-display__marks li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.brb-display__mark { display: flex; flex: none; align-items: center; justify-content: center; overflow: hidden; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--ink-50); color: var(--ink-500); font-size: 18px; }
.brb-display__mark--logo { box-sizing: border-box; border: 1px solid var(--ink-200); background: #fff; }
.brb-display__mark--logo img { width: 100%; height: 100%; object-fit: contain; }
.brb-display__list { display: flex; flex-direction: column; margin: -6px 0; padding: 0; list-style: none; }
.brb-display__list li + li { border-top: 1px solid var(--ink-200); }
.brb-display__list li > * { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--ink-900); text-decoration: none; overflow-wrap: anywhere; }
.brb-display__list li > * > i { flex: none; color: var(--ink-500); }
.brb-display__list a:hover b { color: var(--red-link); }

.brb-display__section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 84px; }
.brb-display__add { display: flex; flex-wrap: wrap; gap: 8px; }
.brb-display__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--card-gap); }
.brb-display__gallery .col { flex: none; width: auto; padding: 0; }
.brb-display__gallery a { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: var(--ink-800); }
.brb-display__gallery img { width: 100%; height: 100%; object-fit: cover; }
.brb-display__videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--card-gap); }
.brb-display__video { overflow: hidden; min-width: 0; border: 1px solid var(--ink-200); border-radius: var(--r-lg); }
.brb-display__video iframe, .brb-display__video video, .brb-display__video .wp-video { display: block; width: 100% !important; max-width: 100%; }
.brb-display__video iframe { height: auto; aspect-ratio: 16 / 9; }
.brb-display__video > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 15px; }
.brb-display__reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--card-gap); }
.brb-display__review { display: flex; flex-direction: column; gap: 8px; }
.brb-display__review p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-700); overflow-wrap: anywhere; }
.brb-display__stars { display: inline-flex; gap: 2px; font-size: 15px; }
.brb-display__stars .bi-star { color: var(--ink-300); }

.brb-display__bar { display: none; }

/* ---------- confirm & review (display-confirmation.php) ---------- */
.brb-confirm { gap: 22px; }
.brb-confirm__display { display: flex; align-items: center; gap: 14px; padding: 12px; }
.brb-confirm__thumb { position: relative; flex: none; overflow: hidden; width: 72px; height: 72px; border-radius: var(--r-md); background: var(--ink-800); }
.brb-confirm__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brb-confirm__name { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.brb-confirm__name b { font-size: 16px; font-weight: 700; line-height: 1.25; }
.brb-confirm__name span { font-size: 14px; line-height: 1.4; color: var(--ink-600); }
.brb-confirm__display .brb-btn { flex: none; }
.brb-confirm__form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.brb-confirm__group { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.brb-confirm__group legend, .brb-confirm__title { float: none; width: auto; margin: 0 0 10px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink-900); }
.brb-confirm__title { margin: 0; }
.brb-confirm__group legend span, .brb-confirm__title span { font-weight: 400; color: var(--ink-500); }

/* The choice: two real radios drawn as 56px buttons. */
.brb-confirm__seen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brb-confirm__seen label { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 56px; margin: 0; padding: 8px 12px; border: 1.5px solid var(--ink-300); border-radius: var(--r-lg); background: #fff; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink-900); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.brb-confirm__seen label:hover { border-color: var(--ink-900); }
.brb-confirm__seen label i { flex: none; font-size: 18px; color: var(--ink-500); }
.brb-confirm__seen label:has(input:checked) { border-color: var(--red-600); background: var(--red-100); }
.brb-confirm__seen label:has(input:checked) i { color: var(--red-600); }
.brb-confirm__seen label:has(input:focus-visible), .brb-confirm__stars label:has(input:focus-visible), .brb-confirm__drop:focus-within { outline: 2px solid var(--red-600); outline-offset: 2px; }

.brb-confirm__option { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brb-confirm__option small { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--ink-600); }

/* The rating: five real radios drawn as stars; every star up to the chosen one is filled. */
.brb-confirm__rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.brb-confirm__stars { display: flex; gap: 4px; }
.brb-confirm__stars label { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; border-radius: var(--r-md); font-size: 30px; line-height: 1; color: var(--ink-300); cursor: pointer; }
.brb-confirm__stars label:has(input:checked), .brb-confirm__stars label:has(~ label input:checked) { color: var(--star-500); }
.brb-confirm__stars label:has(input:checked) i::before, .brb-confirm__stars label:has(~ label input:checked) i::before { content: "\f586"; } /* bi-star-fill */
.brb-confirm__ratelabel { font-size: 14px; color: var(--ink-600); }

/* Photos: the file input covers the whole frame, so a tap anywhere opens the picker. Its own text (chosen file names) shows without script. */
.brb-confirm__drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; min-height: 96px; padding: 12px; border: 1.5px dashed var(--ink-300); border-radius: var(--r-lg); background: var(--ink-25); text-align: center; }
.brb-confirm__drop > i { font-size: 24px; color: var(--ink-500); }
.brb-confirm__drop b { font-size: 15px; font-weight: 600; }
.brb-confirm__drop input { max-width: 100%; margin-top: 6px; font-size: 14px; color: var(--ink-600); }
.brb-confirm__drop.is-enhanced input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.brb-confirm__previews { display: flex; flex-wrap: wrap; gap: 8px; }
.brb-confirm__previews:empty { display: none; }
.brb-confirm__previews img { width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; background: var(--ink-800); }
.brb-confirm__counter { display: flex; justify-content: space-between; gap: 12px; }
.brb-confirm__count { flex: none; font-variant-numeric: tabular-nums; }
.brb-confirm textarea.brb-input { border-radius: var(--r-lg); resize: vertical; }

/* ---------- messages on both pages ---------- */
/* The site header prints the handler's messages as Bootstrap alerts (confirming lands back on the
   display page with one). Drawn here as the inline banner; green for success. */
.brb-page--display #primary .col-12 > .alert, .brb-page--confirm #primary .col-12 > .alert { margin-top: 20px; margin-bottom: 0; padding: 12px 14px; border: 0; font-size: 15px; font-weight: 600; }
.brb-page--display #primary .col-12 > .alert-success, .brb-page--confirm #primary .col-12 > .alert-success { background: var(--ok-100); color: var(--ok-800); }
.brb-page--display #primary .col-12 > .alert-warning, .brb-page--confirm #primary .col-12 > .alert-warning { background: var(--warn-100); color: var(--warn-600); }
.brb-page--display #primary .col-12 > .alert-danger, .brb-page--confirm #primary .col-12 > .alert-danger { background: var(--red-100); color: var(--red-900); }
.brb-page--display #primary .col-12 > .alert > i, .brb-page--confirm #primary .col-12 > .alert > i { margin-right: 6px; }
.brb-page--confirm #primary .col-12 > .alert { max-width: calc(var(--container-form) - 2 * var(--gutter)); }
@media (max-width: 720px) { .brb-page--confirm #primary .col-12 > .alert { margin-left: var(--gutter); margin-right: var(--gutter); } }

@media (max-width: 759px) {
  .brb-display { gap: 20px; }
  .brb-display__head { gap: 14px; }
  .brb-display__photo { width: 96px; height: 96px; font-size: 30px; }
  .brb-display__title { flex-basis: 180px; }
  .brb-display .brb-h1 { font-size: 26px; }
  /* What the bar carries is left out of the page; anything else stays as full-width buttons. */
  .brb-display__actions { flex-basis: 100%; }
  .brb-display__actions .is-inbar { display: none; }
  .brb-display__actions:not(:has(> :not(.is-inbar))) { display: none; }
  .brb-display__actions .brb-btn { flex: 1 1 100%; }
  .brb-display__bar { position: sticky; bottom: 0; z-index: 900; display: flex; gap: 8px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink-200); background: #fff; box-shadow: var(--shadow-sticky); }
  .brb-display__bar .brb-btn--primary { flex: 1; min-width: 0; font-size: 16px; }
  .brb-display__icon { flex: none; width: 48px; padding: 0; font-size: 18px; }
  .brb-display__fact a { display: inline-flex; align-items: center; min-height: 44px; }
  .brb-confirm__display { gap: 12px; }
}

/* ---------- owner dashboard (display-administration.php) ---------- */
.brb-dash { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; padding-bottom: 8px; }
.brb-dash__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; }
.brb-dash__logo { display: flex; flex: none; align-items: center; justify-content: center; overflow: hidden; width: 64px; height: 64px; border: 1px solid var(--ink-200); border-radius: var(--r-xl); background: var(--ink-100); color: var(--ink-400); font-size: 22px; }
.brb-dash__logo img { width: 100%; height: 100%; object-fit: cover; }
.brb-dash__headtext { display: flex; flex: 1 1 240px; flex-direction: column; gap: 6px; min-width: 0; }
.brb-dash__headtext h1 { margin: 0; }
.brb-dash__eyebrow { color: var(--red-600); }
.brb-dash__headtext p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-600); }
.brb-dash__headactions { display: flex; gap: 8px; }

.brb-dash__share > div { display: flex; gap: 8px; }
.brb-dash__share .brb-input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; background: var(--ink-25); font-size: 14px; color: var(--ink-700); text-overflow: ellipsis; }
.brb-dash__share .brb-btn { flex: none; font-size: 14px; }

.brb-dash__progress { display: flex; flex-direction: column; gap: 8px; }
.brb-dash__progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; }
.brb-dash__progress span { font-size: 14px; color: var(--ink-600); font-variant-numeric: tabular-nums; }
.brb-dash__bar { overflow: hidden; height: 8px; border-radius: var(--r-pill); background: #eef0f3; }
.brb-dash__bar > div { height: 100%; border-radius: var(--r-pill); background: var(--ok-600); }
.brb-dash__progress .brb-dash__note { font-size: 13px; color: var(--ink-400); }

/* Community dashboard: glance tiles, then the nearby and season panels, above the section rows. */
.brb-dash__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.brb-dtile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--ink-50); font-size: 13px; color: var(--ink-600); text-decoration: none; }
.brb-dtile:hover { color: var(--ink-600); text-decoration: none; }
.brb-dtile > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.brb-dtile b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.brb-dtile small, .brb-season__count small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-600); }
.brb-dtile em { font-style: normal; }
.brb-dtile__bar { overflow: hidden; height: 6px; margin: 4px 0 2px; border-radius: var(--r-pill); background: var(--ink-200); }
.brb-dtile__bar i { display: block; height: 100%; background: var(--ok-600); }
.brb-dtile--ok { background: var(--ok-100); }
.brb-dtile--ok > span:first-child, .brb-dtile--ok em { font-weight: 600; color: var(--ok-600); }
.brb-dtile--ok > span:first-child { font-weight: 700; }
.brb-dtile--ok .brb-dtile__bar { background: rgba(6, 122, 85, 0.15); }
.brb-dtile--red { background: var(--red-100); }
.brb-dtile--red > span:first-child { color: var(--red-600); }

.brb-dpanel { overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--r-lg); scroll-margin-top: 80px; }
.brb-dash__progress { scroll-margin-top: 80px; }
.brb-dpanel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; }
.brb-dpanel__head--band { border-bottom: 1px solid var(--ink-200); background: var(--ink-25); }
.brb-dpanel__head > div { display: flex; flex: 1 1 200px; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--ink-500); }
.brb-dpanel__head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.brb-dpanel form { margin: 0; }
.brb-dpanel .brb-dash__tile--red { background: var(--red-100); color: var(--red-600); }
.brb-dpanel .brb-dash__tile--ok { background: var(--ok-100); color: var(--ok-600); }
.brb-dpanel__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ink-200); }
.brb-dpanel__head--band + .brb-dpanel__row { border-top: 0; }
.brb-dpanel__row img { flex: none; width: 56px; height: 42px; border-radius: var(--r-sm); background: var(--ink-800); object-fit: cover; }
.brb-dpanel__name { display: flex; flex: 1 1 180px; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.brb-dpanel__name a, .brb-dpanel__name b { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink-900); text-decoration: none; }
.brb-dpanel__name a:hover { text-decoration: underline; }
.brb-dpanel__name > span:not(.brb-chip) { font-size: 13px; color: var(--ink-500); }
.brb-dpanel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-500); }
.brb-dpanel__hint { flex: 0 0 100%; margin: 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--ok-100); color: var(--ok-800); font-size: 14px; font-weight: 600; }
.brb-dpanel__empty { font-size: 14px; color: var(--ink-500); }
.brb-dpanel__note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--ink-200); background: var(--ok-100); color: var(--ok-800); font-size: 14px; font-weight: 600; }
.brb-dpanel__note--muted { background: var(--ink-50); color: var(--ink-600); }
.brb-dpanel__note button { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.brb-dpanel__note + .brb-dpanel__row { border-top: 0; }
.brb-dpanel__ignored { border-top: 1px solid var(--ink-200); }
.brb-dpanel__ignored summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 44px; padding: 6px 16px; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink-600); cursor: pointer; }
.brb-dpanel__ignored summary::-webkit-details-marker { display: none; }
.brb-dpanel__ignored summary span { flex: 1 1 260px; font-size: 13px; font-weight: 400; color: var(--ink-400); text-align: right; }
.brb-dpanel__ignored[open] summary i { transform: rotate(180deg); }
.brb-dpanel__ignored .brb-dpanel__row { background: var(--ink-25); }
.brb-dpanel__ignored .brb-dpanel__row img { opacity: 0.4; }
.brb-dpanel__ignored .brb-dpanel__name b { font-weight: 600; color: var(--ink-500); }
.brb-dpanel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ink-200); font-size: 13px; color: var(--ink-500); }
.brb-dpanel__foot span { flex: 1 1 300px; }

.brb-season { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.brb-season__count { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.brb-season__count b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.brb-season__count small { font-size: 15px; }
.brb-season__count em { font-size: 14px; font-style: normal; font-weight: 600; color: var(--ok-600); }
.brb-season__bar { display: flex; overflow: hidden; height: 10px; border-radius: var(--r-pill); background: #eef0f3; }
.brb-season__bar i { display: block; height: 100%; background: var(--ok-600); }
.brb-season__bar i + i { background: #8fd3b5; }
.brb-season__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-600); }
.brb-season__legend li { display: flex; align-items: center; gap: 6px; }
.brb-season__legend li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ok-600); }
.brb-season__legend li:nth-child(2)::before { background: #8fd3b5; }
.brb-season__legend li:nth-child(3)::before { border: 1px solid var(--ink-300); background: #eef0f3; }
.brb-season p { margin: 0; font-size: 14px; color: var(--ink-600); }
.brb-season__filter { flex-wrap: wrap; align-self: flex-start; margin-top: 6px; }

/* Section rows. A row with items is a <details>; its <summary> is the row. */
.brb-dash__rows { border: 1px solid var(--ink-200); border-radius: var(--r-lg); overflow: hidden; }
.brb-dash__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 14px; padding: 14px 16px; }
.brb-dash__row + .brb-dash__row { border-top: 1px solid var(--ink-200); }
.brb-dash__details { min-width: 0; }
.brb-dash__summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; list-style: none; }
.brb-dash__summary::-webkit-details-marker { display: none; }
summary.brb-dash__summary { cursor: pointer; border-radius: var(--r-md); }
.brb-dash__tile { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--ink-50); color: var(--ink-500); font-size: 18px; }
.brb-dash__row.is-done .brb-dash__tile { background: var(--ok-100); color: var(--ok-600); }
.brb-dash__title { grid-column: 2; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.brb-dash__title i { color: var(--ok-600); font-size: 14px; }
.brb-dash__status { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--ink-500); text-wrap: pretty; }
.brb-dash__chev { grid-column: 3; grid-row: 1 / span 2; color: var(--ink-500); transition: transform 0.15s; }
.brb-dash__details[open] .brb-dash__chev { transform: rotate(180deg); }
.brb-dash__action { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-self: start; }

.brb-dash__items { margin: 12px 0 0; padding: 0 0 0 54px; list-style: none; }
.brb-dash__items li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--ink-100); font-size: 14px; }
.brb-dash__thumb { flex: none; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--ink-800); object-fit: cover; }
/* Ready-made content inside a row (the founder's guide). */
.brb-dash__html { margin: 12px 0 0; padding: 0 0 0 54px; font-size: 14px; line-height: 1.55; color: var(--ink-700); }
.brb-dash__html h3 { margin: 14px 0 4px; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.brb-dash__html p { margin: 0 0 6px; }
.brb-dash__row { scroll-margin-top: 90px; }
.brb-dash__item { display: flex; flex: 1 1 160px; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.brb-dash__itemtitle { font-weight: 600; color: var(--ink-900); }
a.brb-dash__itemtitle { color: var(--red-link); }
.brb-dash__itemmeta { color: var(--ink-600); line-height: 1.45; }
.brb-dash__stars { display: flex; gap: 2px; color: var(--star-500); font-size: 13px; }
.brb-dash__itemactions { display: flex; flex: none; gap: 4px 16px; }
.brb-dash__itemactions a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; color: var(--red-link); text-decoration: none; }
.brb-dash__itemactions a:hover { text-decoration: underline; }

/* ---------- search results (search.php) ---------- */
.brb-search__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.brb-search__form .brb-input { flex: 1 1 240px; width: auto; max-width: 420px; height: 44px; padding: 0 12px; }

/* ---------- songs editor (displaysong-registration.php) ---------- */
.brb-banner--error { background: var(--red-100); color: var(--red-900); }
.brb-songs__rows { overflow: hidden; margin: 4px 0 0; padding: 0; border: 1px solid var(--ink-200); border-radius: var(--r-lg); list-style: none; counter-reset: song; }
.brb-songs__row { display: grid; grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 12px; counter-increment: song; }
.brb-songs__row + .brb-songs__row { border-top: 1px solid var(--ink-200); }
.brb-songs__row::before { content: counter(song); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-500); text-align: center; }
.brb-songs__row .brb-input { min-width: 0; height: 44px; padding: 0 12px; font-size: 15px; }
.brb-songs__tools { display: flex; gap: 2px; }
.brb-songs__tools button { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px; border: 0; border-radius: var(--r-md); background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-600); cursor: pointer; }
.brb-songs__tools button:hover { background: var(--ink-100); color: var(--ink-900); }
.brb-songs__row:first-child [data-song="up"] { visibility: hidden; }
.brb-songs__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.brb-songs__bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter); border-top: 1px solid var(--ink-200); background: #fff; box-shadow: var(--shadow-sticky); }
.brb-songs__status { flex: 1 1 140px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-600); }
.brb-songs__bar .brb-btn--primary { padding: 0 28px; }
@media (max-width: 759px) {
  .brb-songs__row { grid-template-columns: 24px minmax(0, 1fr); }
  .brb-songs__row > * { grid-column: 2; }
  .brb-songs__tools button { height: 44px; }
  .brb-songs__row:first-child [data-song="up"] { display: none; }
}

/* ---------- start a community (brb-start-a-community.php) ---------- */
.brb-start__hero { border-bottom: 1px solid var(--ink-200); background: var(--ink-50); }
.brb-start__hero > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 40px; padding-bottom: 40px; }
.brb-start__h1 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.brb-start__hero p { max-width: 680px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-700); }
.brb-start__hero .brb-btn, .brb-start__band .brb-btn { padding: 0 22px; font-size: 16px; }
.brb-start { display: flex; flex-direction: column; gap: 24px; max-width: 1100px; padding-top: 40px; padding-bottom: 8px; }
.brb-start .brb-h2 { font-size: 24px; }
.brb-start__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.brb-start__feature { display: flex; flex-direction: column; gap: 12px; }
.brb-start__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-xl); background: var(--ink-50); }
.brb-start__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.brb-start__n { font-size: 13px; font-weight: 700; color: var(--red-600); font-variant-numeric: tabular-nums; }
.brb-start__feature h3 { margin: -6px 0 0; font-size: 20px; font-weight: 800; }
.brb-start__feature p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.brb-start__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-radius: var(--r-xl); background: var(--ink-900); color: #fff; font-size: 18px; font-weight: 700; }

@media (max-width: 759px) {
  .brb-dash__headactions .brb-btn, .brb-dpanel .brb-btn { height: 44px; }
  .brb-season__filter a { height: 44px; }
  .brb-dpanel__ignored summary span { text-align: left; }
  .brb-dash__row { grid-template-columns: minmax(0, 1fr); }
  .brb-dash__summary { min-height: 44px; }
  .brb-dash__action { justify-content: flex-start; margin-left: 54px; }
  .brb-dash__action .brb-btn { height: 44px; }
  .brb-dash__items { padding-left: 0; }
  .brb-dash__html { padding-left: 0; }
  .brb-dash__items a.brb-dash__itemtitle { display: inline-flex; align-items: center; min-height: 44px; }
  .brb-dash__itemactions a { min-height: 44px; }
  .brb-dash .brb-attention .brb-btn { height: 44px; }
  .brb-start__hero > div { padding-top: 28px; padding-bottom: 28px; }
  .brb-start__hero .brb-btn, .brb-start__band .brb-btn { width: 100%; }
}

/* ---------- email preferences ---------- */
.brb-prefs { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; padding-bottom: 40px; }
.brb-prefs__crumb { font-size: 14px; color: var(--ink-500); }
.brb-prefs__crumb a { color: var(--ink-500); }
.brb-prefs__intro { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-700); overflow-wrap: anywhere; }
.brb-prefs__intro b { color: var(--ink-900); }
.brb-prefs__form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.brb-prefs__list { overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: #fff; }
.brb-prefs__row { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 16px; cursor: pointer; }
.brb-prefs__row + .brb-prefs__row { border-top: 1px solid var(--ink-200); }
.brb-prefs__row > span { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.brb-prefs__row b { font-size: 15px; font-weight: 700; }
.brb-prefs__row > span > span { font-size: 14px; color: var(--ink-500); }
.brb-prefs__row small { font-size: 12px; color: var(--ink-500); }
/* A real checkbox drawn as the 36×20 switch; the padding and row give it a 44px target. */
.brb-switch { flex: none; appearance: none; -webkit-appearance: none; position: relative; box-sizing: content-box; width: 36px; height: 20px; margin: 0; padding: 12px 4px; border: 0; background: none; cursor: pointer; }
.brb-switch::before { content: ""; position: absolute; top: 12px; left: 4px; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--ink-300); transition: background-color 0.15s; }
.brb-switch::after { content: ""; position: absolute; top: 14px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.brb-switch:checked::before { background: var(--red-600); }
.brb-switch:checked::after { transform: translateX(16px); }
.brb-switch:focus-visible { outline: 2px solid var(--red-600); outline-offset: -2px; border-radius: var(--r-md); }
.brb-switch:disabled { opacity: 0.6; cursor: progress; }
.brb-prefs__row .brb-switch { margin: -10px -4px; }
.brb-prefs__state { display: flex; justify-content: center; min-height: 30px; margin: 0; }
.brb-prefs__error { font-size: 14px; font-weight: 600; color: var(--red-link); }
.brb-prefs__all { align-self: center; min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink-500); text-decoration: underline; cursor: pointer; }
.brb-prefs__all:hover { color: var(--ink-900); }

/* ---------- pages not individually redesigned yet ----------
   Sign in, register, reset, add display and the other old form cards (archetype D),
   and plain text pages such as Support, Privacy and Terms (archetype G).
   These restyle the existing Bootstrap markup; redesigned pages carry .brb-page and are skipped. */

/* The header's red button already offers this, so the menu doesn't repeat it. */
.brb-nav__list li:has(> a[href*="display-registration"]) { display: none; }

/* Form cards */
body:not(.brb-page) .form-container { max-width: var(--container-form); height: auto; margin: 0 auto; padding: 28px var(--gutter) 40px; }
body:not(.brb-page) .form-card { border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: none; }
body:not(.brb-page) .form-header h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
body:not(.brb-page) .form-header .text-primary, body:not(.brb-page) .form-header h1 > i { color: var(--red-600) !important; }
body:not(.brb-page) .form-subtitle { color: var(--ink-600); }
body:not(.brb-page) .form-card .form-control,
body:not(.brb-page) .form-card .form-select { border: 1px solid var(--ink-300); border-radius: var(--r-md); background-color: #fff; color: var(--ink-900); box-shadow: none; }
body:not(.brb-page) .form-card .form-control:focus,
body:not(.brb-page) .form-card .form-select:focus { border-color: var(--red-600); box-shadow: 0 0 0 3px var(--red-100); }
body:not(.brb-page) .form-card .form-check-input:checked { border-color: var(--red-600); background-color: var(--red-600); }
body:not(.brb-page) .form-card .form-text { font-size: 13px; color: var(--ink-500); }
body:not(.brb-page) .form-card .btn-save { height: 52px; border: 0; border-radius: var(--r-md); background: var(--red-600); color: #fff; font-size: 16px; font-weight: 700; box-shadow: none; }
body:not(.brb-page) .form-card .btn-save:hover { background: var(--red-700); color: #fff; }
/* Other buttons in a form card are secondary: one red action per page. */
body:not(.brb-page) .form-card .btn:not(.btn-save) { height: 40px; padding: 0 14px; border: 1px solid var(--ink-300); border-radius: var(--r-md); background: #fff; color: var(--ink-900); font-size: 14px; font-weight: 600; line-height: 38px; box-shadow: none; }
body:not(.brb-page) .form-card .btn:not(.btn-save):hover { border-color: var(--ink-900); color: var(--ink-900); }
/* The show-password button belongs inside the field, not under it. */
body:not(.brb-page) .form-floating > .password-toggle { position: absolute; top: 9px; right: 8px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-500); font-size: 18px; }
body:not(.brb-page) .form-floating > .password-toggle:hover { background: var(--ink-100); color: var(--ink-900); }
body:not(.brb-page) .form-floating > .password-toggle ~ .form-text { margin-top: 6px; }
body:not(.brb-page) .form-floating:has(> .password-toggle) > .form-control { padding-right: 56px; }

/* Text pages: a plain heading and a readable column instead of a hero band. */
body:not(.brb-page) #theme-main .bg-light-subtle.py-5 { padding: 28px 0 0 !important; background: none !important; }
body:not(.brb-page) #theme-main .bg-light-subtle.py-5 > .container { box-sizing: border-box; max-width: var(--container-prose); padding: 0 var(--gutter); text-align: left !important; }
body:not(.brb-page) #theme-main .display-4 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
body:not(.brb-page) #theme-main .col-md-10.offset-md-1 { box-sizing: border-box; flex: 0 0 auto; width: 100%; max-width: var(--container-prose); margin: 0 auto; padding: 16px var(--gutter) 40px !important; font-size: 16px; line-height: 1.6; color: var(--ink-700); overflow-wrap: anywhere; }
body:not(.brb-page) #theme-main .col-md-10.offset-md-1 :is(h2, h3, h4) { margin: 24px 0 8px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-900); }
body:not(.brb-page) #theme-main .col-md-10.offset-md-1 h2 { font-size: 22px; }
body:not(.brb-page) #theme-main .col-md-10.offset-md-1 h3 { font-size: 18px; }
body:not(.brb-page) #theme-main .col-md-10.offset-md-1 :is(ul, ol) li + li { margin-top: 4px; }
body:not(.brb-page) #theme-main .wp-block-table { overflow-x: auto; }
body:not(.brb-page) #theme-main .col-md-10.offset-md-1 img { max-width: 100%; height: auto; }

/* Every other page still on Bootstrap markup (contact, invitations, import, songs, videos, contest
   settings, directions): the redesign's headings, buttons, fields and cards, in a centred column. */
body:is(.page-template-contact, .page-template-communityambassador-invitation, .page-template-communityambassador-application, .page-template-display-import) #primary { box-sizing: border-box; max-width: var(--container-form); margin: 0 auto; padding: 28px var(--gutter) 0 !important; }
body:is(.page-template-displaysong-registration, .page-template-displayvideo-registration, .page-template-displaysongs, .page-template-displayfeatures, .page-template-displaytechnologies) #primary { max-width: var(--container-narrow); margin: 0 auto; padding-top: 28px !important; }
body:not(.brb-page) #primary :is(h1, .h1) { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-900) !important; }
body:not(.brb-page) #primary :is(h1, .h1) > i { color: var(--red-600); }
body:not(.brb-page) #primary :is(h2, .h2) { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
body:not(.brb-page) #primary :is(h3, .h3, .h4) { font-size: 18px; font-weight: 700; }
body:not(.brb-page) #primary .lead { font-size: 17px; color: var(--ink-600); }
body:not(.brb-page) #primary .btn { border-radius: var(--r-md) !important; font-weight: 600; box-shadow: none !important; }
body:not(.brb-page) #primary .btn:is(.btn-primary, .btn-danger, .btn-success) { border-color: var(--red-600) !important; background: var(--red-600) !important; color: #fff !important; font-weight: 700; }
body:not(.brb-page) #primary .btn:is(.btn-primary, .btn-danger, .btn-success):hover { border-color: var(--red-700) !important; background: var(--red-700) !important; }
body:not(.brb-page) #primary .btn:is([class*="btn-outline-"], .btn-secondary, .btn-light, .btn-link) { border: 1px solid var(--ink-300) !important; background: #fff !important; color: var(--ink-900) !important; text-decoration: none; }
body:not(.brb-page) #primary .btn:is([class*="btn-outline-"], .btn-secondary, .btn-light, .btn-link):hover { border-color: var(--ink-900) !important; }
/* Inside a form card only the save button is red. */
body:not(.brb-page) #primary .form-card .btn:not(.btn-save) { height: auto; min-height: 40px; padding: 8px 14px; border: 1px solid var(--ink-300) !important; background: #fff !important; color: var(--ink-900) !important; font-weight: 600; line-height: 1.3; }
body:not(.brb-page) #primary :is(.form-control, .form-select) { border: 1px solid var(--ink-300); border-radius: var(--r-md); background-color: #fff; color: var(--ink-900); box-shadow: none; }
body:not(.brb-page) #primary :is(.form-control, .form-select):focus { border-color: var(--red-600); box-shadow: 0 0 0 3px var(--red-100); }
body:not(.brb-page) #primary .form-check-input:checked { border-color: var(--red-600); background-color: var(--red-600); }
body:not(.brb-page) #primary .card { border: 1px solid var(--ink-200) !important; border-radius: var(--r-lg); box-shadow: none !important; }
body:not(.brb-page) #primary .card-header { border-bottom: 1px solid var(--ink-200); background: var(--ink-25); font-weight: 700; }
body:not(.brb-page) #primary :is(.bg-dark, .text-bg-dark) { border: 1px solid var(--ink-200); border-radius: var(--r-lg) !important; background: var(--ink-50) !important; color: var(--ink-700) !important; }
body:not(.brb-page) #primary .pagination { gap: 4px; }
body:not(.brb-page) #primary .page-link { min-width: 44px; height: 44px; border: 1px solid var(--ink-200); border-radius: var(--r-md) !important; color: var(--ink-900); font-size: 15px; font-weight: 600; line-height: 30px; text-align: center; box-shadow: none; }
body:not(.brb-page) #primary .page-item.active .page-link, body:not(.brb-page) #primary .page-link.current { border-color: var(--ink-900); background: var(--ink-900); color: #fff; }

/* Alerts across the site: flat, bordered, no accent stripe. */
#primary .alert { border-radius: var(--r-lg); }
body:not(.brb-page) .form-progress .progress-bar { background: var(--red-600); }


/* ---------- phones ---------- */
@media (max-width: 759px) {
  .brb-header__row { flex-wrap: wrap; gap: 0 10px; padding: 10px 12px 10px 16px; }
  .brb-header__brand { flex: 1; gap: 10px; }
  .brb-header__logo { width: 36px; height: 36px; }
  .brb-header__logo--bulb { font-size: 18px; }
  .brb-header__name b { font-size: 17px; }
  .brb-header__name span { font-size: 11px; }
  .brb-header__menu { display: flex; }
  .brb-nav { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 10px -12px -10px -16px; padding: 8px 8px 12px; border-top: 1px solid var(--ink-200); }
  .brb-nav.is-open { display: flex; }
  .brb-nav__list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .brb-nav__list a { height: 48px; font-size: 16px; color: var(--ink-900); }
  .brb-nav__list .current-menu-item > a { background: var(--ink-50); box-shadow: none; }
  .brb-nav__list .sub-menu { display: block; position: static; min-width: 0; padding: 0 0 0 16px; border: 0; box-shadow: none; }
  .brb-nav__list .menu-item-has-children > a::after { content: none; }
  .brb-nav__add { height: 48px; margin-top: 8px; font-size: 16px; }
  .brb-map { height: 260px; }
  .brb-stack { padding-top: 20px; }
}