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

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