/* ============================================================
   Janexa — shared category color + icon system.
   RULE: color is NEVER alone. Always color + icon + label,
   so it works for color-blind users AND non-readers.
   ============================================================ */

:root{
  /* seat category */
  --cat-general:#7c8ba1;   /* slate */
  --cat-sc:#2bb6a3;        /* teal  */
  --cat-st:#f2a63b;        /* amber */

  /* gender */
  --g-male:#4f8ff0;        /* blue  */
  --g-female:#e86aa6;      /* pink/magenta */
  --g-other:#a78bfa;       /* violet */

  /* age bands */
  --age-18:#3ad29f;
  --age-26:#4f8ff0;
  --age-36:#f2a63b;
  --age-51:#e8734d;
  --age-65:#b06ad6;

  /* party (formalized) */
  --p-bjp:#f2762e;
  --p-inc:#2a9d5c;
  --p-jds:#3aa0c9;
  --p-ind:#8b93b0;
}

/* generic pill: [icon][label][optional count] */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--kn,'Noto Sans Kannada',sans-serif);
  font-size:12px;font-weight:600;padding:5px 10px;border-radius:20px;line-height:1;
  border:1px solid color-mix(in srgb,var(--pill-c) 40%,transparent);
  background:color-mix(in srgb,var(--pill-c) 16%,transparent);
  color:var(--pill-c)}
.pill .ic{width:14px;height:14px;flex-shrink:0}

/* category shortcuts */
.cat-general{--pill-c:var(--cat-general)}
.cat-sc{--pill-c:var(--cat-sc)}
.cat-st{--pill-c:var(--cat-st)}
.g-male{--pill-c:var(--g-male)}
.g-female{--pill-c:var(--g-female)}
.g-other{--pill-c:var(--g-other)}

/* tap-to-hear button */
.speak{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line,#26305c);background:transparent;cursor:pointer;flex-shrink:0}
.speak svg{width:14px;height:14px;color:var(--indigo-glow,#7c8ff0)}
.speak:active{transform:scale(.9)}
.speak.playing{background:color-mix(in srgb,var(--indigo-glow,#7c8ff0) 25%,transparent)}