/* === Theme tokens (same values as before) === */
:root {
  /* DARK (default) */
  --c-bg: 11 16 32;          /* #0b1020 */
  --c-panel: 16 25 50;       /* #101932 */
  --c-panel2: 13 20 43;      /* #0d142b */
  --c-text: 230 236 255;     /* #e6ecff */
  --c-muted: 157 176 255;    /* #9db0ff */
  --c-accent: 106 163 255;   /* #6aa3ff */
  --c-ok: 52 211 153;        /* #34d399 */
  --c-warn: 245 158 11;      /* #f59e0b */
  --c-bad: 239 68 68;        /* #ef4444 */
}

/* LIGHT THEME OVERRIDES */
[data-theme="light"] {
  --c-bg: 247 249 255;       /* #f7f9ff */
  --c-panel: 255 255 255;    /* #ffffff */
  --c-panel2: 246 248 255;   /* #f6f8ff */
  --c-text: 15 23 42;        /* #0f172a */
  --c-muted: 71 85 105;      /* #475569 */
  --c-accent: 29 78 216;     /* #1d4ed8 */
  --c-ok: 16 185 129;        /* #10b981 */
  --c-warn: 217 119 6;       /* #d97706 */
  --c-bad: 220 38 38;        /* #dc2626 */
}

/* Make Tailwind ring-white/10 visible on light backgrounds */
[data-theme="light"] .ring-white\/10 { --tw-ring-color: rgba(0,0,0,.12) !important; }

/* Tiny utility for the vertical connector */
.connector:before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: -12px;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, .15);
}
[data-theme="light"] .connector:before { background: rgba(0, 0, 0, .08); }

/* Misc utilities */
.no-select { user-select: none; }

/* Component-ish helpers (converted from Tailwind @apply) */
.pill button { opacity: 0.6; transition: opacity .15s ease; }
.pill button:hover { opacity: 1; }

.kbd {
  border-radius: 0.25rem;                            /* ~rounded */
  border: 1px solid rgba(255, 255, 255, 0.10);       /* ~border border-white/10 */
  background: rgba(255, 255, 255, 0.05);             /* ~bg-white/5 */
  padding: 0 0.25rem;                                 /* ~px-1 */
  font-size: 10px;                                    /* ~text-[10px] */
}

/* Incident panel collapse overrides */
@media (min-width: 1024px) {
  body.incident-collapsed #splitGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Consistent-sized choice pills for header toggles */
.choice-pill {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;   /* fixed size regardless of state */
  font-size: 0.875rem;          /* text-sm */
  line-height: 1.25rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgb(var(--c-text));
}
[data-theme="light"] .choice-pill {
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}
/* Active state only changes colors, never spacing */
.choice-pill.is-active {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
[data-theme="light"] .choice-pill.is-active {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}
/* Normalize embedded checkbox/radio so it doesn’t change pill size */
.choice-pill input[type="checkbox"],
.choice-pill input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  outline: 1.5px solid currentColor;
  outline-offset: 0;
  display: inline-block;
  position: relative;
}
.choice-pill input[type="checkbox"]:checked::before,
.choice-pill input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 9999px;
  background: currentColor;
}
/* For accessibility: focus ring that doesn’t resize */
.choice-pill input[type="checkbox"]:focus-visible,
.choice-pill input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(106,163,255,.35);
}
[data-theme="light"] .choice-pill input[type="checkbox"]:focus-visible,
[data-theme="light"] .choice-pill input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(29,78,216,.30);
}

/* Normalize selects inside choice pills to same height/feel as checkbox pills */
.choice-pill select {
  appearance: none;
  background: transparent;
  border: 0;
  padding-left: 0;            /* text hugs the label text */
  padding-right: 2.25rem;     /* room for chevron */
  padding-top: 0;             /* vertical rhythm comes from the pill */
  padding-bottom: 0;
  font-size: 0.875rem;        /* text-sm */
  line-height: 1.25rem;       /* 20px */
  height: 1.25rem;            /* match line-height for vertical centering */
  color: rgb(var(--c-text));
}
.choice-pill .select-chevron {
  pointer-events: none;
  position: absolute;
  right: 0.5rem;              /* 8px from edge */
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: rgb(var(--c-muted));
}
.pill-help {
  display: block;
  flex-basis: 100%; /* force it to a new row under the pills */
  font-size: 10px;
  opacity: .6;
  margin-top: 2px;
}