/* Zonas de domínio por pilar: radar, curva e cartão de descolamento (demanda 056). */
:root {
  --zone-muito-abaixo-fg: #B42318;
  --zone-muito-abaixo-fill: rgb(180 35 24 / 0.14);
  --zone-abaixo-fg: #B54708;
  --zone-abaixo-fill: rgb(181 71 8 / 0.14);
  --zone-esperado-fg: #1D4ED8;
  --zone-esperado-crown: rgb(29 78 216 / 0.30);
  --zone-esperado-fill: rgb(29 78 216 / 0.16);
  --zone-acima-fg: #067647;
  --zone-acima-fill: rgb(6 118 71 / 0.14);
  --zone-muito-acima-fg: #6D28D9;
  --zone-muito-acima-fill: rgb(109 40 217 / 0.12);
  --lm-real: #6B1D2F;
  --lm-prev: #5B6779;
}

html.dark {
  --zone-muito-abaixo-fg: #FCA5A5;
  --zone-muito-abaixo-fill: rgb(252 165 165 / 0.20);
  --zone-abaixo-fg: #FDBA74;
  --zone-abaixo-fill: rgb(253 186 116 / 0.20);
  --zone-esperado-fg: #93C5FD;
  --zone-esperado-crown: rgb(147 197 253 / 0.42);
  --zone-esperado-fill: rgb(147 197 253 / 0.24);
  --zone-acima-fg: #6EE7B7;
  --zone-acima-fill: rgb(110 231 183 / 0.20);
  --zone-muito-acima-fg: #C4B5FD;
  --zone-muito-acima-fill: rgb(196 181 253 / 0.20);
  --lm-real: #C5A059;
  --lm-prev: #94A3B8;
}

.mz-fg-muito_abaixo { color: var(--zone-muito-abaixo-fg); }
.mz-fg-abaixo { color: var(--zone-abaixo-fg); }
.mz-fg-esperado { color: var(--zone-esperado-fg); }
.mz-fg-acima { color: var(--zone-acima-fg); }
.mz-fg-muito_acima { color: var(--zone-muito-acima-fg); }

.mz-badge {
  display: inline-block;
  min-width: 1.35rem;
  padding: 0 0.3rem;
  border: 1px solid currentColor;
  border-radius: 0.3rem;
  background: var(--card);
  font-family: ui-monospace, "Space Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Amostras da legenda: cor e padrão, o mesmo vocabulário visual das faixas da curva. */
.mz-swatch {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.mz-swatch-muito_abaixo { color: var(--zone-muito-abaixo-fg); background: repeating-linear-gradient(45deg, currentColor 0 1px, var(--zone-muito-abaixo-fill) 1px 4px); }
.mz-swatch-abaixo { color: var(--zone-abaixo-fg); background: repeating-linear-gradient(45deg, currentColor 0 1px, var(--zone-abaixo-fill) 1px 8px); }
.mz-swatch-esperado { color: var(--zone-esperado-fg); background: var(--zone-esperado-fill); }
.mz-swatch-acima { color: var(--zone-acima-fg); background: radial-gradient(currentColor 1px, var(--zone-acima-fill) 1.5px) 0 0 / 5px 5px; }
.mz-swatch-muito_acima { color: var(--zone-muito-acima-fg); background: repeating-linear-gradient(90deg, currentColor 0 1px, var(--zone-muito-acima-fill) 1px 5px); }

.mz-focus:focus-visible {
  outline: 2px solid var(--lm-real);
  outline-offset: 2px;
}

.mz-chips {
  scrollbar-width: thin;
}

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

@media print {
  .mz-chips { display: none; }
}

/* Dica de cada ponto da curva: aparece no foco e no passar do mouse. */
.mz-tip {
  display: none;
  pointer-events: none;
}
a:hover > .mz-tip,
a:focus-visible > .mz-tip {
  display: inline;
}

.curve-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
}
.curve-fade[hidden] { display: none; }
.curve-fade-left { left: 0; background: linear-gradient(to right, var(--card), transparent); }
.curve-fade-right { right: 0; background: linear-gradient(to left, var(--card), transparent); }