/* SCADA-гейдж — стилі до gauge.js. ПОРТ блоку `.rbg*` з прошивки oCBot
   (main/server-files/css/global.css). Змінилося рівно одне: токени втратили
   префікс `--rb-`. Решта — геометрія, кегль, прозорості — як на контролері,
   бо в цьому й сенс: той самий показник має виглядати однаково скрізь.

   Підключається ЯВНО тією зоною, якій потрібен (як share.css), а не через
   design.css: гейдж є не на кожній сторінці, і тягнути його всюди немає за що. */

.rbg { position: relative; width: 100%; max-width: 190px; margin: 0 auto; aspect-ratio: 1 / 1; }
.rbg-svg { width: 100%; height: 100%; display: block; }

.rbg-track { stroke: rgba(130, 130, 130, 0.16); }
.rbg-fill { transition: d 0.4s ease, stroke 0.3s ease; }
.rbg-target { fill: var(--green); stroke: var(--surface); stroke-width: 1.2; }

.rbg-ovl { position: absolute; inset: 0; }

/* Показник піднятий у верхню частину кола, щоб звільнити місце нижньому рядку. */
.rbg-top {
    position: absolute; top: 22%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.rbg-unit { font-size: 0.72rem; color: var(--hint); margin-bottom: 2px; }
.rbg-val {
    font-size: 1.75rem; font-weight: 700; line-height: 1;
    color: var(--green); font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

/* Нижній рядок — у найширшій (нижньо-середній) зоні кола, над розривом дуги.
   Пастельна полоса для контрасту; у кожній колонці підпис НАД значенням. */
.rbg-row {
    position: absolute; top: 49%; left: 8%; right: 8%;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 2px;
    background: rgba(var(--gold-rgb), 0.13); border-radius: var(--radius); padding: 3px 3px 4px;
}
.rbg-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.rbg-ic { font-size: 0.95rem; font-weight: 700; line-height: 1; color: var(--hint); }
.rbg-cval {
    font-size: 0.8rem; font-weight: 700; line-height: 1; white-space: nowrap;
    color: var(--green); font-variant-numeric: tabular-nums;
}
.rbg-clab {
    font-size: 0.55rem; line-height: 1; color: var(--hint);
    text-transform: uppercase; letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .rbg-fill { transition: none; }
}