/* GENERATED — DO NOT EDIT.
   Source: scripts/shared_frontend/signal_meter.css
   Regenerate: python3 scripts/sync_shared_frontend_assets.py
   Mandat jauges de signal (2026-08-28) -- 5 segments, dimensions exactes
   imposées. Utilise UNIQUEMENT des variables --ds-meter-* -- jamais une
   couleur en dur -- pour rendre identiquement dans les deux projets, la
   vraie couleur étant définie une fois par chaque projet (voir styles.css,
   :root). --ds-meter-watch DOIT être un jaune réel, jamais un amber qui
   vire à l'orange -- vérifié visuellement en Preview (mandat). */

.ds-meter { display: inline-flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ds-meter-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ds-meter-text-dim, inherit); }

.ds-meter-gauge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin: -4px;
  border: none;
  background: transparent;
  cursor: default;
  min-width: 44px;
  min-height: 44px;
  justify-content: flex-start;
}
button.ds-meter-gauge { cursor: pointer; border-radius: 8px; }
button.ds-meter-gauge:hover { background: var(--ds-meter-hover-bg, rgba(255, 255, 255, 0.06)); }
button.ds-meter-gauge:focus-visible {
  outline: 2px solid var(--ds-meter-focus, #ffffff);
  outline-offset: 2px;
}

.ds-meter-segment {
  width: 20px;
  height: 10px;
  border-radius: 999px;
  background: var(--ds-meter-neutral, #6b7280);
  flex: none;
}
.ds-meter-segment[data-filled="true"][data-tone="positive"] { background: var(--ds-meter-positive, #22c55e); }
.ds-meter-segment[data-filled="true"][data-tone="watch"] { background: var(--ds-meter-watch, #eab308); }
.ds-meter-segment[data-filled="true"][data-tone="concern"] { background: var(--ds-meter-concern, #f87171); }

.ds-meter-detail {
  position: absolute;
  z-index: 40;
  max-width: 320px;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ds-meter-panel-bg, #111);
  border: 1px solid var(--ds-meter-panel-border, rgba(255, 255, 255, 0.12));
  color: var(--ds-meter-panel-text, inherit);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.ds-meter-detail[hidden] { display: none; }
.ds-meter-detail-title { display: block; font-weight: 700; margin-bottom: 4px; }
.ds-meter-detail-body { display: block; font-size: 0.85rem; line-height: 1.4; }
.ds-meter-detail-locked {
  display: block; font-size: 0.8rem; font-style: italic;
  color: var(--ds-meter-text-dim, inherit); margin-top: 6px;
}

/* Grille 6 KPI -- fiches publiques / cartes connectées (mandat §8/§9) */
.ds-meter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 700px) {
  .ds-meter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .ds-meter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}