/* One circle-label size across onboarding and the app: 21.57px at 390px.
   Scale down on smaller phones without changing the circle footprints. */
html.ke-rebrand-mode {
  --ke-circle-label-size: min(21.57px, 5.5307692308vw);
}

/* Give longer video titles room to wrap at the shared size, while keeping
   the existing square grid cells and circular faces. */
html.ke-rebrand-mode .ke-library-video-circle {
  grid-template-rows: minmax(0, 1fr);
}
html.ke-rebrand-mode .ke-library-circle-face {
  min-height: 0;
  padding: 8%;
  gap: 4px;
}

/* Layered important declarations take precedence over the legacy page-level
   important rules, without escalating their selector specificity. */
@layer ke-circle-type {
  html.ke-rebrand-mode :is(
    .ke-dashboard-circle-action .ke-dashboard-tool-title,
    .ke-opening-bloom-answer > strong,
    .ke-opening-reminder-circle strong,
    .ke-opening-recap-circle strong,
    .ke-opening-journal-thoughts strong,
    .ke-library-circle-face > strong,
    .ke-profile-bloom .ke-profile-kpi:not(.is-hexagon) > strong,
    .ke-profile-constellation .ke-profile-option:not(:nth-of-type(2), :nth-of-type(3), :nth-of-type(6)) .ke-profile-option-copy strong,
    .ke-journal-thoughts-button strong
  ) {
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: var(--ke-circle-label-size) !important;
    line-height: 1.1 !important;
  }
}