/* ==========================================================================
   Cultivator brand family (general_pages/cultivator_brand_family.html)
   --------------------------------------------------------------------------
   Scoped under .cc-bf and built from the brand tokens in css/styles.css.
   Behaviour: js/pages/products/cultivatorBrandFamily_10042026.js. Notes:
   docs/CULTIVATOR_BRAND_FAMILY.md.

   Refactoring UI principles applied:
   * One spacing scale (--bf-space-*), one radius pair, one type scale.
   * The search is the primary action: the largest field on the page with
     the only solid green button. Everything else is quieter.
   * Color carries meaning and is explained: a key beside the graph names
     the green (parent), grey (child) and blue (focused) dots.
   * Hierarchy through weight and color before size; numbers lead in stats.
   * Brands without logos get a monogram, not an empty "No logo" box.
   * Admin tools are set apart (their own surface and pink accent), shown
     only to admins, and the one destructive action is outlined in pink and
     confirmed.
   * Separation from spacing and surface tone; borders stay low-contrast.
   * Motion is short and off under prefers-reduced-motion.
   ========================================================================== */

.cc-bf {
  --bf-space-1: 0.25rem;
  --bf-space-2: 0.5rem;
  --bf-space-3: 0.75rem;
  --bf-space-4: 1rem;
  --bf-space-5: 1.5rem;
  --bf-space-6: 2rem;
  --bf-space-7: 3rem;
  --bf-radius: 16px;
  --bf-radius-sm: 10px;
  --bf-gutter: 1rem;
  --bf-surface: var(--cc-surface-1, #1a1a1a);
  --bf-raised: var(--cc-surface-2, #242424);
  --bf-field: #101010;
  --bf-border: rgba(var(--cc-bone-rgb), 0.1);
  --bf-border-strong: rgba(var(--cc-bone-rgb), 0.18);
  --bf-muted: var(--cc-muted, #b3b3b3);
  --bf-target: 40px;
  --bf-parent: #95c11f;
  --bf-leaf: #8a8a8a;
  --bf-focus: #2dd4ff;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--bf-space-7) var(--bf-gutter) 4rem;
  color: var(--cc-bone);
}

@media (min-width: 768px) { .cc-bf { --bf-gutter: 1.5rem; } }
@media (min-width: 1200px) { .cc-bf { --bf-gutter: 2rem; } }
@media (pointer: coarse) { .cc-bf { --bf-target: 44px; } }

.cc-bf :is(button, a, input):focus-visible {
  outline: 3px solid var(--cc-bone);
  outline-offset: 2px;
  box-shadow: none;
}

/* ----------------------------------------------------------- Shared type */
.cc-bf-eyebrow {
  margin: 0 0 var(--bf-space-2);
  color: var(--cc-green);
  font: 600 0.75rem/1.5 var(--cc-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cc-bf-eyebrow--admin { color: var(--cc-pink-hover, #ff5288); margin: 0; }

.cc-bf-muted { margin: 0; color: var(--bf-muted); font-size: 0.8125rem; line-height: 1.5; }

.cc-bf-section-title {
  margin: 0 0 var(--bf-space-3);
  color: var(--cc-bone);
  font: 600 0.75rem/1.4 var(--cc-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Fields: a 3:1+ outline on the #101010 fill. These outrank the site-wide
   default field border in styles.css by specificity, without !important. */
.cc-bf .cc-bf-search input.form-control,
.cc-bf .cc-bf-directory__filter input.form-control,
.cc-bf .cc-bf-form input.form-control {
  min-height: 44px;
  color: var(--cc-bone);
  background-color: var(--bf-field);
  border: 1px solid var(--cc-control-border, #707070);
  border-radius: var(--bf-radius-sm);
  font-size: 0.9375rem;
}

.cc-bf .cc-bf-search input.form-control::placeholder,
.cc-bf .cc-bf-directory__filter input.form-control::placeholder,
.cc-bf .cc-bf-form input.form-control::placeholder { color: #a6a6a6; opacity: 1; }

.cc-bf .cc-bf-search input.form-control:focus,
.cc-bf .cc-bf-directory__filter input.form-control:focus,
.cc-bf .cc-bf-form input.form-control:focus {
  border-color: var(--cc-green);
  box-shadow: 0 0 0 3px rgba(var(--cc-green-rgb), 0.18);
}

/* Quiet secondary button (reset, admin shortcuts). */
.cc-bf-quiet-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  min-height: var(--bf-target);
  padding: 0 var(--bf-space-3);
  border: 1px solid var(--bf-border-strong);
  border-radius: var(--bf-radius-sm);
  background: transparent;
  color: var(--cc-bone);
  font: 600 0.8125rem/1 var(--cc-font-body);
  transition: background-color var(--cc-motion-fast, 160ms) ease, border-color var(--cc-motion-fast, 160ms) ease;
}

.cc-bf-quiet-btn:hover { background: var(--bf-raised); border-color: #777; }
.cc-bf-quiet-btn[hidden] { display: none; }

/* ------------------------------------------------------------------ Hero */
.cc-bf-hero {
  display: grid;
  gap: var(--bf-space-5);
  margin-bottom: var(--bf-space-6);
}

@media (min-width: 992px) {
  .cc-bf-hero {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 36rem);
    align-items: center;
    gap: var(--bf-space-6);
  }
}

.cc-bf-hero h1 {
  margin: 0 0 var(--bf-space-4);
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1.05;
}

.cc-bf-intro { max-width: 38rem; margin: 0; color: var(--bf-muted); line-height: 1.7; }

.cc-bf-search-card {
  display: grid;
  gap: var(--bf-space-4);
  padding: var(--bf-space-5);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  background: var(--bf-surface);
}

.cc-bf-search { display: grid; gap: var(--bf-space-2); }
.cc-bf-search__label { font: 600 0.875rem/1.5 var(--cc-font-body); }

.cc-bf-search__field { position: relative; display: flex; gap: var(--bf-space-2); }

.cc-bf-search__icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--bf-muted);
  pointer-events: none;
}

.cc-bf .cc-bf-search input.cc-bf-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding-left: 2.75rem;
  font-size: 1rem;
}

.cc-bf .cc-bf-search__submit {
  flex: none;
  min-height: 52px;
  padding-inline: var(--bf-space-5);
  border-radius: var(--bf-radius-sm);
  font: 600 0.9375rem/1 var(--cc-font-body);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.cc-bf-search__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-2) var(--bf-space-3);
}

.cc-bf-status { min-height: 1.25rem; margin: 0; color: var(--bf-muted); font-size: 0.8125rem; line-height: 1.5; }
.cc-bf-status[data-tone="error"] { color: var(--cc-pink-hover, #ff5288); }

/* Totals: numbers first. */
.cc-bf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bf-space-2);
  margin: 0;
}

.cc-bf-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--bf-space-1);
  padding: var(--bf-space-3);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-raised);
}

.cc-bf-stat__label {
  color: var(--bf-muted);
  font: 600 0.6875rem/1.3 var(--cc-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-bf-stat__value {
  margin: 0;
  color: var(--cc-bone);
  font: 700 1.5rem/1 var(--cc-font-body);
  font-variant-numeric: tabular-nums;
}

.cc-bf-stat__value.is-accent { color: var(--cc-green); }

/* ------------------------------------------------------------- Workspace */
.cc-bf-workspace {
  display: grid;
  gap: var(--bf-space-5);
  align-items: start;
  margin-bottom: var(--bf-space-6);
}

@media (min-width: 1200px) {
  .cc-bf-workspace { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
}

.cc-bf-stage,
.cc-bf-panel {
  min-width: 0;
  padding: var(--bf-space-4);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  background: var(--bf-surface);
}

@media (min-width: 768px) {
  .cc-bf-stage,
  .cc-bf-panel { padding: var(--bf-space-5); }
}

.cc-bf-stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--bf-space-3) var(--bf-space-5);
  margin-bottom: var(--bf-space-4);
}

.cc-bf-stage__title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.cc-bf-stage__title:focus { outline: none; }
.cc-bf-stage__title:focus-visible { outline: 3px solid var(--cc-bone); outline-offset: 4px; }

/* Graph key */
.cc-bf-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2) var(--bf-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bf-muted);
  font-size: 0.8125rem;
}

.cc-bf-key li { display: inline-flex; align-items: center; gap: var(--bf-space-2); }

.cc-bf-dot {
  display: inline-block;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.cc-bf-dot--parent { background: var(--bf-parent); }
.cc-bf-dot--leaf { background: var(--bf-leaf); }
.cc-bf-dot--focus { background: var(--bf-focus); }

/* Canvas: a dark dot grid reads as "a surface you can move". */
.cc-bf-canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background-color: rgba(var(--cc-black-rgb), 0.55);
  background-image: radial-gradient(rgba(var(--cc-bone-rgb), 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}

.cc-bf-graph {
  position: relative;
  width: 100%;
  height: clamp(380px, 62vh, 680px);
  touch-action: none;
}

.cc-bf-logos {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.cc-bf-logo {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: 2px solid var(--cc-black);
  border-radius: 50%;
  background: var(--cc-charcoal);
  object-fit: cover;
  transition: opacity var(--cc-motion-fast, 160ms) ease;
}

.cc-bf-logo.is-focus { border: 3px solid var(--bf-focus); }
.cc-bf-logo.is-dimmed { opacity: 0.2; }

.cc-bf-toolbar {
  position: absolute;
  right: var(--bf-space-3);
  bottom: var(--bf-space-3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--bf-border-strong);
  border-radius: 12px;
  background: rgba(var(--cc-charcoal-rgb), 0.92);
}

.cc-bf-toolbar[hidden] { display: none; }

.cc-bf-tool {
  display: grid;
  place-items: center;
  width: var(--bf-target);
  height: var(--bf-target);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cc-bone);
}

.cc-bf-tool:hover { background: rgba(var(--cc-green-rgb), 0.14); color: var(--cc-green); }

.cc-bf-empty {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: var(--bf-space-2);
  padding: var(--bf-space-5);
  text-align: center;
}

.cc-bf-empty[hidden] { display: none; }
.cc-bf-empty__title { margin: 0; font: 400 1.75rem/1.1 var(--cc-font-display); letter-spacing: 0.02em; }
.cc-bf-empty__body { max-width: 30rem; margin: 0; color: var(--bf-muted); }

.cc-bf-hint { margin: var(--bf-space-3) 0 0; color: var(--bf-muted); font-size: 0.75rem; line-height: 1.4; }

/* ----------------------------------------------------------------- Panel */
.cc-bf-panel__head {
  display: flex;
  align-items: center;
  gap: var(--bf-space-4);
  margin-bottom: var(--bf-space-4);
}

.cc-bf-panel__mark[hidden] { display: none; }
.cc-bf-panel__identity { min-width: 0; }
.cc-bf-panel__identity .cc-bf-eyebrow { margin-bottom: var(--bf-space-1); }

.cc-bf-panel__title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.cc-bf-panel__body { display: grid; gap: var(--bf-space-4); }

.cc-bf-cultivator { margin: 0; font-size: 0.875rem; }
.cc-bf-cultivator strong { color: var(--cc-bone); font-weight: 600; }

.cc-bf-role {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin: 0;
  color: var(--bf-muted);
  font-size: 0.8125rem;
}

.cc-bf-group { padding-top: var(--bf-space-4); border-top: 1px solid var(--bf-border); }

.cc-bf-group__label {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin: 0 0 var(--bf-space-2);
  color: var(--cc-bone);
  font: 600 0.75rem/1.4 var(--cc-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-bf-group__count { color: var(--bf-muted); font-variant-numeric: tabular-nums; }
.cc-bf-group__count::before { content: "· "; }

/* Brand marks: logo or monogram */
.cc-bf-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--bf-border-strong);
  border-radius: 50%;
  background: var(--cc-bone);
}

.cc-bf-mark img { width: 100%; height: 100%; object-fit: contain; }

.cc-bf-mark.is-monogram {
  border-color: rgba(var(--cc-green-rgb), 0.35);
  background: rgba(var(--cc-green-rgb), 0.1);
}

.cc-bf-mark__monogram {
  color: var(--cc-green);
  font: 400 1em/1 var(--cc-font-display);
  letter-spacing: 0.04em;
}

.cc-bf-mark--xs { width: 24px; height: 24px; font-size: 0.6875rem; }
.cc-bf-mark--md { width: 48px; height: 48px; font-size: 1.125rem; }
.cc-bf-mark--lg { width: 72px; height: 72px; font-size: 1.75rem; border-color: var(--bf-focus); border-width: 2px; }

/* Relation chips */
.cc-bf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-bf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  max-width: 100%;
  min-height: var(--bf-target);
  padding: 0 0.875rem 0 0.375rem;
  border: 1px solid var(--bf-border-strong);
  border-radius: 999px;
  background: var(--bf-raised);
  color: var(--cc-bone);
  font: 500 0.8125rem/1.2 var(--cc-font-body);
  text-align: left;
  transition: background-color var(--cc-motion-fast, 160ms) ease, border-color var(--cc-motion-fast, 160ms) ease, color var(--cc-motion-fast, 160ms) ease;
}

.cc-bf-chip:hover {
  border-color: rgba(var(--cc-green-rgb), 0.6);
  background: rgba(var(--cc-green-rgb), 0.1);
  color: var(--cc-green);
}

/* Rating rollup */
.cc-bf-rating-slot:empty { display: none; }
.cc-bf-rating { padding-top: var(--bf-space-4); border-top: 1px solid var(--bf-border); }
.cc-bf-rating__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bf-space-2); margin: 0 0 var(--bf-space-3); }

.cc-bf-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  min-height: var(--bf-target);
  padding: 0 var(--bf-space-4);
  border: 1px solid rgba(var(--cc-green-rgb), 0.45);
  border-radius: 999px;
  background: rgba(var(--cc-green-rgb), 0.12);
  color: var(--cc-bone);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color var(--cc-motion-fast, 160ms) ease, border-color var(--cc-motion-fast, 160ms) ease;
}

.cc-bf-cta i { color: var(--cc-green); font-size: 0.75rem; transition: transform var(--cc-motion-fast, 160ms) ease; }
.cc-bf-cta:hover { color: var(--cc-bone); background: rgba(var(--cc-green-rgb), 0.22); border-color: var(--cc-green); }
.cc-bf-cta:hover i { transform: translateX(3px); }

.cc-bf-admin-shortcuts { padding-top: var(--bf-space-4); border-top: 1px dashed rgba(var(--cc-pink-rgb), 0.35); }
.cc-bf-admin-shortcuts .cc-bf-section-title { color: var(--cc-pink-hover, #ff5288); }
.cc-bf-admin-shortcuts__row { display: flex; flex-wrap: wrap; gap: var(--bf-space-2); }

/* ----------------------------------------------------------------- Admin */
.cc-bf-admin {
  margin-bottom: var(--bf-space-6);
  border: 1px solid rgba(var(--cc-pink-rgb), 0.3);
  border-radius: var(--bf-radius);
  background: var(--bf-surface);
}

.cc-bf-admin__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--bf-space-4) var(--bf-space-5);
  border: 0;
  border-radius: var(--bf-radius);
  background: transparent;
  color: var(--cc-bone);
  text-align: left;
}

.cc-bf-admin__toggle-text { display: grid; gap: var(--bf-space-1); }
.cc-bf-admin__title { font: 400 1.5rem/1.1 var(--cc-font-display); letter-spacing: 0.02em; }
.cc-bf-admin__chevron { color: var(--bf-muted); transition: transform var(--cc-motion-fast, 160ms) ease; }
.cc-bf-admin__toggle[aria-expanded="true"] .cc-bf-admin__chevron { transform: rotate(180deg); }

.cc-bf-admin__panel { padding: 0 var(--bf-space-5) var(--bf-space-5); }
.cc-bf-admin__panel[hidden] { display: none; }
.cc-bf-admin__lead { margin-bottom: var(--bf-space-4); }

.cc-bf-admin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--bf-space-4);
}

.cc-bf-form {
  display: grid;
  align-content: start;
  gap: var(--bf-space-3);
  padding: var(--bf-space-4);
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background: var(--bf-raised);
}

.cc-bf-form__title {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin: 0 0 var(--bf-space-1);
  font: 600 0.9375rem/1.3 var(--cc-font-body);
  letter-spacing: 0;
}

.cc-bf-form__title i { color: var(--cc-green); font-size: 0.8125rem; }
.cc-bf-form--danger .cc-bf-form__title i { color: var(--cc-pink-hover, #ff5288); }

.cc-bf-field { display: grid; gap: var(--bf-space-1); }
.cc-bf-field label { font: 500 0.8125rem/1.4 var(--cc-font-body); }
.cc-bf-optional { margin-left: var(--bf-space-1); color: var(--bf-muted); font-weight: 400; }

.cc-bf .cc-bf-form__submit {
  justify-self: start;
  min-height: 44px;
  margin-top: var(--bf-space-1);
  padding-inline: var(--bf-space-4);
  border-radius: var(--bf-radius-sm);
  font: 600 0.875rem/1 var(--cc-font-body);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.cc-bf .cc-bf-danger-btn {
  border: 1px solid var(--cc-pink-hover, #ff5288);
  background: transparent;
  color: var(--cc-pink-hover, #ff5288);
}

.cc-bf .cc-bf-danger-btn:hover { background: var(--cc-pink); border-color: var(--cc-pink); color: var(--cc-black); }

.cc-bf-form__note { font-size: 0.75rem; }

.cc-bf-logo-preview {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-1);
}

.cc-bf-logo-preview[hidden] { display: none; }

.cc-bf-logo-preview img {
  width: 56px;
  height: 56px;
  border: 1px solid var(--bf-border-strong);
  border-radius: 50%;
  background: var(--cc-bone);
  object-fit: contain;
}

.cc-bf-admin__status { min-height: 1.25rem; margin: var(--bf-space-3) 0 0; color: var(--bf-muted); font-size: 0.8125rem; }
.cc-bf-admin__status[data-tone="success"] { color: var(--cc-green); }
.cc-bf-admin__status[data-tone="error"] { color: var(--cc-pink-hover, #ff5288); }

/* ------------------------------------------------------------- Directory */
.cc-bf-directory__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--bf-space-3) var(--bf-space-5);
  margin-bottom: var(--bf-space-4);
}

.cc-bf-directory__title { margin: 0; font-size: 2rem; line-height: 1.1; }

.cc-bf-directory__filter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-2) var(--bf-space-3);
  flex: 0 1 26rem;
}

.cc-bf-directory__filter > i {
  position: absolute;
  top: 22px;
  left: 0.875rem;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--bf-muted);
  font-size: 0.8125rem;
  pointer-events: none;
}

.cc-bf .cc-bf-directory__filter input.form-control { flex: 1 1 12rem; padding-left: 2.25rem; }
.cc-bf-directory__count { white-space: nowrap; font-variant-numeric: tabular-nums; }

.cc-bf-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--bf-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-bf-tile-item[hidden] { display: none; }

.cc-bf-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--bf-space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--bf-space-2) var(--bf-space-3);
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background: var(--bf-surface);
  color: var(--cc-bone);
  text-align: left;
  transition: border-color var(--cc-motion-fast, 160ms) ease, background-color var(--cc-motion-fast, 160ms) ease, transform var(--cc-motion-fast, 160ms) ease;
}

.cc-bf-tile:hover { border-color: rgba(var(--cc-green-rgb), 0.55); background: var(--bf-raised); transform: translateY(-2px); }
.cc-bf-tile.is-current { border-color: var(--bf-focus); box-shadow: 0 0 0 1px var(--bf-focus) inset; }

.cc-bf-tile__text { display: grid; gap: 0.125rem; min-width: 0; }
.cc-bf-tile__name { overflow: hidden; font-weight: 600; font-size: 0.875rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cc-bf-tile__meta { overflow: hidden; color: var(--bf-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.cc-bf-tile.is-parent .cc-bf-tile__meta { color: var(--cc-green); }

/* ---------------------------------------------------------------- Motion */
@keyframes cc-bf-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .cc-bf-hero { animation: cc-bf-enter 240ms ease-out both; }
  .cc-bf-admin__panel:not([hidden]) { animation: cc-bf-enter 180ms ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-bf-quiet-btn,
  .cc-bf-chip,
  .cc-bf-cta,
  .cc-bf-cta i,
  .cc-bf-tile,
  .cc-bf-logo,
  .cc-bf-admin__chevron { transition: none; }
  .cc-bf-tile:hover,
  .cc-bf-cta:hover i { transform: none; }
}

/* ----------------------------------------------------------------- Small */
@media (max-width: 991.98px) { .cc-bf { padding-top: var(--bf-space-6); } }

@media (max-width: 575.98px) {
  .cc-bf-search-card,
  .cc-bf-panel,
  .cc-bf-stage { padding: var(--bf-space-4); }
  .cc-bf .cc-bf-search__submit { padding-inline: var(--bf-space-4); }
  .cc-bf-graph { height: clamp(340px, 60vh, 520px); }
  .cc-bf-stat__value { font-size: 1.25rem; }
  .cc-bf-admin__toggle,
  .cc-bf-admin__panel { padding-inline: var(--bf-space-4); }
}