/* snps/_health_panel — health-factor selection interface.
 * Figma work-file "Health Profile" (component set 125:3587, frame 125:2315):
 * a collapsed trigger expands into a three-column editor (category nav /
 * option checkboxes / "Get help" fact box) with a full-width search on top.
 * The drilldown rows + checkboxes live in health-drilldown-row.css.
 *
 * Radius is corner-radius-xs (4px) everywhere, per the work-file token map. */

/* Spacing lives on the visible elements (trigger / editor), not the wrapper —
   so when the editor is collapsed on the dashboard (an empty wrapper) it adds
   no gap between the banner and the recommendations browser. */
.health-trigger,
.health-editor { margin-bottom: var(--spacing-24); }

/* The `hidden` attribute (toggled by the Stimulus controller) must win over the
   explicit `display` rules below — a flex/grid display would otherwise show it. */
.health-trigger[hidden],
.health-editor[hidden],
.health-editor__option-group[hidden] { display: none; }

/* ── Collapsed trigger ───────────────────────────────────────────────
 * Not in the Figma component (it only renders the expanded editor with an X
 * close); this is the disclosure state, styled to the same tokens. */
.health-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  border: 0;
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-1);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.health-trigger:hover { background-color: var(--background-hover); }

.health-trigger__lead {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-width: 0;
}
.health-trigger__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--symbol-default);
}
.health-trigger__label {
  font-family: var(--font-family-display);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
}
.health-trigger__cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-shrink: 0;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--text-secondary);
}
.health-trigger__chevron { width: 16px; height: 16px; }

/* ── Expanded editor (panel) ─────────────────────────────────────────
 * Figma: surface-1, padding 32, radius 4, 32px vertical rhythm. */
.health-editor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-32);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-1);
}

/* Title block */
.health-editor__title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.health-editor__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}
.health-editor__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  line-height: 1.15;
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);
}
.health-editor__close {
  display: inline-flex;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--symbol-default);
  cursor: pointer;
}
.health-editor__close svg { width: 24px; height: 24px; }
.health-editor__close:hover { color: var(--text-primary); }
/* Figma: description renders at text-primary (#fafafa). */
.health-editor__desc {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  line-height: 1.25;
  color: var(--text-primary);
}

/* ── Main content: inset container ───────────────────────────────────
 * Figma "Left Column": background-base, padding 8, 8px gaps. (Radius xs added
 * so the inner corners align with the panel — the tree leaves it square.) */
.health-editor__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-base);
}

/* Search (Figma "Input / Search") */
.health-editor__search { position: relative; width: 100%; }
.health-editor__search-icon {
  position: absolute;
  left: var(--spacing-16);
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--symbol-default);
  pointer-events: none;
}
.health-editor__search-input {
  width: 100%;
  height: 48px; /* Note: Figma field height */
  padding-inline: var(--spacing-48) var(--spacing-16);
  border: var(--stroke-weight-1) solid transparent;
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
}
.health-editor__search-input::placeholder { color: var(--text-secondary); }
.health-editor__search-input:hover { background-color: var(--background-hover); }
.health-editor__search-input:focus {
  outline: none;
  background-color: var(--background-hover);
  border-color: var(--border-strong);
}

/* Three columns (Figma: equal 368px columns, 8px gap) */
.health-editor__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-8);
  align-items: start;
}

.health-editor__nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.health-editor__options {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  max-height: 496px; /* Note: Figma options-column height; scrolls beyond */
  overflow-y: auto;
}
.health-editor__options form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.health-editor__option-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.health-editor__empty {
  padding: var(--spacing-16);
  font-size: var(--font-size-14);
  color: var(--text-secondary);
}

/* Save feedback */
.health-editor__spinner {
  position: absolute;
  top: var(--spacing-8);
  right: var(--spacing-8);
  width: 20px;
  height: 20px;
  color: var(--symbol-default);
}
.health-editor__spinner svg { width: 100%; height: 100%; animation: hp-spin 0.8s linear infinite; }
@keyframes hp-spin { to { transform: rotate(360deg); } }
.health-editor__error {
  padding: var(--spacing-8) var(--spacing-16);
  font-size: var(--font-size-14);
  color: var(--text-danger);
}

/* ── Fact box (col 3) — "Get help setting up your profile" ──────────── */
.health-editor__help {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: var(--spacing-16) var(--spacing-24);
}
.hp-factbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  max-width: var(--width-320);
  text-align: center;
}
.hp-factbox__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.hp-factbox__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  line-height: 1.15;
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);
}
.hp-factbox__detail {
  font-size: var(--font-size-14);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ── Responsive: stack columns on narrow viewports ───────────────────── */
@media (max-width: 768px) {
  .health-editor { padding: var(--spacing-16); }
  .health-editor__cols { grid-template-columns: minmax(0, 1fr); }
  .health-editor__options { max-height: 60vh; }
}