/* CLIEAIR — Constitutional Health Map. Weather-map-for-the-Constitution:
   choropleth by health, the ailing states pulse (the marquee of truth). */

.cm-wrap { background: radial-gradient(1200px 600px at 50% -10%, #17263c, #0b1626 60%); color: var(--clieair-cream, #faf8f5); }
.cm-headline {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin: 0 0 .4rem;
}
.cm-head__score { font-size: 3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cm-head__tier { font-size: 1.3rem; font-weight: 700; }
.cm-head__lab { color: #9fb0c2; font-size: .95rem; }

.cm-stage { position: relative; }
#cm-map { width: 100%; min-height: 300px; }
.cm-svg { width: 100%; height: auto; display: block; cursor: grab; }
.cm-svg:active { cursor: grabbing; }

.cm-state {
  stroke: #0b1626; stroke-width: .5; transition: fill .5s ease, filter .3s ease;
  cursor: pointer; outline: none;
}
.cm-state:hover { filter: brightness(1.25) drop-shadow(0 0 6px rgba(255,255,255,.35)); stroke: #fff; stroke-width: 1; }
.cm-borders { fill: none; stroke: #0b1626; stroke-width: .6; pointer-events: none; }
.cm-nodata { opacity: .55; }

/* The twinkle — ailing/critical states pulse like a warning beacon. */
.cm-sick { animation: cm-pulse 2.4s ease-in-out infinite; }
@keyframes cm-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.45) drop-shadow(0 0 7px rgba(239,68,68,.7)); }
}
@media (prefers-reduced-motion: reduce) { .cm-sick { animation: none; } }

/* Tooltip */
.cm-tip {
  position: fixed; z-index: 60; display: none; pointer-events: none;
  background: rgba(9,20,34,.96); border: 1px solid #2a3a52; border-radius: 8px;
  padding: .5rem .7rem; font-size: .85rem; color: #e7edf4; max-width: 240px;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.cm-tip__s { font-weight: 800; font-size: 1.05rem; }
.cm-tip__n { color: #9fb0c2; font-size: .78rem; }
.cm-tip__nd { color: #6b7a8d; font-style: italic; }
.cm-tip__flag { color: #f97316; font-weight: 700; font-size: .78rem; }

/* Legend — sharp tier swatches (green=upheld → red=at risk), not a backwards bar */
.cm-legend { display: grid; gap: .5rem; margin-top: .7rem; font-size: .8rem; color: #9fb0c2; }
.cm-leg__dir { color: #c7d0db; font-size: .82rem; }
.cm-leg__dir::before { content: "▸ "; color: var(--clieair-gold, #c9a227); }
.cm-leg__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cm-leg__tier { display: inline-flex; align-items: center; gap: .35rem; }
.cm-leg__sw { width: 15px; height: 15px; border-radius: 3px; display: inline-block; }
.cm-leg__tier b { color: #e7edf4; font-weight: 700; }
.cm-leg__rng { color: #6b7a8d; font-variant-numeric: tabular-nums; font-size: .74rem; }
.cm-leg__keys { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; color: #9fb0c2; font-size: .78rem; }
.cm-leg__key { display: inline-flex; align-items: center; gap: .4rem; }
.cm-leg__pulse { width: 12px; height: 12px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: cm-pulse 2.4s ease-in-out infinite; }
.cm-leg__ndsw { width: 12px; height: 12px; border-radius: 3px; background: #2a3a52; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .cm-leg__pulse { animation: none; } }

/* Drill-deeper hierarchy (state → county → city → school board) */
.cm-drill { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.cm-drill li { display: flex; justify-content: space-between; align-items: center;
  padding: .45rem .65rem; border-radius: 7px; font-size: .88rem; }
.cm-drill li b { color: #e7edf4; }
.cm-drill li span { font-size: .74rem; }
.cm-drill__on { background: rgba(34,197,94,.1); border: 1px solid #1e5136; }
.cm-drill__on span { color: #22c55e; font-weight: 600; }
.cm-drill__off { background: rgba(255,255,255,.02); border: 1px solid #1b2739; opacity: .62; }
.cm-drill__off span { color: #6b7a8d; font-style: italic; }
/* A real, ingested local body — clickable to drill into its record */
.cm-drill__live { background: rgba(201,162,39,.08); border: 1px solid #4a3d18; cursor: pointer;
  transition: background .15s ease, border-color .15s ease; outline: none; }
.cm-drill__live:hover, .cm-drill__live:focus { background: rgba(201,162,39,.16); border-color: var(--clieair-gold, #c9a227); }
.cm-drill__live b { color: #faf3df; }
.cm-drill__live span { font-variant-numeric: tabular-nums; }
.cm-drill__note { color: #6b7a8d; font-size: .74rem; line-height: 1.55; margin-top: .55rem; }

/* Back-to-state link + level badge in the body drill */
.cm-panel__back { display: inline-block; background: none; border: none; color: var(--clieair-gold, #c9a227);
  font-size: .85rem; cursor: pointer; padding: 0 0 .5rem; font-weight: 600; }
.cm-panel__back:hover { text-decoration: underline; }
.cm-panel__lvl { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #0b1626; background: var(--clieair-gold, #c9a227); border-radius: 4px; padding: .12rem .4rem; vertical-align: middle; }

/* Drill panel */
#cm-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92%);
  background: rgba(9,20,34,.98); border-left: 1px solid #2a3a52; overflow-y: auto;
  transform: translateX(102%); transition: transform .32s ease; padding: 1.3rem 1.4rem; z-index: 40;
}
#cm-panel.is-open { transform: translateX(0); box-shadow: -20px 0 40px rgba(0,0,0,.45); }
.cm-panel__x { position: absolute; top: .7rem; right: .9rem; background: none; border: none; color: #9fb0c2; font-size: 1.6rem; cursor: pointer; line-height: 1; }
.cm-panel__x:hover { color: #fff; }
.cm-panel__score { font-size: 3.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cm-panel__score span { font-size: 1.1rem; color: #6b7a8d; }
.cm-panel__tier { font-weight: 700; font-size: 1.1rem; }
.cm-panel__name { color: var(--clieair-gold, #c9a227); margin: .3rem 0 .2rem; font-size: 1.35rem; }
.cm-panel__nums { color: #c7d0db; font-size: .92rem; margin-bottom: 1rem; }
.cm-panel__h4 { color: #e7edf4; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; border-top: 1px solid #243349; padding-top: .9rem; margin: .6rem 0 .7rem; }
.cm-panel__clean { color: #22c55e; font-size: .92rem; }
.cm-panel__note { color: #6b7a8d; font-size: .74rem; line-height: 1.5; margin-top: 1.2rem; border-top: 1px solid #243349; padding-top: .8rem; }
.cm-panel__load { color: #9fb0c2; }

.cm-bills { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.cm-bill { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.cm-bill__g { font-weight: 800; font-size: .85rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; }
.cm-bill__g--F { background: #ef4444; color: #fff; }
.cm-bill__g--D { background: #f97316; color: #1a1200; }
.cm-bill__t { font-weight: 600; font-size: .92rem; color: #eef2f7; }
.cm-bill__d { color: var(--clieair-gold, #c9a227); font-size: .76rem; text-transform: capitalize; }
.cm-bill__w { color: #b9c4d1; font-size: .82rem; line-height: 1.4; margin-top: .15rem; }
.cm-bill__b { color: #6b7a8d; font-size: .72rem; margin-top: .15rem; }

/* Representatives in the drill panel */
.cm-panel__hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7a8d; font-size: .72rem; }
.cm-reps { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.cm-reps__lab { font-size: .78rem; font-weight: 700; margin-bottom: .4rem; }
.cm-reps__lab--def { color: #22c55e; }
.cm-reps__lab--adv { color: #ef4444; }
.cm-rep { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; padding: .28rem 0; border-bottom: 1px solid #16233800; }
.cm-rep__party { font-size: .68rem; font-weight: 800; color: #fff; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; }
.cm-rep__name { font-size: .88rem; color: #dbe3ec; }
.cm-rep__dist { color: #6b7a8d; font-size: .72rem; }
.cm-rep__def { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; }

/* Live warning marquee (the twinkling scroll of truth) */
.cm-marquee { display: flex; align-items: stretch; margin: .3rem 0 .8rem; border: 1px solid #3a1420; border-radius: 8px; overflow: hidden; background: linear-gradient(90deg, #2a0f16, #17263c); }
.cm-mq__label { flex: 0 0 auto; display: flex; align-items: center; padding: 0 .9rem; background: #ef4444; color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .06em; }
.cm-mq__track { flex: 1 1 auto; overflow: hidden; position: relative; }
.cm-mq__run { display: inline-flex; align-items: center; white-space: nowrap; padding: .5rem 0; animation: cm-scroll 90s linear infinite; will-change: transform; }
.cm-mq__track:hover .cm-mq__run { animation-play-state: paused; }
@keyframes cm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cm-mq__run { animation: none; } }
.cm-mq__item { color: #dbe3ec; font-size: .86rem; padding: 0 .3rem; }
.cm-mq__item b { color: #fff; }
.cm-mq__g { font-weight: 800; padding: 0 .3rem; border-radius: 4px; font-size: .74rem; }
.cm-mq__g--F { background: #ef4444; color: #fff; }
.cm-mq__g--D { background: #f97316; color: #1a1200; }
.cm-mq__w { color: var(--clieair-gold, #c9a227); font-weight: 600; }
.cm-mq__d { color: #9fb0c2; text-transform: capitalize; font-style: italic; }
.cm-mq__sep { color: #ef4444; padding: 0 1.1rem; }

.cm-err, .cm-hint { color: #9fb0c2; font-size: .95rem; }
.cm-hint { text-align: center; margin-top: .5rem; }