/* Shared display type follows the circle interior, not only the viewport.
   Pages can still set --ke-circle-label-size for a deliberate geometry or
   long title. Leave it unset here so small circles keep their own scale. */
@supports (container-type: inline-size) {
  html.ke-rebrand-mode :where(
    .ke-dashboard-circle-action,
    .ke-opening-bloom-answer,
    .ke-opening-reminder-circle,
    .ke-opening-recap-circle,
    .ke-opening-journal-thoughts,
    .ke-library-video-circle,
    .ke-profile-bloom .ke-profile-kpi:not(.is-hexagon),
    .ke-profile-constellation .ke-profile-option:not(:nth-of-type(2), :nth-of-type(3), :nth-of-type(6)),
    .ke-journal-thoughts-button
  ) {
    container-type: inline-size;
    --ke-circle-fit-size: clamp(.875rem, 14cqi, 1.3125rem);
  }

  /* Video circles also reserve a line for the duration. */
  html.ke-rebrand-mode .ke-library-video-circle {
    --ke-circle-fit-size: clamp(.875rem, 13cqi, 1.3125rem);
  }
}

/* Give longer video titles room to wrap, 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, var(--ke-circle-fit-size, clamp(.875rem, 4.4vw, 1.3125rem))) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    white-space: normal !important;
    text-wrap: balance;
    text-transform: none !important;
  }

  /* UI copy is curated at its source. Preserve that casing even when an
     older feature stylesheet applies uppercase. This explicit allowlist
     excludes writing fields, member posts, quotations, AI reply bodies and
     the logo. Never capitalize text by walking or rewriting the document. */
  html.ke-rebrand-mode :is(
    .ke-dashboard-eyebrow,
    .ke-dashboard-tool-note,
    .ke-dashboard-flow-back,
    .ke-dashboard-flow-center-kicker,
    .ke-dashboard-flow-center-title,
    .ke-dashboard-flow-center-hint,
    .ke-dashboard-checkin-done,
    .ke-pause-footer button,
    .ke-library-category-button,
    .ke-library-footer a,
    .ke-opening-bloom-hex h1,
    .ke-opening-bloom-answer > small,
    .ke-opening-reminder-circle label > small,
    .ke-opening-recap-circle > small,
    .ke-opening-primary,
    .ke-opening-secondary,
    .ke-opening-name-main label,
    .ke-opening-name-field label,
    .ke-membership-promo-kicker,
    .ke-membership-consents legend,
    .ke-first-session-guide > span,
    .ke-daily-completion-kicker,
    .ke-journal-kicker,
    .ke-journal-header-action,
    .ke-journal-quiet,
    .ke-journal-page-side-action,
    .ke-journal-subnav .ke-journal-back,
    .ke-journal-password-field > label,
    .ke-journal-skin-picker legend,
    .ke-journal-sticker-pack h4,
    .ke-profile-eyebrow,
    .ke-profile-photo-link,
    .ke-profile-option-status,
    .ke-profile-field > span,
    .ke-profile-data-button,
    .ke-profile-lock-password > label,
    .ig-community-create-kicker,
    .ig-community-load-more,
    .ig-community-end-action strong,
    .ig-post-preview-more,
    .ke-post-flow-eyebrow,
    .ke-resources-section-heading > span,
    .ke-resources-detail-intro > span,
    .ke-resources-subheading > span,
    .ke-resources-next-steps > span
  ) {
    text-transform: none !important;
    letter-spacing: normal !important;
  }
}