/* TriCell Halo — local conditions bar
   Shared by the landing page and both subsites. Each page sets the palette
   with the --wx-* custom properties below; everything else is identical.
   Pure CSS, no build step, no external assets. */

.wx{
  --wx-bg:#080b0d; --wx-line:#242a30; --wx-text:#e8edf0; --wx-muted:#8fa0a8;
  --wx-go:#35d07f; --wx-caution:#ffb020; --wx-nogo:#ff5c5c;
  --wx-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--wx-bg);
  border-bottom:1px solid var(--wx-line);
  font-family:var(--wx-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--wx-muted);
  line-height:1.5;
}
.wx-in{
  max-width:1200px;margin:0 auto;padding:7px 24px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
/* status light */
.wx-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--wx-muted);
  box-shadow:0 0 0 0 rgba(255,255,255,0);
}
.wx[data-state="go"]      .wx-dot{background:var(--wx-go);      box-shadow:0 0 8px 1px color-mix(in srgb,var(--wx-go) 60%,transparent)}
.wx[data-state="caution"] .wx-dot{background:var(--wx-caution); box-shadow:0 0 8px 1px color-mix(in srgb,var(--wx-caution) 60%,transparent)}
.wx[data-state="nogo"]    .wx-dot{background:var(--wx-nogo);    box-shadow:0 0 8px 1px color-mix(in srgb,var(--wx-nogo) 60%,transparent)}
@media (prefers-reduced-motion: no-preference){
  .wx[data-state="go"] .wx-dot{animation:wxpulse 2.4s ease-in-out infinite}
}
@keyframes wxpulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.65;transform:scale(.86)}
}
/* text pieces */
.wx-head{text-transform:uppercase;font-weight:500;color:var(--wx-text)}
.wx[data-state="go"]      .wx-head{color:var(--wx-go)}
.wx[data-state="caution"] .wx-head{color:var(--wx-caution)}
.wx[data-state="nogo"]    .wx-head{color:var(--wx-nogo)}
.wx-reason{text-transform:uppercase}
.wx-place{text-transform:uppercase;color:var(--wx-text)}
.wx-sep{width:1px;height:11px;background:var(--wx-line);flex:none}
.wx-metrics{white-space:nowrap}
.wx-why{margin-left:auto;opacity:.72;text-transform:uppercase;font-size:.64rem}
.wx-in a{color:inherit}

/* loading + failure states stay quiet rather than shouting */
.wx[data-state="load"] .wx-head{color:var(--wx-muted)}
.wx[hidden]{display:none}

@media(max-width:900px){ .wx-why{display:none} }
@media(max-width:700px){ .wx-reason{display:none} }
@media(max-width:560px){
  .wx-in{padding:6px 16px;gap:8px;flex-wrap:nowrap;overflow:hidden}
  .wx-sep,.wx-metrics{display:none}
  .wx{font-size:.66rem}
  /* keep the strip to one line: the verdict is what matters at this width */
  .wx-head,.wx-place{white-space:nowrap}
  .wx-place{overflow:hidden;text-overflow:ellipsis}
}