@blukavantui/community 0.0.0-stage → 1.0.1

package/styles/sidebar.css

@@ -0,0 +1,183 @@
+/* BluUI_Core → NavigationMenu — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+/* Keep native List/Block wrappers from adding width, spacing, or a scrollbar.
+The menu uses its containing panel or page scroll area. */
+.blu-navigation-menu,
+.blu-navigation-menu__list,
+.blu-navigation-menu__row {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--bluui-text, #334155);
+  font: 13px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* The list order defines grouping. Every heading after the first gets room
+above it; the rule also works with OutSystems' generated List wrappers. */
+.blu-navigation-menu__group-title {
+  display: block;
+  margin: 26px 12px 10px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.6;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+.blu-navigation-menu__row--first .blu-navigation-menu__group-title {
+  margin-top: 0;
+}
+
+/* Link and pending rows share geometry. Only available rows are interactive. */
+.blu-navigation-menu .blu-navigation-menu__link,
+.blu-navigation-menu .blu-navigation-menu__pending {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  margin: 3px 0;
+  padding: 9px 12px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--bluui-text, #334155);
+  font: inherit;
+  text-align: start;
+}
+
+/* Optional decorative icons share one size in links and pending rows.
+The flexible label keeps text left-aligned and the Soon badge at the far edge.
+Blank IconUrl creates no image, so text-only menus retain their spacing.
+Theme-aware SVGs use the inherited color scheme without altering supplied artwork. */
+.blu-navigation-menu__icon {
+  display: block;
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+  object-fit: contain;
+  color-scheme: inherit;
+}
+.blu-navigation-menu__label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Override inherited link decoration in every interaction state, including
+visited and focus. Keyboard focus keeps its separate visible outline below.
+The label class also avoids a theme decorating the inner Expression. */
+.blu-navigation-menu .blu-navigation-menu__link,
+.blu-navigation-menu .blu-navigation-menu__link:link,
+.blu-navigation-menu .blu-navigation-menu__link:visited,
+.blu-navigation-menu .blu-navigation-menu__link:hover,
+.blu-navigation-menu .blu-navigation-menu__link:focus,
+.blu-navigation-menu .blu-navigation-menu__link:active,
+.blu-navigation-menu .blu-navigation-menu__link .blu-navigation-menu__label {
+  text-decoration: none;
+}
+.blu-navigation-menu .blu-navigation-menu__link {
+  cursor: pointer;
+}
+.blu-navigation-menu .blu-navigation-menu__link:hover {
+  background: var(--bluui-surface-muted, #f1f5f9);
+  color: var(--bluui-primary, #4f46e5);
+}
+.blu-navigation-menu .blu-navigation-menu__link--active,
+.blu-navigation-menu .blu-navigation-menu__link--active:hover {
+  color: #fff;
+  background: #4f46e5;
+  font-weight: 650;
+  box-shadow: none;
+}
+.blu-navigation-menu .blu-navigation-menu__link:focus-visible {
+  outline: 2px solid var(--bluui-primary, #4f46e5);
+  outline-offset: 2px;
+}
+.blu-navigation-menu .blu-navigation-menu__pending {
+  color: var(--bluui-text-muted, #64748b);
+}
+.blu-navigation-menu__soon {
+  flex: none;
+  padding: 1px 5px;
+  border: 1px solid var(--bluui-border, #e2e8f0);
+  border-radius: 5px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 9px;
+}
+
+/* A simple hint makes an empty data-driven Block visible in Service Studio. */
+.blu-navigation-menu__preview {
+  display: none;
+  -servicestudio-display: block;
+  -servicestudio-padding: 12px;
+  -servicestudio-border: 1px dashed var(--bluui-control-border, #cbd5e1);
+  -servicestudio-color: var(--bluui-text-muted, #64748b);
+}
+
+/* Active icons stay legible on the filled selection surface. */
+.blu-navigation-menu .blu-navigation-menu__link--active .blu-navigation-menu__icon { filter: brightness(0) invert(1); }
+
+/* BluUI_Core → Sidebar — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+/* Panel surface and scrolling belong to the component, including when it is
+placed in an ordinary application without the showcase styles. */
+.blu-sidebar {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  padding: 26px 16px;
+  border-inline-end: 1px solid var(--bluui-border, #e2e8f0);
+  background: var(--bluui-surface, #fff);
+  color: var(--bluui-text, #182230);
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+  /* Keep an empty Block understandable in the Service Studio design canvas. */
+  -servicestudio-height: auto;
+  -servicestudio-min-height: 160px;
+  -servicestudio-overflow: visible;
+}
+
+/* Hide the panel and all its controls from pointer/keyboard access while closed.
+No If widget is needed; consumer content remains mounted with its state. */
+.blu-sidebar--closed {
+  display: none;
+  -servicestudio-display: block;
+}
+
+/* A real Placeholder box supports native Block wrappers and long content. */
+.blu-sidebar__content,
+.blu-sidebar__content > [data-block] {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+.blu-sidebar:focus-visible {
+  outline: 2px solid var(--bluui-primary, #4f46e5);
+  outline-offset: -3px;
+}
+
+/* Design-time hint only. Browsers keep it hidden even when Sidebar is open. */
+.blu-sidebar__preview {
+  display: none;
+  -servicestudio-display: block;
+  -servicestudio-padding: 12px;
+  -servicestudio-border: 1px dashed var(--bluui-control-border, #cbd5e1);
+  -servicestudio-color: var(--bluui-text-muted, #64748b);
+}

package/styles/skeleton.css

@@ -0,0 +1,69 @@
+/* BluKavantUi_Community_Core → Skeleton — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-skeleton {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* Skeleton — decorative loading shapes
+The native Block supplies width/height through its style Attribute. For Circle,
+the Block uses HeightPixels for both dimensions to prevent an oval. */
+.blu-skeleton {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  -servicestudio-height: 16px;
+  -servicestudio-min-width: 120px;
+  -servicestudio-background-color: var(--bluui-skeleton-base, #e2e8f0);
+  -servicestudio-border-radius: 4px;
+  background: var(--bluui-skeleton-base, #e2e8f0);
+}
+
+.blu-skeleton--text {
+  border-radius: 4px;
+}
+
+.blu-skeleton--rectangle {
+  border-radius: 10px;
+}
+
+.blu-skeleton--circle {
+  border-radius: 50%;
+}
+
+/* Optional shimmer stops after 4.8 seconds. The static loading shape remains.
+This prevents indefinite nonessential movement alongside loaded content. */
+.blu-skeleton--animated::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, var(--bluui-skeleton-shine, rgb(255 255 255 / 65%)), transparent);
+  transform: translateX(-100%);
+  animation: blu-skeleton-wave 1.6s ease-in-out 3;
+}
+
+@keyframes blu-skeleton-wave {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Respect the user's motion preference even when IsAnimated is True.
+The base shape remains visible when the animated overlay is removed. */
+@media (prefers-reduced-motion: reduce) {
+  .blu-skeleton--animated::after {
+    animation: none;
+    display: none;
+  }
+}
+
+
+/* Visible default size only in the Service Studio canvas. */
+.blu-skeleton {
+  -servicestudio-width: 180px;
+  -servicestudio-height: 20px;
+}

package/styles/sparkline.css

@@ -0,0 +1,38 @@
+/* BluUI_Core / Sparkline. SVG scales with the container; colors inherit the
+   shared palette. Values are always exposed through an accessible summary. */
+.blu-sparkline { min-width: 0; width: 100%; color: var(--bluui-text); }
+.blu-sparkline svg { display: block; width: 100%; height: var(--blu-sparkline-height, 64px); overflow: visible; }
+.blu-sparkline__line { fill: none; stroke: var(--blu-sparkline-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.blu-sparkline__area { fill: var(--blu-sparkline-color); opacity: .09; }
+.blu-sparkline__point { fill: var(--blu-sparkline-color); }
+.blu-sparkline__empty { margin: 0; min-height: var(--blu-sparkline-height, 64px); display: flex; align-items: center; color: var(--bluui-text-muted); }
+.blu-sparkline__data { margin-top: 8px; font-size: 13px; }
+.blu-sparkline__data summary { width: fit-content; padding: 6px 0; cursor: pointer; color: var(--bluui-color-primary-text); }
+.blu-sparkline__data table { border-collapse: collapse; width: 100%; margin-top: 8px; }
+.blu-sparkline__data :is(th,td) { padding: 6px 12px; border-bottom: 1px solid var(--bluui-border); text-align: start; }
+.blu-sparkline__data summary:focus-visible { outline: 2px solid var(--bluui-primary); outline-offset: 3px; }
+
+/* Keep the native design preview in Service Studio only after initialization. */
+.blu-sparkline-block:has([data-blu-ready]) > .blu-component-preview { display: none; }
+
+/* Optional five-second glow. Only a decorative copy changes opacity; the
+   underlying line stays sharp and readable in every theme. No permanent loop. */
+.blu-sparkline__glow {
+  fill: none;
+  stroke: var(--blu-sparkline-color);
+  stroke-width: 5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  filter: blur(3px);
+  opacity: 0;
+  pointer-events: none;
+  animation: blu-sparkline-glow 5s ease-in-out 1 both;
+}
+@keyframes blu-sparkline-glow {
+  0%, 100% { opacity: 0; }
+  50% { opacity: .65; }
+}
+/* Respect the device preference and high-contrast rendering. */
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .blu-sparkline__glow { display: none; animation: none; }
+}

package/styles/split-section.css

@@ -0,0 +1,34 @@
+/* BluUI_Core → split-section — component-owned stylesheet. */
+/* BluUI rich content: scoped defaults shared by standalone Blocks. */
+.blu-rich { box-sizing:border-box;min-width:0;color:var(--bluui-text,#172033);font-family:var(--bluui-font,Inter,system-ui,sans-serif); }
+.blu-rich *, .blu-rich *::before, .blu-rich *::after { box-sizing:border-box; }
+.blu-rich [hidden] { display:none!important; }
+.blu-rich img { display:block;max-width:100%; }
+.blu-rich figure { margin:0; }
+.blu-rich button,.blu-rich a,.blu-rich input { font:inherit; }
+.blu-rich-button { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--bluui-control-border,#94a3b8);border-radius:999px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#172033);cursor:pointer;text-decoration:none; }
+.blu-rich-button:hover { background:var(--bluui-surface-muted,#f1f5f9); }
+.blu-rich-button:disabled { opacity:.45;cursor:default; }
+.blu-rich :is(button,a,input,[tabindex]):focus-visible { outline:3px solid var(--bluui-primary,#4f46e5);outline-offset:4px; }
+.blu-rich-error { color:var(--bluui-color-danger-text,#b91c1c);padding:12px;border:1px solid currentColor;border-radius:8px; }
+.blu-rich-eyebrow { margin:0 0 20px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; }
+.blu-rich-title { color:inherit;margin:0 0 20px;font-size:clamp(28px,3.4vw,56px);line-height:1.1;letter-spacing:-.045em;text-wrap:balance; }
+.blu-rich-description { font-size:clamp(16px,1.4vw,19px);line-height:1.7;margin:0 0 24px;max-width:62ch;white-space:pre-line; }
+.blu-rich-link { display:inline-flex;gap:12px;align-items:center;min-height:44px;color:inherit;font-weight:650;text-decoration:none; }
+.blu-rich-link::after { content:'↗';font-size:1.25em; }
+.blu-rich-link:hover { text-decoration:underline; }
+.blu-rich-bridge { display:contents!important; }
+.blu-rich-enlarged { display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto; }
+.blu-component-preview { display:none;-servicestudio-display:block;-servicestudio-padding:24px;-servicestudio-background:#eef2ff;-servicestudio-border:1px dashed #a5b4fc;-servicestudio-color:#312e81; }
+@media(prefers-reduced-motion:reduce){.blu-rich *, .blu-rich *::before, .blu-rich *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }}
+
+/* The consumer supplies real media, controls and actions through slots. */
+.blu-split-section { background:var(--bluui-surface,#fff); }
+.blu-split-section>.blu-rich-body { max-width:1440px;margin:auto;padding:clamp(56px,7vw,110px) clamp(24px,6vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center; }
+.blu-split-section__media,.blu-split-section__copy { min-width:0; }
+.blu-split-section[data-side=right] .blu-split-section__media { order:2; }
+.blu-split-section[data-surface=muted] { background:var(--bluui-surface-muted,#f1f5f9); }
+.blu-split-section[data-surface=contrast] { background:var(--bluui-text,#172033);color:var(--bluui-surface,#fff); }
+.blu-split-section[data-spacing=compact]>.blu-rich-body { padding-block:40px; }
+.blu-split-section .blu-common-slot--actions { margin-top:28px; }
+@media(max-width:760px){.blu-split-section>.blu-rich-body{grid-template-columns:minmax(0,1fr)}.blu-split-section[data-side=right] .blu-split-section__media{order:0}}

package/styles/splitter.css

@@ -0,0 +1,32 @@
+/* Splitter owns pane sizing and divider interactions. Native Placeholder content
+   stays mounted so resizing and collapsing preserve forms and component state. */
+.blu-splitter { display:grid; grid-template-columns:minmax(0,35fr) 32px minmax(0,65fr); grid-template-rows:minmax(0,1fr); width:100%; height:360px; min-width:0; position:relative; border:1px solid var(--bluui-border,#dce3ef); border-radius:12px; overflow:hidden; background:var(--bluui-surface,#fff); }
+.blu-splitter__primary,.blu-splitter__secondary { min-width:0; min-height:0; overflow:auto; padding:20px; }
+.blu-splitter__primary { grid-column:1; grid-row:1; }
+.blu-splitter__secondary { grid-column:3; grid-row:1; }
+.blu-splitter__primary[hidden] { display:none; }
+.blu-splitter__handle { grid-column:2; grid-row:1; position:relative; background:var(--bluui-surface-muted, #f1f4f9); min-width:0; min-height:0; }
+.blu-splitter__separator { position:absolute; inset:0; cursor:col-resize; touch-action:none; }
+.blu-splitter__separator::after { content:""; position:absolute; left:14px; top:12px; width:4px; height:18px; border-radius:4px; background:var(--bluui-surface-raised, #9aa9c0); }
+.blu-splitter__separator:hover { background:var(--bluui-primary-soft, #e5e7ff); }
+.blu-splitter__separator:focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:-2px; }
+.blu-splitter__separator[aria-disabled="true"] { cursor:default; opacity:.45; }
+.blu-splitter__toggle { position:absolute; top:calc(50% - 14px); left:2px; padding:0; width:28px; height:28px; border:0; border-radius:4px; color:var(--bluui-primary-text, #4f46e5); background:var(--bluui-primary-soft, #e9eaff); cursor:pointer; font:600 15px/1 sans-serif; }
+.blu-splitter__toggle:focus-visible { outline:2px solid var(--bluui-primary, #4f46e5); outline-offset:-2px; }
+.blu-splitter__toggle[hidden] { display:none; }
+.blu-splitter__toggle:disabled { cursor:default; opacity:.45; }
+/* Vertical means top/bottom panels; the separator orientation follows that axis. */
+.blu-splitter--vertical .blu-splitter__primary { grid-column:1; grid-row:1; }
+.blu-splitter--vertical .blu-splitter__handle { grid-column:1; grid-row:2; }
+.blu-splitter--vertical .blu-splitter__secondary { grid-column:1; grid-row:3; }
+.blu-splitter--vertical .blu-splitter__separator { cursor:row-resize; }
+.blu-splitter--vertical .blu-splitter__separator::after { top:14px; left:12px; height:4px; width:18px; }
+.blu-splitter--vertical .blu-splitter__toggle { top:2px; left:calc(50% - 14px); height:28px; width:28px; }
+.blu-splitter__error { position:absolute; inset:auto 8px 8px; padding:10px; color:var(--bluui-danger-text, #b42318); background:var(--bluui-danger-soft, #fff1f1); border-radius:6px; font-size:13px; z-index:2; }
+.blu-splitter__error[hidden],.blu-splitter__error:empty { display:none; }
+
+/* Three separate 28px targets provide resizing without dragging. */
+.blu-splitter__decrease { top:calc(50% - 46px); }
+.blu-splitter__increase { top:calc(50% + 18px); }
+.blu-splitter--vertical .blu-splitter__decrease { left:calc(50% - 46px); }
+.blu-splitter--vertical .blu-splitter__increase { left:calc(50% + 18px); }

package/styles/statistic.css

@@ -0,0 +1,107 @@
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Metrics inherit surface from their containing Card. */
+.blu-statistic{
+  color:var(--bluui-text);
+  padding:8px 0;
+  min-width:0
+}
+.blu-statistic__label{
+  font-size:13px;
+  font-weight:500;
+  color:var(--bluui-text-muted);
+  margin-bottom:10px
+}
+.blu-statistic__value{
+  display:flex;
+  align-items:baseline;
+  gap:5px;
+  line-height:1.25;
+  color:var(--blu-common-color);
+  font-variant-numeric:tabular-nums;
+  flex-wrap:wrap
+}
+.blu-statistic__value strong{
+  font-size:36px;
+  letter-spacing:-.04em;
+  font-weight:650
+}
+.blu-statistic__affix{
+  font-size:20px;
+  font-weight:500
+}
+.blu-statistic__trend{
+  font-size:13px;
+  color:var(--bluui-text-muted);
+  margin:10px 0 0
+}
+.blu-statistic__trend span{
+  color:var(--blu-common-color);
+  font-weight:700
+}
+.blu-statistic__loading{
+  height:44px;
+  width:160px;
+  max-width:100%;
+  border-radius:8px;
+  background:var(--bluui-surface-muted)
+}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-statistic-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}

package/styles/text-highlight.css

@@ -0,0 +1,49 @@
+/* BluUI_Core → text-highlight — component-owned stylesheet. */
+/* BluUI rich content: scoped defaults shared by standalone Blocks. */
+.blu-rich { box-sizing:border-box;min-width:0;color:var(--bluui-text,#172033);font-family:var(--bluui-font,Inter,system-ui,sans-serif); }
+.blu-rich *, .blu-rich *::before, .blu-rich *::after { box-sizing:border-box; }
+.blu-rich [hidden] { display:none!important; }
+.blu-rich img { display:block;max-width:100%; }
+.blu-rich figure { margin:0; }
+.blu-rich button,.blu-rich a,.blu-rich input { font:inherit; }
+.blu-rich-button { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--bluui-control-border,#94a3b8);border-radius:999px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#172033);cursor:pointer;text-decoration:none; }
+.blu-rich-button:hover { background:var(--bluui-surface-muted,#f1f5f9); }
+.blu-rich-button:disabled { opacity:.45;cursor:default; }
+.blu-rich :is(button,a,input,[tabindex]):focus-visible { outline:3px solid var(--bluui-primary,#4f46e5);outline-offset:4px; }
+.blu-rich-error { color:var(--bluui-color-danger-text,#b91c1c);padding:12px;border:1px solid currentColor;border-radius:8px; }
+.blu-rich-eyebrow { margin:0 0 20px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; }
+.blu-rich-title { color:inherit;margin:0 0 20px;font-size:clamp(28px,3.4vw,56px);line-height:1.1;letter-spacing:-.045em;text-wrap:balance; }
+.blu-rich-description { font-size:clamp(16px,1.4vw,19px);line-height:1.7;margin:0 0 24px;max-width:62ch;white-space:pre-line; }
+.blu-rich-link { display:inline-flex;gap:12px;align-items:center;min-height:44px;color:inherit;font-weight:650;text-decoration:none; }
+.blu-rich-link::after { content:'↗';font-size:1.25em; }
+.blu-rich-link:hover { text-decoration:underline; }
+.blu-rich-bridge { display:contents!important; }
+.blu-rich-enlarged { display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto; }
+.blu-component-preview { display:none;-servicestudio-display:block;-servicestudio-padding:24px;-servicestudio-background:#eef2ff;-servicestudio-border:1px dashed #a5b4fc;-servicestudio-color:#312e81; }
+@media(prefers-reduced-motion:reduce){.blu-rich *, .blu-rich *::before, .blu-rich *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }}
+
+/* Typography remains real text; each measured line receives its own SVG mark. */
+.blu-text-highlight, .blu-text-highlight .blu-rich-body { display:inline; }
+.blu-text-highlight__mark {
+  display:inline-block;position:relative;isolation:isolate;max-width:100%;
+  padding:0 .14em;vertical-align:baseline;overflow:visible;
+}
+.blu-text-highlight__mark[data-style=circle] { padding-inline:.34em; }
+.blu-text-highlight__label { position:relative;z-index:1;overflow-wrap:anywhere; }
+.blu-text-highlight__ink { position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none; }
+.blu-text-highlight__stroke {
+  fill:none;stroke:var(--blu-highlight);stroke-linecap:round;stroke-linejoin:round;
+}
+.blu-text-highlight__fill { fill:var(--blu-highlight-soft);stroke:none; }
+/* A single deliberate pen stroke, rather than a rectangular clip wipe. */
+.blu-text-highlight--draw .blu-text-highlight__stroke {
+  stroke-dasharray:1;animation:blu-highlight-stroke 1.25s cubic-bezier(.22,.61,.36,1) both;
+  animation-delay:var(--blu-mark-delay,0ms);
+}
+.blu-text-highlight--draw .blu-text-highlight__fill {
+  transform-box:fill-box;transform-origin:left;animation:blu-highlight-fill .9s ease-out both;
+}
+@keyframes blu-highlight-stroke { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
+@keyframes blu-highlight-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
+@media(prefers-reduced-motion:reduce) { .blu-text-highlight__ink path { animation:none!important; } }
+@media(forced-colors:active) { .blu-text-highlight__stroke { stroke:Highlight; } .blu-text-highlight__fill { fill:none; } }