/* Health editor "Drilldown Row" — Figma component 125:3249.
 * 48px rows, radius 4, 16px inline / 8px block padding, 12px gap. Two types:
 *   .hp-row--cat  category nav rows (col 1): label + count badge + chevron
 *   .hp-row--opt  option rows (col 2): custom checkbox + label
 */

.hp-row[hidden] { display: none; }   /* win over the flex display below */

.hp-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: 48px; /* Note: Figma row height */
  padding: var(--spacing-8) var(--spacing-16);
  border: 0;
  border-radius: var(--corner-radius-xs);
  background: none;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.hp-row__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  line-height: 1.25;
  color: var(--text-primary);
}

/* Count badge — Figma "Frame 119": pill, surface-2, 12/500. */
.hp-row__badge {
  flex-shrink: 0;
  min-width: 24px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--spacing-4);
  border-radius: var(--corner-radius-full);
  background-color: var(--background-surface-2);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
}
.hp-row__badge.is-empty { display: none; }

.hp-row__chevron,
.hp-row__chevron-left {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--symbol-default);
}

/* ── Category rows (col 1) ──────────────────────────────────────────── */
.hp-row--cat .hp-row__chevron-left { display: none; }   /* shown only when selected */
.hp-row--cat:hover { background-color: var(--background-hover); }
.hp-row--cat:hover .hp-row__chevron { color: var(--symbol-strong); }

/* Selected: surface-1 fill (stands out on the base-colored inset), bold label,
   leading chevron, no badge/trailing chevron (Figma "State=Selected"). */
.hp-row--cat.is-selected {
  background-color: var(--background-surface-1);
}
.hp-row--cat.is-selected .hp-row__label { font-weight: var(--font-weight-600); }
.hp-row--cat.is-selected .hp-row__chevron-left { display: block; }
.hp-row--cat.is-selected .hp-row__chevron,
.hp-row--cat.is-selected .hp-row__badge { display: none; }

/* Dimmed: no matches under the current search (Figma "State=Disabled"). */
.hp-row--cat.is-dimmed {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Option rows (col 2) ────────────────────────────────────────────── */
.hp-row--opt:hover { background-color: var(--background-hover); }

/* Native checkbox is visually hidden; the .hp-check span is the control. */
.hp-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hp-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-1);
  /* Subtle border so the empty box is legible on the base-colored inset
     (the Figma box is fill-only; the border is an affordance add). */
  box-shadow: inset 0 0 0 var(--stroke-weight-1) var(--border-default);
}
.hp-check__mark {
  width: 14px;
  height: 11px;
  color: var(--text-light);
  opacity: 0;
}

/* Checked: brand-gradient fill + white check (Figma "State=Selected"). */
.hp-check-input:checked + .hp-check {
  background-image: var(--brand-gradient);
  box-shadow: none;
}
.hp-check-input:checked + .hp-check .hp-check__mark { opacity: 1; }

/* Keyboard focus ring on the visible control. */
.hp-check-input:focus-visible + .hp-check {
  outline: var(--stroke-weight-2) solid var(--border-strong);
  outline-offset: 2px;
}