/*
 * Services index — symptom-router state styles, ported from the prototype's
 * JS-computed button styles (html-design/Services.dc.html renderVals()).
 * Layout classes live on the markup; only the active/inactive state and its
 * transitions are here, keyed off aria-pressed (toggled by pages/services.js).
 * Colour literals mirror the design tokens in assets/css/input.css.
 */
[data-symptom-btn] {
  border-left: 2px solid transparent;
  background: transparent;
  color: #52525B;
  font-weight: 400;
  transition: all .18s ease;
}
[data-symptom-btn] [data-symptom-dot] {
  background: #D4D4D8;
  transition: background .18s ease;
}
[data-symptom-btn][aria-pressed="true"] {
  border-left-color: #FF6333;
  background: #fff;
  color: #0B0B0C;
  font-weight: 500;
}
[data-symptom-btn][aria-pressed="true"] [data-symptom-dot] {
  background: #FF6333;
}