/* cópia de @nnumbers/ui 0.19.0 — avail.css
 *
 * O export `@nnumbers/ui/avail.css` do pacote (o recorte ESTÁTICO do AvailabilityBars, para a
 * página de status renderizada no servidor) e nada mais: os scripts/public-css.mjs copiam o
 * arquivo INTEIRO, byte a byte, resolvido pelo mapa `exports` do @nnumbers/ui@0.19.0 — não
 * por um caminho fixo em `dist/`. O comentário que abre as regras é o do próprio DS.
 *
 * Por que uma cópia: a página é HTML estático com CSP `style-src 'self'` — não há `<style>`
 * embutido nem folha de estilo de fora —, e o ui.css inteiro (~302 kB de componentes React) não
 * é servido. O recorte tem a faixa, a barra e os seis estados do dia; `__swatch` e `__pop*`
 * não existem nele (são o popover do React: na página o dia e o estado vão no `title` e no
 * `aria-label`, e o dia com incidente é um `<a href>`).
 *
 * NÃO reescreva as regras aqui: o `make public-css-check` compara o corpo deste arquivo com o
 * export do pacote pinado, byte a byte.
 */

/* NNumbers Design System — avail.css (gerado de ui.css, 0.19.0).
 *
 * O recorte ESTÁTICO do AvailabilityBars, para a página de status renderizada
 * no servidor: a faixa, a barra e os seis estados do dia. Sem React, sem
 * popover e sem tooltip — a dica é o atributo `title`.
 *
 * NÃO EDITE: `node scripts/build-libs.mjs ui` regenera a partir do ui.css, e
 * `npm run check:avail` falha se este arquivo divergir da fonte.
 */

.nn-avail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.nn-avail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--space-3);
  row-gap: 2px;
  min-width: 0;
}

.nn-avail__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-ui);
  color: var(--text);
}

.nn-avail__summary {
  color: var(--text-2);
  font-size: var(--text-meta);
  line-height: var(--text-meta-lh);
  letter-spacing: var(--tracking-meta);
  font-variant-numeric: tabular-nums;
  flex: 0 1 auto;
  min-width: 0;
}

.nn-avail__bars {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
}

.nn-avail__bar {
  display: block;
  flex: 1 1 0;
  min-width: 2px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--success-solid);
  appearance: none;
  text-decoration: none;
  cursor: default;
}

button.nn-avail__bar,
a.nn-avail__bar {
  cursor: pointer;
}

button.nn-avail__bar:hover,
a.nn-avail__bar:hover {
  filter: brightness(0.92);
}

a.nn-avail__bar:focus-visible {
  position: relative;
  z-index: 1;
  outline: var(--focus-ring-width) solid var(--focus);
  outline-offset: var(--focus-ring-offset);
}

.nn-avail__bar--operational {
  background: var(--success-solid);
}

.nn-avail__bar--degraded {
  background: var(--warning-solid);
}

.nn-avail__bar--partial_outage,
.nn-avail__bar--major_outage {
  background: var(--danger-solid);
}

.nn-avail__bar--maintenance {
  background: var(--info);
}

.nn-avail__bar--unknown {
  background-color: var(--border-strong);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 2px,
    var(--surface) 2px 4px
  );
}