/* ============================================================
   Universe Counts Tool - self-contained styles
   co/efficient political dashboard aesthetic (navy/grey/white)
   All selectors namespaced under .ctool to avoid host collisions
   ============================================================ */

.ctool {
  --navy: #1a2b4a;
  --navy-2: #24375c;
  --steel: #4a6285;
  --grey: #6b7280;
  --grey-light: #e5e8ee;
  --grey-bg: #f4f6f9;
  --line: #d8dee8;
  --white: #ffffff;
  --accent: #2f6fed;
  --good: #1f9d6b;
  --chip-on: #1a2b4a;
  --chip-on-text: #ffffff;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--navy);
  background: var(--grey-bg);
  width: 100%;
}
.ctool *, .ctool *::before, .ctool *::after { box-sizing: border-box; }

.ctool-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px;
}
@media (max-width: 900px) {
  .ctool-layout { grid-template-columns: 1fr; }
}

/* ---- Cards ---- */
.ctool-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(26,43,74,0.06);
  margin-bottom: 16px;
}
.ctool-card-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 12px 14px 0;
}

/* ---- Left rail ---- */
.ctool-rail { position: sticky; top: 8px; }
.ctool-rail-scroll { max-height: calc(100vh - 32px); overflow-y: auto; padding-right: 4px; }

.ctool-dim { border-bottom: 1px solid var(--grey-light); padding: 10px 12px; }
.ctool-dim:last-child { border-bottom: none; }
.ctool-dim-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.ctool-dim-title { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.ctool-dim-clear {
  font-size: 11px; color: var(--accent); cursor: pointer; opacity: 0; transition: opacity .15s;
  background: none; border: none; padding: 0;
}
.ctool-dim.has-active .ctool-dim-clear { opacity: 1; }
.ctool-dim-caret { font-size: 10px; color: var(--grey); margin-left: 6px; transition: transform .15s; }
.ctool-dim.collapsed .ctool-dim-caret { transform: rotate(-90deg); }
.ctool-dim.collapsed .ctool-chips { display: none; }

.ctool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ctool-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--white);
  border-radius: 999px; padding: 4px 9px; cursor: pointer;
  font-size: 12px; line-height: 1.2; transition: all .12s; white-space: nowrap;
}
.ctool-chip:hover { border-color: var(--steel); }
.ctool-chip.on { background: var(--chip-on); color: var(--chip-on-text); border-color: var(--chip-on); }
.ctool-chip .ctool-chip-lbl { font-weight: 600; }
.ctool-chip .ctool-chip-cnt { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .8; }
.ctool-chip.on .ctool-chip-cnt { opacity: .9; }
.ctool-chip.zero { opacity: .45; }

.ctool-reset {
  display: block; width: 100%; margin: 12px 0 0;
  background: var(--navy); color: #fff; border: none; border-radius: 8px;
  padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: .03em;
}
.ctool-reset:hover { background: var(--navy-2); }

/* ---- Group selector ---- */
.ctool-groups { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 14px 14px; }
.ctool-group-btn {
  flex: 1 1 0; min-width: 120px;
  border: 1.5px solid var(--line); background: var(--white); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; text-align: left; transition: all .12s;
}
.ctool-group-btn .gname { font-size: 13px; font-weight: 700; color: var(--navy); }
.ctool-group-btn .gcnt { font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ctool-group-btn.on { border-color: var(--accent); background: #eef3fe; }
.ctool-group-btn.on .gname { color: var(--accent); }

/* 4th pill: Low-Propensity Republicans (flat statewide add-on) */
.ctool-group-btn.ctool-lowprop { border-style: dashed; border-color: #c99a2e; background: #fffaf0; }
.ctool-group-btn.ctool-lowprop .gname { color: #8a6a12; }
.ctool-lowprop-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b6892a; background: #fbeecb; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
.ctool-group-btn.ctool-lowprop.on { border-style: solid; border-color: #c99a2e; background: #f6e4b8; }
.ctool-group-btn.ctool-lowprop.on .gname { color: #6e5410; }
/* counter note (shown in place of the % block when Low-Prop add-on is active) */
.ctool-counter-note { flex-basis: 100%; margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--steel); background: #fffaf0; border: 1px dashed #d8b558; border-radius: 8px; padding: 10px 12px; }
.ctool-counter-note .src { color: var(--grey); font-style: italic; }

/* ---- Big counter ---- */
.ctool-counter { display: flex; gap: 24px; align-items: flex-end; padding: 16px 18px 18px; flex-wrap: wrap; }
.ctool-counter-main .lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.ctool-counter-main .val { font-size: 46px; font-weight: 800; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; margin-top: 4px; }
.ctool-counter-sec { display: flex; gap: 22px; padding-bottom: 4px; }
.ctool-counter-sec .item .lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.ctool-counter-sec .item .val { font-size: 22px; font-weight: 700; color: var(--navy-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ctool-counter-pct { margin-left: auto; text-align: right; padding-bottom: 4px; }
.ctool-counter-pct .val { font-size: 26px; font-weight: 800; color: var(--good); font-variant-numeric: tabular-nums; }
.ctool-counter-pct .lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }

/* ---- Map ---- */
.ctool-map-wrap { position: relative; }
#ctool-map { width: 100%; height: 600px; border-radius: 0 0 10px 10px; position: relative; background: #f6f8fb; display: flex; align-items: center; justify-content: center; }
.ctool-svgmap { width: 100%; height: 100%; display: block; }
.ctool-svgmap path { transition: fill .25s ease; }
.ctool-svgmap-tiles { opacity: .9; }
.ctool-svgmap-attrib { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: #4b5563; background: rgba(255,255,255,.7); padding: 1px 5px; border-radius: 4px; pointer-events: none; }
.ctool-svgmap path:hover { filter: brightness(1.08); stroke-opacity: 1 !important; }
.ctool-svgmap-label { font-family: inherit; font-size: 15px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.55); stroke-width: 3px; }
.ctool-svgmap-tip { position: absolute; z-index: 5; pointer-events: none; background: #1a2b4a; color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: 180px; }
.ctool-svgmap-tip b { display: block; font-size: 14px; } .ctool-svgmap-tip span { opacity: .85; }
.ctool-map-legend {
  position: absolute; bottom: 12px; right: 12px; z-index: 5;
  background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 11px; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.ctool-map-legend .lt { font-weight: 700; margin-bottom: 6px; color: var(--navy); letter-spacing: .03em; text-transform: uppercase; }
.ctool-legend-bar { display: flex; height: 12px; width: 160px; border-radius: 3px; overflow: hidden; }
.ctool-legend-bar span { flex: 1; }
.ctool-legend-scale { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; color: var(--grey); margin-top: 3px; }

/* ---- Breakdown ---- */
.ctool-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 14px 0; }
.ctool-tab {
  border: none; background: var(--grey-bg); color: var(--steel);
  border-radius: 6px 6px 0 0; padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ctool-tab.on { background: var(--navy); color: #fff; }
.ctool-break { padding: 14px; }
.ctool-break-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.ctool-break-lbl { width: 150px; font-size: 12.5px; font-weight: 600; color: var(--navy); flex: none; }
.ctool-break-track { flex: 1; background: var(--grey-light); border-radius: 4px; height: 18px; position: relative; overflow: hidden; }
.ctool-break-fill { height: 100%; background: linear-gradient(90deg,#2f6fed,#1a2b4a); border-radius: 4px; }
.ctool-break-num { width: 150px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--navy-2); flex: none; }
.ctool-break-num .pct { color: var(--grey); margin-left: 6px; }

.ctool-loading { padding: 40px; text-align: center; color: var(--grey); font-size: 14px; }
.ctool-err { padding: 24px; color: #b3261e; font-size: 13px; }
.ctool-sub { font-size: 11px; color: var(--grey); padding: 0 14px 10px; }

/* ---- Already-voted suppression (the red button) ---- */
.ctool-sup { display: block; width: 100%; text-align: left; border: 1.5px solid #B1181E; border-radius: 8px; background: #fff; color: #B1181E; padding: 9px 11px; margin-bottom: 10px; cursor: pointer; font-family: inherit; }
.ctool-sup:hover { background: #fbe9ea; }
.ctool-sup.on { background: #B1181E; color: #fff; border-color: #B1181E; }
.ctool-sup[disabled] { border-color: #c9ced6; color: #8a93a0; background: #f6f7f9; cursor: default; }
.ctool-sup .ctool-sup-lbl { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.ctool-sup .ctool-sup-badge { display: block; font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; opacity: .92; }
.ctool-sup-asof { font-size: 11px; color: var(--grey, #6b7280); margin: -4px 0 10px 2px; font-variant-numeric: tabular-nums; }
.ctool-sup-net { display: block; font-size: 11px; color: #B1181E; font-weight: 600; }
.ctool-counter-note.ctool-sup-note { border-left: 0; background: #fbe9ea; color: #7a1015; }

/* ---- 9/25 Audience Builder mode ---- */
.ctool-audience .ctool-rail-head .ctool-sub { padding: 4px 14px 12px; }
.ctool-audience .ctool-groups { flex-direction: column; }
.ctool-audience .ctool-group-btn { min-width: 0; width: 100%; }
.ctool-audience .ctool-rail-scroll { max-height: calc(100vh - 300px); min-height: 360px; }
.ctool-legend-inline { float: right; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--grey); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.ctool-score-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; }
.ctool-dim-tag { display: block; font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--grey); margin-top: 1px; }
.ctool-dim-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10.5px; line-height: 17px; text-align: center; letter-spacing: 0; vertical-align: 1px; }
.ctool-rail-section { padding: 14px 12px 6px; border-bottom: 1px solid var(--grey-light); background: var(--grey-bg); }
.ctool-rail-section .t { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.ctool-rail-section .n { display: block; font-size: 10.5px; color: var(--grey); margin-top: 1px; }
.ab-subtabs { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.ab-subtabs-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-right: 2px; }
.ab-subtab { appearance: none; font: inherit; font-size: 15px; font-weight: 700; padding: 12px 26px; border-radius: 999px; border: 2px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: background .12s, color .12s, transform .06s; }
.ab-subtab:hover { background: rgba(11,31,59,.06); }
.ab-subtab:active { transform: translateY(1px); }
.ab-subtab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ab-subtab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 900px) {
  .ctool-audience .ctool-rail { position: static; }
  .ctool-audience .ctool-rail-scroll { max-height: none; min-height: 0; }
  .ab-subtab { flex: 1 1 0; padding: 12px 8px; font-size: 14px; text-align: center; }
  .ab-subtabs-label { flex: 0 0 100%; margin: 0 0 -4px; }
}