/* ComparisonBarsView.razor.css.rz.scp.css */
/* Same contract as `.tower` (see TowerView.razor.css): a leaf view cannot assume its container
   stretches it, and `Controls.Stack` is `align-items: start`. The symptom here is milder than the
   tower's — a bar is a PERCENTAGE of `.cmp-bars`, which is `flex: 1 1 auto`, so a shrink-to-fit root
   does not hide the bars, it mis-scales them: measured 202px instead of 1000px in a start-aligned
   column, with every bar squeezed to 80px. Found while fixing MeshWeaver.Plugins#673. */
.cmp[b-kd18x9d1ce] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cmp-row[b-kd18x9d1ce] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cmp-measure[b-kd18x9d1ce] {
    flex: 0 0 auto;
    min-width: 110px;
    font-size: 12px;
    color: var(--neutral-foreground-rest, #242424);
}

.cmp-bars[b-kd18x9d1ce] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cmp-side[b-kd18x9d1ce] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 14px;
}

.cmp-bar[b-kd18x9d1ce] {
    display: block;
    height: 14px;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* Two weights of ONE hue — the pair is the same measure seen twice, not two unrelated series, so a
   second colour would invite the eye to read a category that isn't there. */
.cmp-left[b-kd18x9d1ce] {
    background-color: color-mix(in srgb, var(--accent-fill-rest, #0ea5e9) 95%, transparent);
}

.cmp-right[b-kd18x9d1ce] {
    background-color: color-mix(in srgb, var(--accent-fill-rest, #0ea5e9) 45%, transparent);
}

.cmp-value[b-kd18x9d1ce] {
    font-size: 11px;
    color: var(--neutral-foreground-hint, #757575);
    white-space: nowrap;
}

.cmp-absent[b-kd18x9d1ce] {
    font-size: 11px;
    font-style: italic;
    color: var(--neutral-foreground-hint, #757575);
}

.cmp-empty[b-kd18x9d1ce] {
    margin: 0;
    font-style: italic;
    color: var(--neutral-foreground-hint, #757575);
}

/* HierarchyView.razor.css.rz.scp.css */
/* The tree is as wide as its widest level: it claims the container's width and scrolls sideways
   rather than overflowing the page. */
.hier[b-th2nk975bg] {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
}

.hier-level[b-th2nk975bg] {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 18px 0 0 0;
    list-style: none;
}

/* The root list is as wide as the TREE, never narrower than the container: centring a tree wider
   than its container would push the leftmost boxes to negative x, which `overflow-x: auto` cannot
   scroll to — those boxes and their links would be unreachable. */
.hier-roots[b-th2nk975bg] {
    padding-top: 0;
    gap: 16px;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

.hier-item[b-th2nk975bg] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 6px 0 6px;
    list-style: none;
}

/* Elbow connectors: each item draws the half of the horizontal rail above it, and the right half
   carries the vertical drop into its box. First / last items draw only their inner half; an only
   child draws just the drop. */
.hier-item[b-th2nk975bg]::before,
.hier-item[b-th2nk975bg]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 18px;
    border-top: 1px solid var(--neutral-stroke-rest, #9ca3af);
}

.hier-item[b-th2nk975bg]::after {
    right: auto;
    left: 50%;
    border-left: 1px solid var(--neutral-stroke-rest, #9ca3af);
}

.hier-item:first-child[b-th2nk975bg]::before,
.hier-item:last-child[b-th2nk975bg]::after {
    border-top: 0 none;
}

.hier-item:last-child[b-th2nk975bg]::before {
    border-right: 1px solid var(--neutral-stroke-rest, #9ca3af);
    border-top-right-radius: 6px;
}

.hier-item:first-child[b-th2nk975bg]::after {
    border-top-left-radius: 6px;
}

.hier-item:only-child[b-th2nk975bg]::before {
    display: none;
}

.hier-item:only-child[b-th2nk975bg]::after {
    border-top: 0 none;
    border-radius: 0;
}

/* The parent's drop to the rail of its children. */
.hier-item > .hier-level[b-th2nk975bg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 18px;
    border-left: 1px solid var(--neutral-stroke-rest, #9ca3af);
}

/* Roots stand on nothing. */
.hier-roots > .hier-item[b-th2nk975bg] {
    padding-top: 0;
}

.hier-roots > .hier-item[b-th2nk975bg]::before,
.hier-roots > .hier-item[b-th2nk975bg]::after {
    display: none;
}

.hier-box[b-th2nk975bg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
    width: 190px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest, #cbd5e1);
    border-radius: 8px;
    background-color: var(--neutral-layer-2, #f3f4f6);
    color: var(--neutral-foreground-rest, #242424);
    text-align: left;
    text-decoration: none;
}

.hier-title[b-th2nk975bg] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hier-subtitle[b-th2nk975bg] {
    font-size: 11.5px;
    color: color-mix(in srgb, var(--neutral-foreground-rest, #242424) 80%, var(--neutral-layer-1, #ffffff));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hier-current[b-th2nk975bg] {
    border: 3px solid var(--accent-fill-rest, #0f6cbd);
    padding: 6px 8px;
}

.hier-strong[b-th2nk975bg] {
    border-color: var(--accent-fill-rest, #0f6cbd);
    background-color: var(--accent-fill-rest, #0f6cbd);
    color: var(--foreground-on-accent-rest, #ffffff);
}

/* Everything printed directly on the accent fill takes the on-accent foreground — the subtitle and
   BOTH halves of a figure; a layer foreground on the accent measured ≈1.1:1. Badges keep their own
   layer ground, so their text keeps the layer foreground. */
.hier-strong .hier-subtitle[b-th2nk975bg],
.hier-strong .hier-figure-label[b-th2nk975bg],
.hier-strong .hier-figure-value[b-th2nk975bg] {
    color: var(--foreground-on-accent-rest, #ffffff);
}

.hier-strong .hier-subtitle[b-th2nk975bg],
.hier-strong .hier-figure-label[b-th2nk975bg] {
    opacity: 0.85;
}

.hier-muted[b-th2nk975bg] {
    background-color: var(--neutral-layer-1, #ffffff);
    border-style: dashed;
}

.hier-link:hover .hier-title[b-th2nk975bg],
.hier-link:focus-visible .hier-title[b-th2nk975bg] {
    text-decoration: underline;
}

.hier-empty[b-th2nk975bg] {
    margin: 0;
    font-style: italic;
    color: var(--neutral-foreground-hint, #757575);
}

/* A STACK (HierarchyArrangement.Stack): the children one above the other — an option's layers as a
   tower. Each stacked item hangs from the one above by a plain drop; no horizontal rail. */
.hier-stack[b-th2nk975bg] {
    flex-direction: column;
    align-items: center;
}

.hier-stack > .hier-item[b-th2nk975bg]::before {
    display: none;
}

.hier-stack > .hier-item[b-th2nk975bg]::after {
    left: 50%;
    width: 0;
    border-top: 0 none;
    border-radius: 0;
}

/* The relation to the parent ("inures to", "option") sits on the connector, above the box. */
.hier-relation[b-th2nk975bg] {
    position: relative;
    z-index: 1;
    margin: -14px 0 4px 0;
    padding: 0 6px;
    font-size: 10.5px;
    font-style: italic;
    line-height: 14px;
    color: var(--neutral-foreground-hint, #757575);
    background: var(--neutral-layer-1, #ffffff);
    white-space: nowrap;
}

.hier-star[b-th2nk975bg] {
    color: var(--warning, #c5a300);
    margin-right: 3px;
}

.hier-figures[b-th2nk975bg] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 2px;
    font-size: 11px;
}

.hier-figure-label[b-th2nk975bg] {
    color: color-mix(in srgb, var(--neutral-foreground-rest, #242424) 70%, var(--neutral-layer-1, #ffffff));
}

.hier-figure-value[b-th2nk975bg] {
    font-weight: 600;
}

.hier-badges[b-th2nk975bg] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.hier-badge[b-th2nk975bg] {
    font-size: 10.5px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest, #cbd5e1);
    background: var(--neutral-layer-1, #ffffff);
    color: var(--neutral-foreground-rest, #242424);
    white-space: nowrap;
}

/* Kinds: a proportional cover and an excess-of-loss layer must not look alike. A left rule in the
   kind's colour keeps the box ground (and so the text contrast) the same for every kind. */
.hier-kind-proportional[b-th2nk975bg] {
    border-left: 5px solid color-mix(in srgb, var(--success, #107c10) 75%, var(--neutral-layer-1, #ffffff));
}

.hier-kind-excess-of-loss[b-th2nk975bg] {
    border-left: 5px solid var(--accent-fill-rest, #0f6cbd);
}

.hier-kind-option[b-th2nk975bg] {
    border-top: 3px solid color-mix(in srgb, var(--warning, #c5a300) 80%, var(--neutral-layer-1, #ffffff));
}

/* Not on a strong box: its accent ground and on-accent text are a PAIR, and replacing only the
   ground gave white text on white. */
.hier-kind-section:not(.hier-strong)[b-th2nk975bg] {
    background-color: var(--neutral-layer-1, #ffffff);
}

.hier-kind-group[b-th2nk975bg] {
    font-size: 14px;
}

.hier-favourite[b-th2nk975bg] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning, #c5a300) 70%, transparent);
}

.hier:focus-visible[b-th2nk975bg] {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: 2px;
}

/* KpiStripView.razor.css.rz.scp.css */
.kpi-strip[b-jkho40fn1g] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.kpi-tile[b-jkho40fn1g] {
    flex: 1 1 auto;
    border: 1px solid var(--neutral-stroke-divider, #d0d0d0);
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--neutral-layer-1, transparent);
}

.kpi-label[b-jkho40fn1g] {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint, #757575);
}

.kpi-value[b-jkho40fn1g] {
    font-size: 20px;
    font-weight: 700;
    margin-top: 2px;
    color: var(--neutral-foreground-rest, #242424);
}

.kpi-hint[b-jkho40fn1g] {
    font-size: 11px;
    margin-top: 2px;
    color: var(--neutral-foreground-hint, #757575);
}

.kpi-empty[b-jkho40fn1g] {
    margin: 0;
    font-style: italic;
    color: var(--neutral-foreground-hint, #757575);
}

/* TowerView.razor.css.rz.scp.css */
/* 🚨 The tower has NO INTRINSIC WIDTH, so it must claim its container's.
   Every band is `position: absolute` inside `.tower-stack`, which therefore contributes zero to
   max-content; the only child that takes up space is the 64px amount axis. A leaf view cannot
   assume its container stretches it: `Controls.Stack` renders a vertical FluentStack at
   `HorizontalAlignment.Left`, i.e. `align-items: start`, which sizes every child to its own
   content. Without this the whole tower shrank to 73px, `.tower-stack` to 0px, and every
   `left:0; right:0` band to its two borders — `overflow: hidden` then swallowed the labels, so the
   structure graphic rendered as an axis and nothing else (MeshWeaver.Plugins#673). Every other
   full-width view (CatalogView, MeshSearchView, DocumentSourceView, MarkdownView) says this too. */
.tower[b-y5dgdje5ma] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tower-plot[b-y5dgdje5ma] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* The amount axis. Ticks are positioned from the bottom, so the axis reads the way the tower is
   built: zero at the foot, exhaustion at the head. */
.tower-axis[b-y5dgdje5ma] {
    position: relative;
    flex: 0 0 auto;
    min-width: 64px;
    border-right: 1px solid var(--neutral-stroke-divider, #d0d0d0);
}

.tower-tick[b-y5dgdje5ma] {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    padding-right: 6px;
    border-right: 4px solid var(--neutral-stroke-divider, #d0d0d0);
    line-height: 1;
}

.tower-tick-label[b-y5dgdje5ma] {
    font-size: 11px;
    color: var(--neutral-foreground-hint, #757575);
    white-space: nowrap;
}

.tower-stack[b-y5dgdje5ma] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* The base the tower stands on — hatched so it never reads as another band. */
.tower-retention[b-y5dgdje5ma] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral-stroke-divider, #d0d0d0);
    background: repeating-linear-gradient(
        45deg,
        transparent 0 4px,
        var(--neutral-stroke-divider, #d0d0d0) 4px 6px
    );
}

.tower-retention-label[b-y5dgdje5ma] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #757575);
    background: var(--neutral-layer-1, #fff);
    padding: 0 6px;
    border-radius: 4px;
}

/* 🚨 A band is TWO grounds under ONE text run, so every colour here is a PAIR, not a choice.
   `.tower-band-share` is an absolutely positioned fill from the left edge and `.tower-band-text`
   sits on top of it, so the same string crosses the share fill and the band fill and BOTH pairings
   have to clear WCAG AA (4.5:1). Two things broke that (MeshWeaver.Plugins#1169):

   1. The share was 85% accent — near-solid — under `--neutral-foreground-rest` /
      `--neutral-foreground-hint`, which are the foregrounds for a LAYER, not for an accent fill.
      Over white that measured 6.50:1 for the label and 1.93:1 for the terms line.
   2. Both fills mixed with `transparent`, so the rendered colour depended on whatever was painted
      behind the band. On a dark page the same declarations gave 3.49:1 for the label and 1.32:1
      for the terms — a legibility bug no value of the foreground tokens could have fixed, because
      the ground was not knowable.

   So the fills now mix against `--neutral-layer-1` (deterministic, and it flips with the theme the
   way the foreground tokens do), and both stay light enough that the layer foregrounds keep their
   contrast. `TowerViewContrastTest` measures every pairing from THIS file. Because
   `TowerBand.Share` defaults to 1 the share fill normally covers the whole band, so these are the
   ordinary numbers, not an edge case. */
.tower-band[b-y5dgdje5ma] {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    overflow: hidden;
    border: 1px solid var(--neutral-stroke-divider, #d0d0d0);
    background-color: color-mix(in srgb, var(--accent-fill-rest, #0ea5e9) 16%, var(--neutral-layer-1, #ffffff));
    text-decoration: none;
}

/* The taken share, as the tinted portion of the band's width. The step from `.tower-band` is
   deliberately small — it has to stay a ground for dark text — so the share BOUNDARY is carried by
   the edge rather than by the fill difference. `--accent-foreground-rest` is the accent already
   adjusted for contrast against the layer, which is exactly the guarantee an edge wants. */
.tower-band-share[b-y5dgdje5ma] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    border-right: 2px solid var(--accent-foreground-rest, #0f6cbd);
    background-color: color-mix(in srgb, var(--accent-fill-rest, #0ea5e9) 34%, var(--neutral-layer-1, #ffffff));
}

.tower-band-text[b-y5dgdje5ma] {
    position: relative;
    display: block;
    padding: 4px 10px;
    min-width: 0;
}

.tower-band-label[b-y5dgdje5ma] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest, #242424);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* NOT `--neutral-foreground-hint`: that is a hint colour for a LAYER, and on the band's tinted
   grounds it was the worst-measuring text on the whole view. Dimming the layer FOREGROUND toward
   the layer keeps the visual hierarchy (still lighter than the label) while staying on the same
   side of the theme flip, so it dims correctly in dark mode too. */
.tower-band-terms[b-y5dgdje5ma] {
    display: block;
    font-size: 11px;
    color: color-mix(in srgb, var(--neutral-foreground-rest, #242424) 80%, var(--neutral-layer-1, #ffffff));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tower-band-link:hover .tower-band-label[b-y5dgdje5ma],
.tower-band-link:focus-visible .tower-band-label[b-y5dgdje5ma] {
    text-decoration: underline;
}

.tower-unit[b-y5dgdje5ma] {
    font-size: 11px;
    color: var(--neutral-foreground-hint, #757575);
}

.tower-empty[b-y5dgdje5ma] {
    margin: 0;
    font-style: italic;
    color: var(--neutral-foreground-hint, #757575);
}

/* UmlClassDiagramView.razor.css.rz.scp.css */
/* Claims its container's width, like every full-width view (see TowerView.razor.css). */
.uml[b-1fuuic3f2p] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uml-empty[b-1fuuic3f2p] {
    color: var(--neutral-foreground-hint, #707070);
    font-style: italic;
    margin: 0;
}

.uml-toolbar[b-1fuuic3f2p] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.uml-zoom[b-1fuuic3f2p] {
    min-width: 32px;
    padding: 2px 8px;
    border: 1px solid var(--neutral-stroke-rest, #d0d0d0);
    border-radius: 4px;
    background: var(--neutral-fill-rest, transparent);
    color: var(--neutral-foreground-rest, inherit);
    font: inherit;
    cursor: pointer;
}

.uml-zoom:hover[b-1fuuic3f2p] {
    background: var(--neutral-fill-hover, rgba(127, 127, 127, 0.12));
}

/* Pan = scroll: the canvas keeps its laid-out size times the zoom and the viewport scrolls it. */
.uml-viewport[b-1fuuic3f2p] {
    width: 100%;
    max-height: 75vh;
    overflow: auto;
    border: 1px solid var(--neutral-stroke-divider, #e0e0e0);
    border-radius: 8px;
    background: var(--neutral-layer-1, transparent);
}

.uml-viewport:focus-visible[b-1fuuic3f2p] {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: 2px;
}

.uml-canvas[b-1fuuic3f2p] {
    display: block;
    font-family: var(--body-font, system-ui, sans-serif);
}

[b-1fuuic3f2p] .uml-box {
    fill: var(--neutral-layer-card-container, var(--neutral-layer-2, #ffffff));
    stroke: var(--neutral-stroke-rest, #b0b0b0);
    stroke-width: 1.2;
}

[b-1fuuic3f2p] .uml-class-featured .uml-box {
    stroke: var(--accent-fill-rest, #0f6cbd);
    stroke-width: 2;
}

[b-1fuuic3f2p] .uml-class-foreign .uml-box {
    fill: var(--neutral-layer-3, #f3f3f3);
    stroke-dasharray: 5 3;
}

[b-1fuuic3f2p] .uml-class-foreign text {
    fill: var(--neutral-foreground-hint, #707070);
}

[b-1fuuic3f2p] .uml-name {
    font-weight: 600;
    font-size: 13px;
    fill: var(--neutral-foreground-rest, #1a1a1a);
}

[b-1fuuic3f2p] .uml-stereotype,
[b-1fuuic3f2p] .uml-package,
[b-1fuuic3f2p] .uml-more {
    font-size: 11px;
    fill: var(--neutral-foreground-hint, #707070);
}

[b-1fuuic3f2p] .uml-divider {
    stroke: var(--neutral-stroke-divider, #d0d0d0);
}

[b-1fuuic3f2p] .uml-attribute {
    font-family: var(--monospace-font, ui-monospace, monospace);
    font-size: 11.5px;
    fill: var(--neutral-foreground-rest, #1a1a1a);
}

[b-1fuuic3f2p] .uml-attribute-ref {
    fill: var(--accent-foreground-rest, #0f6cbd);
}

[b-1fuuic3f2p] .uml-link:hover .uml-box {
    stroke: var(--accent-fill-hover, #115ea3);
    stroke-width: 2;
}

[b-1fuuic3f2p] .uml-edge polyline {
    stroke: var(--neutral-foreground-hint, #8a8a8a);
    stroke-width: 1.3;
}

[b-1fuuic3f2p] .uml-role,
[b-1fuuic3f2p] .uml-multiplicity {
    font-size: 11px;
    fill: var(--neutral-foreground-hint, #707070);
    paint-order: stroke;
    stroke: var(--neutral-layer-1, #ffffff);
    stroke-width: 3px;
}

[b-1fuuic3f2p] .uml-marker-open {
    fill: none;
    stroke: var(--neutral-foreground-hint, #8a8a8a);
    stroke-width: 1.3;
}

[b-1fuuic3f2p] .uml-marker-hollow {
    fill: var(--neutral-layer-1, #ffffff);
    stroke: var(--neutral-foreground-hint, #8a8a8a);
    stroke-width: 1.3;
}

[b-1fuuic3f2p] .uml-marker-filled {
    fill: var(--neutral-foreground-hint, #8a8a8a);
}

/* WaterfallView.razor.css.rz.scp.css */
/* Same contract as `.tower` (see TowerView.razor.css): every bar is `position: absolute`, so the
   view has no intrinsic width and must claim its container's — `Controls.Stack` is
   `align-items: start` and would otherwise shrink it onto nothing. */
/* Many steps in a narrow container: each column keeps a minimum width so its value label (which is
   absolutely positioned and cannot wrap) never runs into its neighbour's; the view scrolls instead. */
.wf[b-78xyf6pf9f] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-x: auto;
}

.wf-unit[b-78xyf6pf9f] {
    align-self: flex-end;
    font-size: 11px;
    color: var(--neutral-foreground-hint, #757575);
}

/* The top margin is the headroom for the value label over the tallest bar. */
/* The plot and the label row are as wide as their COLUMNS once the minimum widths force scrolling
   (never narrower than the view): otherwise the zero line and connectors stop at the viewport edge
   while the bars scroll on past it. */
/* Plot and label row are both a grid over the SAME template — `--wf-cols` equal columns of at
   least 84px, never sized by content — so a long label wraps inside its column instead of widening
   the label row past the plot (two independent `max-content` widths drifted apart). */
.wf-plot[b-78xyf6pf9f] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--wf-cols, 1), minmax(84px, 1fr));
    margin-top: 20px;
    min-width: calc(var(--wf-cols, 1) * 84px);
}

.wf-zero[b-78xyf6pf9f] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid var(--neutral-stroke-rest, #9ca3af);
    z-index: 1;
}

.wf-col[b-78xyf6pf9f] {
    position: relative;
    min-width: 0;
}

/* One tone per role (below); the tones are WaterfallTone's open vocabulary, an unknown one draws neutral. */
.wf-bar[b-78xyf6pf9f] {
    position: absolute;
    left: 18%;
    right: 18%;
    border-radius: 3px;
    background-color: var(--neutral-stroke-rest, #9ca3af);
}

.wf-total[b-78xyf6pf9f] {
    background-color: var(--accent-fill-rest, #0f6cbd);
}

.wf-increase[b-78xyf6pf9f] {
    background-color: color-mix(in srgb, var(--success, #107c10) 70%, var(--neutral-layer-1, #ffffff));
}

.wf-decrease[b-78xyf6pf9f] {
    background-color: color-mix(in srgb, var(--warning, #f7630c) 85%, var(--neutral-layer-1, #ffffff));
}

.wf-result-positive[b-78xyf6pf9f] {
    background-color: var(--success, #107c10);
}

.wf-result-negative[b-78xyf6pf9f] {
    background-color: var(--error, #d13438);
}

.wf-value[b-78xyf6pf9f] {
    position: absolute;
    left: 0;
    right: 0;
    margin-bottom: 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--neutral-foreground-rest, #242424);
}

/* From this bar's right edge (82 %) across the gap to the next bar's left edge (118 %). */
.wf-connector[b-78xyf6pf9f] {
    position: absolute;
    left: 82%;
    width: 36%;
    height: 0;
    border-top: 1px dashed var(--neutral-stroke-rest, #9ca3af);
}

.wf-labels[b-78xyf6pf9f] {
    display: grid;
    grid-template-columns: repeat(var(--wf-cols, 1), minmax(84px, 1fr));
    min-width: calc(var(--wf-cols, 1) * 84px);
}

.wf-label[b-78xyf6pf9f] {
    min-width: 0;
    padding: 0 2px;
    text-align: center;
    font-size: 12px;
    color: var(--neutral-foreground-hint, #757575);
    overflow-wrap: anywhere;
}

.wf-unrecognized[b-78xyf6pf9f] {
    margin: 0;
    font-size: 11px;
    font-style: italic;
    color: var(--neutral-foreground-hint, #757575);
}

.wf-empty[b-78xyf6pf9f] {
    margin: 0;
    font-style: italic;
    color: var(--neutral-foreground-hint, #757575);
}

.wf:focus-visible[b-78xyf6pf9f] {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: 2px;
}