/* snps/_health_panel — collapsible health & lifestyle profile panel */
.health-panel {
  margin-bottom: var(--spacing-24);
}

/* Collapsed header (always visible) */
.health-panel-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-12);
  text-align: left;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

  &:hover { background-color: var(--background-hover); }
}

.health-panel-toggle-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.health-panel-toggle-icon {
  width: 1.125rem; /* Note: bespoke value */
  height: 1.125rem;
  color: var(--symbol-default);
}

.health-panel-toggle-label {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
}

.health-panel-total-badge,
.health-panel-total-badge--hidden {
  align-items: center;
  justify-content: center;
  min-width: 20px; /* Note: bespoke value */
  height: 20px;
  padding-inline: var(--spacing-4);
  border-radius: var(--corner-radius-full);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-700);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}
.health-panel-total-badge { display: inline-flex; }
.health-panel-total-badge--hidden { display: none; }
html.theme-dark .health-panel-total-badge,
html.theme-dark .health-panel-total-badge--hidden {
  background-color: color-mix(in oklab, var(--color-pink-800) 50%, transparent);
  color: var(--text-primary);
}

.health-panel-spinner {
  display: none;
}

.health-panel-spinner-svg {
  animation: spin 1s linear infinite;
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--text-primary);
}

.health-panel-error {
  display: none;
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-risk-factor);
}

.health-panel-stats {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-tertiary);
  margin-top: var(--spacing-4);
  padding-left: var(--spacing-24);
}

.health-panel-toggle-trailing {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-shrink: 0;
}

.health-panel-toggle-label-tiny {
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-tertiary);
}

.health-panel-chevron {
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--symbol-default);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Collapsed preview line */
.health-panel-preview {
  padding-inline: var(--spacing-16);
  padding-bottom: var(--spacing-12);
  margin-top: calc(var(--spacing-4) * -1);
  cursor: pointer;
}

.health-panel-preview-text,
.health-panel-preview-empty,
.health-panel-preview-text--empty {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-tertiary);
  padding-left: var(--spacing-24);
}
.health-panel-preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-panel-preview-empty,
.health-panel-preview-text--empty {
  font-style: italic;
}

/* Expandable body */
.health-panel-body {
  display: none;
}

.health-panel-tabs {
  display: flex;
  gap: var(--spacing-8);
  padding-inline: var(--spacing-16);
  padding-bottom: var(--spacing-12);
  border-bottom-width: var(--stroke-weight-1);
  border-bottom-style: solid;
  border-bottom-color: var(--border-subtle);
}

.health-panel-tab {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-8);
  border-radius: var(--corner-radius-sm);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  font-weight: var(--font-weight-600);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.health-panel-tab--active {
  /* `bordered-gradient-brand` is a brand-gem utility — kept inline on the
     element so we don't shadow it. This modifier adds only the text color. */
  color: var(--text-primary);
}

.health-panel-tab--inactive {
  background-color: var(--background-surface-2);
  color: var(--text-secondary);

  &:hover { background-color: var(--background-hover); }
}

.health-panel-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; /* Note: bespoke value */
  height: 18px;
  padding-inline: var(--spacing-4);
  border-radius: var(--corner-radius-full);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-700);
}

.health-panel-tab-count--active {
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}

.health-panel-tab-count--inactive {
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}
html.theme-dark .health-panel-tab-count--inactive {
  background-color: color-mix(in oklab, var(--color-pink-800) 50%, transparent);
  color: var(--text-primary);
}

/* Two-column content (checkboxes + info) */
.health-panel-content {
  display: flex;
  flex-direction: column;
}
@media (min-width: 64rem) {
  .health-panel-content {
    flex-direction: row;
    height: 420px; /* Note: bespoke value */
  }
}

.health-panel-checks-col {
  border-color: var(--border-subtle);
  overflow-y: auto;
}
@media (min-width: 64rem) {
  .health-panel-checks-col {
    width: 33.333333%;
    border-right-width: var(--stroke-weight-1);
    border-right-style: solid;
  }
}

.health-panel-tab-content {
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-16);
}

.health-panel-check-list > * + * { margin-top: var(--spacing-4); }

.health-panel-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-8);
  border-radius: var(--corner-radius-sm);
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

  &:hover { background-color: var(--background-hover); }
}

.health-panel-check-input {
  border-radius: var(--corner-radius-sm);
  color: var(--text-primary);
  height: var(--spacing-16);
  width: var(--spacing-16);

}

.health-panel-check-label {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);
}

/* Right: info panel */
.health-panel-info-col {
  display: none;
  overflow-y: auto;
}
@media (min-width: 64rem) {
  .health-panel-info-col {
    display: block;
    width: 66.666667%;
  }
}

.health-panel-info {
  padding: var(--spacing-16);
}

.health-panel-info-stack > * + * { margin-top: var(--spacing-12); }

.health-panel-info-heading {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  font-weight: var(--font-weight-700);
  color: var(--text-primary);
}

.health-panel-info-desc {
  font-size: var(--font-size-14);
  color: var(--text-secondary);
  margin-top: var(--spacing-4);
  line-height: 1.625;
}

.health-panel-info-label,
.health-panel-info-label--tight {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-4);
}

.health-panel-gene-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.health-panel-gene-chip {
  display: inline-block;
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-2);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  border-radius: var(--corner-radius-sm);
  font-size: var(--font-size-12);
  line-height: 1rem;
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-700);
}
html.theme-dark .health-panel-gene-chip {
  background-color: color-mix(in oklab, var(--color-azure-66) 30%, transparent);
}

.health-panel-variant-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.health-panel-variant-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem; /* Note: bespoke value */
  height: 1.75rem;
  border-radius: var(--corner-radius-full);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-size: var(--font-size-12);
  line-height: 1rem;
  font-weight: var(--font-weight-700);
}
html.theme-dark .health-panel-variant-count {
  background-color: color-mix(in oklab, var(--color-pink-800) 30%, transparent);
  color: var(--text-primary);
}

.health-panel-variant-caption {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.health-panel-example {
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-sm);
  padding: var(--spacing-12);
  border-width: var(--stroke-weight-1);
  border-style: solid;
  border-color: var(--border-subtle);
}
html.theme-dark .health-panel-example {
  background-color: color-mix(in oklab, var(--color-grey-800) 50%, transparent);
  border-color: var(--color-grey-700);
}

.health-panel-example-text {
  font-size: var(--font-size-12);
  color: var(--text-secondary);
  line-height: 1.625;
}