/* Meter — the compute hub's own components.
 *
 * One share bar and one range selector, and nothing else. Everything else on that page is a card,
 * a table, a kpi or a utility the style book already has: a hub that invented its own layout would
 * be the drift ADR 0021 exists to prevent, arriving on the newest page rather than the oldest.
 *
 * Every name here is prefixed `meter-`. The borrowed-class rule reads ownership out of these files,
 * so a name a component sheet shares with another turns an untouched element three directories away
 * into a violation. The prefix makes that impossible rather than unlikely.
 */

/* The share of a total, drawn from --share bound in markup. The value is computed per row from
   real data, which is why it is a custom property and not a class: no fixed set of widths can
   carry a percentage nobody knew at authoring time. */
.meter-bar {
    /* A span is inline, and an inline box ignores width. Without this the bars were in the markup,
       passed every style book rule, and rendered as nothing at all. */
    display: block;
    width: 100%;
    height: var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--chart-track);
    overflow: hidden;
}

.meter-fill {
    display: block;
    height: 100%;
    width: var(--share);
    border-radius: var(--radius-pill);
    background: var(--chart-1);
}

/* The unattributed row's bar. It is a real measurement, not a category, so it is drawn in the
   neutral rather than in a series colour that would read as one product among the others. */
.meter-fill-none { background: var(--chart-baseline); }

/* The column the bars live in. Table cells size to their content, so the bar needs the cell to
   have a width before a percentage of it means anything. */
.meter-share {
    width: 20%;
    min-width: 100px;
}

/* Figures never wrap. "$0.00" broken across two lines reads as two numbers, and a repository name
   broken mid-word reads as two products. */
.meter-figure { white-space: nowrap; }

/* The page. It is deliberately not .app-main: that reserves a sidebar this product does not have,
   and a 220px gutter beside nothing is a navigation bar somebody deleted. One page with no nav is
   centred instead. */
.meter-page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-14) var(--space-16);
    min-height: 100vh;
}

/* The range selector: three links, the active one marked. */
.meter-range {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-6);
}

.meter-range-link {
    padding: var(--space-2) var(--space-4);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-size: var(--text-sm);
    text-decoration: none;
}

.meter-range-link:hover { background: var(--surface-hover); }

.meter-range-on {
    background: var(--brand-soft);
    border-color: var(--brand-ring);
    color: var(--brand-on-soft);
}

/* A caveat printed under a figure that could not include everything it was asked about. */
.meter-caveat {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-3);
}

/* A count of calls that broke, printed where a zero would otherwise sit unread. Only ever applied
   when the number is not zero: colouring a zero red is how a page cries wolf. */
.meter-broken {
    color: var(--danger);
    font-weight: var(--weight-semibold);
}