.blu-chart { width:100%; min-width:0; color:var(--bluui-text,#182230); background:var(--bluui-surface,#fff); font:13px/1.5 var(--blu-font-family,Inter,system-ui,sans-serif); }
.blu-chart [hidden] { display:none!important; }
.blu-chart__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 16px 12px; }
.blu-chart__heading>div:first-child { min-width:0; }
.blu-chart__heading h3 { margin:0; color:inherit; font-size:16px; font-weight:650; letter-spacing:-.3px; overflow-wrap:anywhere; }
.blu-chart__heading p { margin:5px 0 0; font-size:11px; color:var(--bluui-text-muted,#667085); line-height:1.6; overflow-wrap:anywhere; }
.blu-chart__export { display:flex; gap:5px; flex-shrink:0; margin-left:auto; }
.blu-chart__export :is(select,button) { font:inherit; font-size:11px; border:1px solid var(--bluui-border,#ddd); color:inherit; border-radius:6px; background:var(--bluui-surface,#fff); min-height:34px; padding:6px 8px; cursor:pointer; }
.blu-chart__export button:disabled { opacity:.5; cursor:default; }
.blu-chart__stage { position:relative; min-width:0; }
.blu-chart__plot { width:100%; min-width:0; }
.blu-chart__state { position:absolute; inset:0; display:grid; place-items:center; background:var(--bluui-surface-muted,#f8f8fa); color:var(--bluui-text-muted,#667085); padding:20px; text-align:center; }
.blu-chart__state--loading {grid-template-rows:minmax(0,1fr) auto;gap:14px;place-items:stretch;background:var(--bluui-surface,#fff);padding:16px}
.blu-chart__skeleton {display:flex;flex-direction:column;gap:24px;min-width:0;min-height:0}
.blu-chart__skeleton-key {display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.blu-chart__skeleton-plot {flex:1;min-height:0}
.blu-chart__skeleton-plot>div {height:100%}
.blu-chart__state-message {font-size:12px}
.blu-chart__data { margin:12px 16px 0; border-top:1px solid var(--bluui-border,#ddd); font-size:11px; }
.blu-chart__data summary { cursor:pointer; padding:12px 0; color:var(--bluui-text-muted,#667085); }
.blu-chart__data--compact { margin-top:0; border-top:0; }
.blu-chart__data--compact summary { padding:6px 0; }
.blu-chart__table { overflow:auto; max-height:320px; }
.blu-chart__table table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:11px; font-variant-numeric:tabular-nums; }
.blu-chart__table caption { text-align:left; color:var(--bluui-text-muted,#667085); padding:8px; }
.blu-chart__table th,.blu-chart__table td { padding:8px; border-bottom:1px solid var(--bluui-border,#ddd); text-align:right; }
.blu-chart__table th:first-child { text-align:left; }
.blu-chart__table button { font:inherit; color:var(--bluui-primary,#6557e8); background:transparent; border:0; border-radius:3px; padding:5px; cursor:pointer; }
.blu-chart__table button[aria-pressed=true] { background:var(--bluui-selected,#eeeaff); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; font-weight:700; }
.blu-chart :is(button,select,summary,[tabindex]):focus-visible { outline:2px solid var(--bluui-primary,#6557e8); outline-offset:2px; }
.blu-chart__status { font-size:11px; color:var(--bluui-text-muted,#667085); margin:0 16px; }
.blu-chart__status:not(:empty) { padding:8px 0; }
@media(max-width:640px) { .blu-chart__heading { flex-wrap:wrap; padding-inline:12px; }.blu-chart__export { margin-left:0; }.blu-chart__data { margin-inline:12px; } }

.blu-chart__navigation {display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px}
.blu-chart__navigation button {min-width:32px;min-height:32px;padding:5px 9px;font:inherit;font-size:12px;color:var(--bluui-text);background:var(--bluui-surface);border:1px solid var(--bluui-control-border);border-radius:5px;cursor:pointer}
.blu-chart__stage[tabindex]:focus-visible {outline-offset:-3px}


.blu-chart__state-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.blu-chart__patterns {display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 0 12px;cursor:pointer}
.blu-chart__patterns input {width:24px;height:24px;margin:0;accent-color:var(--bluui-color-primary-solid)}

.blu-chart__missing-note {margin:8px 12px;color:var(--bluui-text-muted);font-size:12px;line-height:1.5}

/* BEGIN GENERATED SHARED CHECKBOX — scripts/build-checkbox-styles.mjs */
/* One checkbox design, emitted into each owning Block. Keep native input/tree/grid semantics. */
.blu-chart .blu-chart__patterns input[type="checkbox"] {
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  position:relative;
  display:inline-block;
  flex:0 0 22px;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  margin:0;
  padding:0;
  border:1.5px solid var(--bluui-control-border,#7b8799);
  border-radius:6px;
  background-color:var(--bluui-surface,#fff);
  background-image:none;
  box-shadow:0 1px 2px rgb(15 23 42 / 6%);
  vertical-align:middle;
  cursor:pointer;
  opacity:1;
  filter:none;
  transition:background-color 120ms ease,border-color 120ms ease,box-shadow 120ms ease;
}
.blu-chart .blu-chart__patterns input[type="checkbox"]::after { content:none; }
.blu-chart .blu-chart__patterns input[type="checkbox"]:checked,
.blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate {
  border-color:var(--bluui-color-primary-solid,#4f46e5);
  background-color:var(--bluui-color-primary-solid,#4f46e5);
}
.blu-chart .blu-chart__patterns input[type="checkbox"]:checked::after,
.blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate::after {
  content:"";
  box-sizing:content-box;
  position:absolute;
  inset:auto;
  width:10px;
  height:6px;
  left:4px;
  top:5px;
  border:solid var(--bluui-color-primary-contrast,#fff);
  border-width:0 0 2px 2px;
  border-radius:0;
  background:none;
  -webkit-mask:none;
  mask:none;
  transform:rotate(-45deg);
  pointer-events:none;
}
.blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate::after {
  height:0;
  top:8px;
  border-width:0 0 2px;
  transform:none;
}
.blu-chart .blu-chart__patterns input[type="checkbox"]:hover:not(:disabled) {
  border-color:var(--bluui-color-primary-solid,#4f46e5);
  box-shadow:0 0 0 3px var(--bluui-color-primary-soft,#eef2ff);
}
.blu-chart .blu-chart__patterns input[type="checkbox"]:focus-visible {
  outline:2px solid var(--bluui-color-primary-solid,#4f46e5);
  outline-offset:3px;
}
.blu-chart .blu-chart__patterns input[type="checkbox"]:disabled {
  border-color:var(--bluui-border-strong,#b8c4d4);
  background-color:var(--bluui-surface-muted,#f7f8fb);
  box-shadow:none;
  cursor:not-allowed;
}
.blu-chart .blu-chart__patterns input[type="checkbox"]:disabled:checked,
.blu-chart .blu-chart__patterns input[type="checkbox"]:disabled:indeterminate {
  border-color:var(--bluui-text-muted,#5c6b80);
  background-color:var(--bluui-text-muted,#5c6b80);
}
@media (prefers-reduced-motion:reduce) {
  .blu-chart .blu-chart__patterns input[type="checkbox"] { transition:none; }
}
.blu-chart .blu-chart__patterns input[type="checkbox"]::before { content:none; }
@media (forced-colors:active) {
  .blu-chart .blu-chart__patterns input[type="checkbox"],
  .blu-chart .blu-chart__patterns input[type="checkbox"]:checked,
  .blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate,
  .blu-chart .blu-chart__patterns input[type="checkbox"]:disabled,
  .blu-chart .blu-chart__patterns input[type="checkbox"]:disabled:checked,
  .blu-chart .blu-chart__patterns input[type="checkbox"]:disabled:indeterminate { -webkit-appearance:checkbox; appearance:auto; background:revert; border:revert; box-shadow:none; forced-color-adjust:auto; }
  .blu-chart .blu-chart__patterns input[type="checkbox"]:checked::after, .blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate::after { content:none; }
}
/* END GENERATED SHARED CHECKBOX */

.blu-chart__body {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.blu-chart__body[data-legend-position=Top] .blu-chart__legend {grid-row:1}
.blu-chart__body[data-legend-position=Bottom] .blu-chart__legend {grid-row:2}
.blu-chart__body[data-legend-position=Left] {grid-template-columns:190px minmax(0,1fr);align-items:center}
.blu-chart__body[data-legend-position=Right] {grid-template-columns:minmax(0,1fr) 190px;align-items:center}
.blu-chart__body[data-legend-position=Left] .blu-chart__legend {grid-column:1;grid-row:1}
.blu-chart__body[data-legend-position=Left] .blu-chart__stage {grid-column:2;grid-row:1}
.blu-chart__body[data-legend-position=Right] .blu-chart__legend {grid-column:2;grid-row:1}
.blu-chart__body[data-legend-position=Right] .blu-chart__stage {grid-column:1;grid-row:1}
.blu-chart__body.blu-chart__body--no-legend {grid-template-columns:minmax(0,1fr);gap:0}
.blu-chart__body--no-legend .blu-chart__stage {grid-column:1!important;grid-row:1!important}
.blu-chart__legend {--legend-selected:color-mix(in srgb,var(--bluui-primary) 9%,var(--bluui-surface));min-width:0;padding:8px 20px 16px;font:12px/1.45 var(--bluui-font,Inter,system-ui,sans-serif);color:var(--bluui-text)}
.blu-chart__legend-items {display:flex;flex-wrap:wrap;gap:8px}
.blu-chart__legend-entry {min-width:0;max-width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:inherit;font:inherit;text-align:left;padding:7px 8px;border-radius:8px;cursor:pointer;min-height:36px}
.blu-chart__legend-entry:hover {background:var(--bluui-surface-muted)}
.blu-chart__legend-entry[aria-pressed=true] {text-decoration:none;background:var(--legend-selected)}
.blu-chart__legend-heading {display:flex;align-items:center;gap:7px;min-width:0}
.blu-chart__legend-marker {display:flex;flex-shrink:0}
.blu-chart__legend-text {overflow-wrap:anywhere}
.blu-chart__legend-label {font-weight:500}
.blu-chart__legend-detail,.blu-chart__legend-percent,.blu-chart__legend-note {font-size:11px;color:var(--bluui-text-muted)}
.blu-chart__legend-numbers {display:flex;align-items:baseline;gap:10px;min-width:0;font-variant-numeric:tabular-nums}
.blu-chart__legend-value {font-weight:600;letter-spacing:-.25px}
.blu-chart__legend-check {visibility:hidden;margin-left:auto;color:var(--bluui-primary);font-weight:700;font-size:12px}
[aria-pressed=true] .blu-chart__legend-check {visibility:visible}
.blu-chart__legend[data-style=Standard] .blu-chart__legend-detail,.blu-chart__legend[data-style=Standard] .blu-chart__legend-check {display:none}
.blu-chart__legend[data-style=Standard] .blu-chart__legend-value {font-size:11px;color:var(--bluui-text-muted)}
.blu-chart__legend-track {display:none;height:3px;background:var(--bluui-border);border-radius:2px;overflow:hidden}
.blu-chart__legend-track>span {display:block;height:100%}
/* The compact key uses Community Chip; only this chart-specific appearance is scoped here. */
.blu-chart__legend-chip-host {min-width:0;max-width:100%}
.blu-chart__legend .blu-chip.blu-chart__legend-chip {--chip-bg:transparent;--chip-fg:var(--bluui-text);--chip-border:var(--bluui-border);max-width:100%;box-shadow:none}
.blu-chart__legend .blu-chart__legend-chip.blu-chip--selected {--chip-bg:var(--legend-selected);--chip-border:var(--bluui-primary);box-shadow:none}
.blu-chart__legend .blu-chart__legend-chip .blu-chip__select {min-height:38px;padding:9px 12px;gap:10px;font:inherit;font-size:11px;text-align:left;justify-content:flex-start}
.blu-chart__legend-chip .blu-chart__legend-label {font-weight:500}
.blu-chart__legend-chip .blu-chart__legend-detail,.blu-chart__legend-chip .blu-chart__legend-check {display:none}
.blu-chart__legend-chip [aria-pressed=true] {text-decoration:none}
.blu-chart__legend-chip [aria-pressed=true] .blu-chart__legend-label {text-decoration:underline;text-underline-offset:3px}
.blu-chart__legend-chip .blu-chart__legend-numbers {gap:7px;flex-wrap:wrap}
.blu-chart__legend[data-style=ValueList] .blu-chart__legend-items,.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-items {display:grid;grid-template-columns:repeat(var(--legend-columns,1),minmax(0,1fr));gap:10px}
.blu-chart__legend[data-style=ValueList] .blu-chart__legend-entry {display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:10px 11px;border:0}
.blu-chart__legend[data-style=ValueList] .blu-chart__legend-numbers {margin-left:23px;justify-content:space-between}
.blu-chart__legend[data-style=ValueList] .blu-chart__legend-value {font-size:19px;letter-spacing:-.4px;line-height:1.3}
.blu-chart__legend[data-style=ValueList] .blu-chart__legend-detail {margin-left:23px}
.blu-chart__legend[data-style=ValueList] .blu-chart__legend-track {display:block;margin:3px 0 0 23px}
.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-entry {display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:12px;min-height:36px;align-self:start;border-color:var(--bluui-border);border-radius:12px}
.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-entry[aria-pressed=true] {border-color:var(--bluui-primary)}
.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-heading {font-size:11px}
.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-numbers {flex-direction:column;align-items:stretch;gap:6px;margin-top:10px}
.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-value {font-size:24px;letter-spacing:-.6px;line-height:1.2}
.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-detail {margin-top:6px}
.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend {padding:8px 12px 16px}
.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend-items {display:flex;flex-direction:column}
.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend-entry {width:100%}
.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend[data-style=Standard] .blu-chart__legend-entry {flex-wrap:wrap;gap:4px 10px}
.blu-chart__legend-scale {max-width:360px;min-width:0;margin:0 0 8px}
.blu-chart__legend-scale-title {display:block;font-size:11px;font-weight:500;margin-bottom:10px;color:var(--bluui-text-muted)}
.blu-chart__legend-gradient {height:8px;border-radius:4px}
.blu-chart__legend-range {display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-variant-numeric:tabular-nums}
.blu-chart__legend[data-style=Compact] .blu-chart__legend-scale {padding:12px 16px;border:1px solid var(--bluui-border);border-radius:18px}
.blu-chart__legend[data-style=ValueList] .blu-chart__legend-scale {padding:10px 11px}
.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-scale {padding:16px;border:1px solid var(--bluui-border);border-radius:12px}
.blu-chart__legend-note {display:block;margin-top:10px}
@media(forced-colors:active) {.blu-chart__legend-entry{border:1px solid ButtonText!important}.blu-chart__legend-entry[aria-pressed=true],.blu-chart__legend .blu-chart__legend-chip.blu-chip--selected{outline:1px solid Highlight}.blu-chart__legend-marker svg{forced-color-adjust:none}.blu-chart__legend-gradient{background:Canvas!important;border:1px solid CanvasText}}

/* BluKavantUi_Community_Core → Chip — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-chip {
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* Chip — root and default color
The root wraps two sibling controls: selectable label and optional remove.
The default appearance is neutral; the modifier classes below map the
shared ComponentColor records to theme tokens. */
.blu-chip {
  --chip-bg: var(--bluui-secondary-soft, #f1f5f9);
  --chip-fg: var(--bluui-secondary-text, #334155);
  --chip-border: var(--bluui-border, #cbd5e1);
  display: inline-flex;
  align-items: stretch;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  vertical-align: middle;
}

/* Shared ComponentColor palette. Presets use Ant Design filled colors;
   statuses use solid colors. Primary/Secondary retain their existing roles. */
.blu-chip.blu-chip--default {
  --chip-bg: var(--bluui-color-default-solid);
  --chip-fg: var(--bluui-color-default-contrast);
  --chip-border: var(--bluui-color-default-solid);
}
.blu-chip.blu-chip--primary {
  --chip-bg: var(--bluui-color-primary-solid);
  --chip-fg: var(--bluui-color-primary-contrast);
  --chip-border: var(--bluui-color-primary-solid);
}
.blu-chip.blu-chip--secondary {
  --chip-bg: var(--bluui-color-secondary-soft);
  --chip-fg: var(--bluui-color-secondary-text);
  --chip-border: var(--bluui-color-secondary-soft);
}
.blu-chip.blu-chip--success {
  --chip-bg: var(--bluui-color-success-solid);
  --chip-fg: var(--bluui-color-success-contrast);
  --chip-border: var(--bluui-color-success-solid);
}
.blu-chip.blu-chip--processing {
  --chip-bg: var(--bluui-color-processing-solid);
  --chip-fg: var(--bluui-color-processing-contrast);
  --chip-border: var(--bluui-color-processing-solid);
}
.blu-chip.blu-chip--warning {
  --chip-bg: var(--bluui-color-warning-solid);
  --chip-fg: var(--bluui-color-warning-contrast);
  --chip-border: var(--bluui-color-warning-solid);
}
.blu-chip.blu-chip--error {
  --chip-bg: var(--bluui-color-error-solid);
  --chip-fg: var(--bluui-color-error-contrast);
  --chip-border: var(--bluui-color-error-solid);
}
.blu-chip.blu-chip--danger {
  --chip-bg: var(--bluui-color-danger-solid);
  --chip-fg: var(--bluui-color-danger-contrast);
  --chip-border: var(--bluui-color-danger-solid);
}
.blu-chip.blu-chip--magenta {
  --chip-bg: var(--bluui-color-magenta-soft);
  --chip-fg: var(--bluui-color-magenta-text);
  --chip-border: var(--bluui-color-magenta-soft);
}
.blu-chip.blu-chip--red {
  --chip-bg: var(--bluui-color-red-soft);
  --chip-fg: var(--bluui-color-red-text);
  --chip-border: var(--bluui-color-red-soft);
}
.blu-chip.blu-chip--volcano {
  --chip-bg: var(--bluui-color-volcano-soft);
  --chip-fg: var(--bluui-color-volcano-text);
  --chip-border: var(--bluui-color-volcano-soft);
}
.blu-chip.blu-chip--orange {
  --chip-bg: var(--bluui-color-orange-soft);
  --chip-fg: var(--bluui-color-orange-text);
  --chip-border: var(--bluui-color-orange-soft);
}
.blu-chip.blu-chip--gold {
  --chip-bg: var(--bluui-color-gold-soft);
  --chip-fg: var(--bluui-color-gold-text);
  --chip-border: var(--bluui-color-gold-soft);
}
.blu-chip.blu-chip--lime {
  --chip-bg: var(--bluui-color-lime-soft);
  --chip-fg: var(--bluui-color-lime-text);
  --chip-border: var(--bluui-color-lime-soft);
}
.blu-chip.blu-chip--green {
  --chip-bg: var(--bluui-color-green-soft);
  --chip-fg: var(--bluui-color-green-text);
  --chip-border: var(--bluui-color-green-soft);
}
.blu-chip.blu-chip--cyan {
  --chip-bg: var(--bluui-color-cyan-soft);
  --chip-fg: var(--bluui-color-cyan-text);
  --chip-border: var(--bluui-color-cyan-soft);
}
.blu-chip.blu-chip--blue {
  --chip-bg: var(--bluui-color-blue-soft);
  --chip-fg: var(--bluui-color-blue-text);
  --chip-border: var(--bluui-color-blue-soft);
}
.blu-chip.blu-chip--geekblue {
  --chip-bg: var(--bluui-color-geekblue-soft);
  --chip-fg: var(--bluui-color-geekblue-text);
  --chip-border: var(--bluui-color-geekblue-soft);
}
.blu-chip.blu-chip--purple {
  --chip-bg: var(--bluui-color-purple-soft);
  --chip-fg: var(--bluui-color-purple-text);
  --chip-border: var(--bluui-color-purple-soft);
}

/* State modifiers are independent of color. Selection adds an outline-like
ring; disabled styling accompanies native disabled controls and action guards. */
.blu-chip--selected {
  box-shadow: 0 0 0 2px var(--bluui-primary, #4f46e5);
}

.blu-chip--disabled {
  opacity: .55;
}

/* Internal native Buttons use chip sizing instead of the standard Button shape.
The repeated root class keeps these rules above later .phone .btn Theme rules.
Reset only these two scoped controls; preserve other BluUI Button styles. */
.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 36px;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: none;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The separate remove control retains a usable target even for a short label. */
.blu-chip.blu-chip .blu-chip__remove {
  min-width: 36px;
  padding: 6px 10px;
}

/* Nonselectable chips display this plain label beside the optional remove button. */
.blu-chip .blu-chip__label {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):disabled {
  cursor: default;
}

/* Keyboard focus stays visible on the specific control, independently of selection. */
.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: 3px;
}

.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* 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;
}

/* BluKavantUI Charts Community / 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: 1; }
.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; }


/* A small point and its soft halo travel along the line, easing into the end. */
.blu-sparkline__traveler { pointer-events: none; fill: var(--blu-sparkline-color); }
.blu-sparkline__halo { opacity: .18; filter: blur(1.5px); }
.blu-sparkline__ring { opacity: .12; }
.blu-sparkline__cursor { stroke: none; }
.blu-sparkline__pause { margin-top: 8px; padding: 5px 8px; min-height: 28px; border: 1px solid var(--bluui-border); border-radius: 5px; background: var(--bluui-surface); color: var(--bluui-text-muted); font: inherit; font-size: 11px; cursor: pointer; }
.blu-sparkline__pause:focus-visible { outline: 2px solid var(--bluui-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .blu-sparkline__traveler { display: none; }
}