/* snps/_actions_results — top-level action-type sections (collapsible),
   with sub-sections for interactions, consolidated, and per-evidence rows. */

.actions-results > * + * { margin-top: var(--spacing-32); }

/* Per-action-type section card.
   Border-left + sides are split because the colors differ per action_type.
   Modifiers live alongside the structural class. */
.actions-section {
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-md);
  border-width: var(--stroke-weight-1);
  border-style: solid;
  border-left-width: 4px; /* Note: bespoke accent stripe */
  overflow: hidden;

  &.actions-section--avoidance-sides {
    border-top-color: var(--border-default);
    border-right-color: var(--border-default);
    border-bottom-color: var(--border-default);
  }
  &.actions-section--diet-sides {
    border-top-color: var(--border-default);
    border-right-color: var(--border-default);
    border-bottom-color: var(--border-default);
  }
  &.actions-section--supplement-sides {
    border-top-color: var(--border-default);
    border-right-color: var(--border-default);
    border-bottom-color: var(--border-default);
  }
  &.actions-section--lifestyle-sides {
    border-top-color: var(--border-default);
    border-right-color: var(--border-default);
    border-bottom-color: var(--border-default);
  }
  &.actions-section--monitoring-sides {
    border-top-color: var(--border-default);
    border-right-color: var(--border-default);
    border-bottom-color: var(--border-default);
  }

  &.actions-section--avoidance-left  { border-left-color: var(--border-default); }
  &.actions-section--diet-left       { border-left-color: var(--border-default); }
  &.actions-section--supplement-left { border-left-color: var(--border-default); }
  &.actions-section--lifestyle-left  { border-left-color: var(--border-default); }
  &.actions-section--monitoring-left { border-left-color: var(--border-default); }
}

/* Collapsible summary header */
.actions-section-summary {
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-16);
  cursor: pointer;
  list-style: none;
  user-select: none;
  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;
  border-top-left-radius: var(--corner-radius-md);
  border-top-right-radius: var(--corner-radius-md);

  &::-webkit-details-marker { display: none; }
  &:hover { background-color: var(--background-hover); }
}

.actions-section-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.actions-section-heading {
  font-weight: var(--font-weight-700);
  text-transform: uppercase;
  letter-spacing: 0.025em;

  &.actions-section-heading--avoidance  { color: var(--text-risk-factor); }
  &.actions-section-heading--diet       { color: var(--text-primary); }
  &.actions-section-heading--supplement { color: var(--text-primary); }
  &.actions-section-heading--lifestyle  { color: var(--text-primary); }
  &.actions-section-heading--monitoring { color: var(--text-primary); }
}

.actions-section-stats {
  font-size: var(--font-size-16);
  line-height: 1.5rem;
  color: var(--text-tertiary);
  margin-top: var(--spacing-12);
  margin-bottom: var(--spacing-8);
}

.actions-section-stats-sep {
  color: var(--text-tertiary);
  margin-inline: var(--spacing-4);
}

.actions-section-toggle-label,
.actions-sub-toggle-label,
.actions-sub-count {
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-tertiary);
}

.actions-sub-count { font-variant-numeric: tabular-nums; }

/* One-liner preview list (only when collapsed) */
.actions-section-oneliner {
  margin-top: var(--spacing-12);
  columns: 1;
  column-gap: var(--spacing-32);

  & > * + * { margin-top: var(--spacing-4); }

  @media (min-width: 64rem) { columns: 2; }
}
/* group-open:hidden — hide when parent <details> is open */
.group[open] .actions-section-oneliner { display: none; }

.actions-section-oneliner-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-width: 0;
  break-inside: avoid;
}

.actions-section-oneliner-title {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions-section-oneliner-trailing {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* Body (expanded content) */
.actions-section-body {
  border-top: var(--stroke-weight-1) solid var(--border-subtle);
  padding: var(--spacing-16);

  & > * + * { margin-top: var(--spacing-16); }

  @media (min-width: 64rem) { padding: var(--spacing-24); }
}

/* Sub-section (interactions / consolidated / per-evidence) */
.actions-sub {
  border-radius: var(--corner-radius-sm);
  border: var(--stroke-weight-1) solid var(--border-subtle);
  overflow: hidden;
}

.actions-sub-summary {
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-12);
  cursor: pointer;
  list-style: none;
  user-select: none;
  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;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);

  &::-webkit-details-marker { display: none; }
  &:hover { background-color: var(--background-hover); }
}

.actions-sub-heading-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.actions-sub-heading-text {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  font-weight: var(--font-weight-600);
  color: var(--text-primary);
}

.actions-sub-body {
  padding-inline: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  padding-top: var(--spacing-8);

  & > * + * { margin-top: var(--spacing-24); }
  @media (min-width: 64rem) {
    & > * + * { margin-top: var(--spacing-32); }
  }
}

/* Visibility helpers driven by <details> open state.
   These mirror inline `group-open:hidden` etc. but apply to direct children
   we know about (the "show"/"hide" toggle labels). */

/* ============================================================
   Interaction rows (sub:interactions) — azure accent
   ============================================================ */
.actions-interaction-mobile {
  margin-bottom: var(--spacing-12);
  font-size: var(--font-size-12);
  line-height: 1rem;

  @media (min-width: 48rem) { display: none; }

  & .actions-interaction-mobile-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    color: var(--text-tertiary);
  }

  & .actions-interaction-mobile-rsid {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);
  }

  & .actions-interaction-mobile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
  }

  & .actions-interaction-mobile-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    padding-inline: var(--spacing-8);
    padding-block: var(--spacing-2);
    border-radius: var(--corner-radius-sm);
    background-color: var(--background-surface-2);
    border: var(--stroke-weight-1) solid var(--border-default);
  }

  & .actions-interaction-mobile-chip-alleles {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);
  }

  & .actions-interaction-mobile-chip-gene { color: var(--text-primary); }

  & .actions-interaction-mobile-tracks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
  }
}

.actions-interaction-row {
  display: flex;
  gap: var(--spacing-24);

  @media (min-width: 64rem) { gap: var(--spacing-32); }
}

.actions-interaction-left {
  display: none;
  flex-shrink: 0;
  width: 8rem; /* Note: bespoke value */
  padding-right: var(--spacing-12);
  text-align: right;
  border-right-width: 4px; /* Note: bespoke double-stripe */
  border-right-style: double;
  border-right-color: var(--border-default);
  font-size: var(--font-size-12);
  line-height: 1rem;

  & > * + * { margin-top: var(--spacing-8); }

  @media (min-width: 48rem) { display: block; }

  & .actions-interaction-left-rsid {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);

    &:hover { color: var(--text-primary); }
  }

  & .actions-interaction-left-gene { color: var(--text-tertiary); }

  & .actions-interaction-left-tracks {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-12);
  }
}

.actions-interaction-center {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 32rem; /* Note: bespoke reading width */
  font-size: var(--font-size-14);
  line-height: 1.25rem;

  & > * + * { margin-top: var(--spacing-12); }

  & .actions-interaction-title {
    font-weight: var(--font-weight-600);
    color: var(--text-primary);
  }

  & .actions-interaction-summary {
    color: var(--text-secondary);
    margin-top: var(--spacing-2);
  }

  /* prose styling lives in objects/_prose.css; ERB carries `actions-interaction-prose prose prose-sm`. */
  & .actions-interaction-prose {
    margin-top: var(--spacing-8);
    max-width: none;
    color: var(--text-secondary);
  }

  & .actions-interaction-share { margin-top: var(--spacing-8); }
}

.actions-interaction-right {
  display: none;
  flex-shrink: 0;

  @media (min-width: 48rem) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }
}

.actions-interaction-right-chip {
  border-width: var(--stroke-weight-1);
  border-style: solid;
  border-radius: var(--corner-radius-sm);
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-4);
  background-color: var(--background-surface-2);
  border-color: var(--border-default);
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-primary);
}

.actions-interaction-right-chip-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.actions-interaction-right-alleles {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-700);
}

.actions-interaction-right-gene { font-size: var(--font-size-12); }

/* ============================================================
   Consolidated rows (sub:consolidated) — pink accent
   ============================================================ */
.actions-consolidated-mobile {
  margin-bottom: var(--spacing-12);
  font-size: var(--font-size-12);
  line-height: 1rem;

  @media (min-width: 48rem) { display: none; }

  & .actions-consolidated-mobile-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    color: var(--text-tertiary);
  }

  & .actions-consolidated-mobile-rsid {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);
  }

  & .actions-consolidated-mobile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
  }

  & .actions-consolidated-mobile-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    padding-inline: var(--spacing-8);
    padding-block: var(--spacing-2);
    border-radius: var(--corner-radius-sm);
    background-color: var(--background-surface-2);
    border: var(--stroke-weight-1) solid var(--border-default);
  }

  & .actions-consolidated-mobile-chip-alleles {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);
  }

  & .actions-consolidated-mobile-chip-gene { color: var(--text-primary); }

  & .actions-consolidated-mobile-tracks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin-top: var(--spacing-16);
  }
}

.actions-consolidated-row {
  display: flex;
  gap: var(--spacing-24);

  @media (min-width: 64rem) { gap: var(--spacing-32); }
}

.actions-consolidated-left {
  display: none;
  flex-shrink: 0;
  width: 8rem; /* Note: bespoke value */
  padding-right: var(--spacing-12);
  text-align: right;
  border-right-width: var(--stroke-weight-2);
  border-right-style: dashed;
  border-right-color: var(--border-default);
  font-size: var(--font-size-12);
  line-height: 1rem;

  & > * + * { margin-top: var(--spacing-4); }

  @media (min-width: 48rem) { display: block; }

  & .actions-consolidated-left-rsid {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);

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

  & .actions-consolidated-left-gene { color: var(--text-tertiary); }

  & .actions-consolidated-left-tracks {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-12);
  }
}

.actions-consolidated-center {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 32rem; /* Note: bespoke reading width */
  font-size: var(--font-size-14);
  line-height: 1.25rem;

  & .actions-consolidated-title {
    font-weight: var(--font-weight-600);
    color: var(--text-primary);
  }

  & .actions-consolidated-summary {
    color: var(--text-secondary);
    margin-top: var(--spacing-2);
  }

  /* prose styling lives in objects/_prose.css; ERB carries `actions-consolidated-prose prose prose-sm`. */
  & .actions-consolidated-prose {
    margin-top: var(--spacing-8);
    max-width: none;
    color: var(--text-secondary);
  }

  & .actions-consolidated-share { margin-top: var(--spacing-8); }
}

.actions-consolidated-right {
  display: none;
  flex-shrink: 0;

  @media (min-width: 48rem) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }
}

.actions-consolidated-right-chip {
  border-width: var(--stroke-weight-1);
  border-style: solid;
  border-radius: var(--corner-radius-sm);
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-4);
  background-color: var(--background-surface-2);
  border-color: var(--border-default);
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-primary);
}

.actions-consolidated-right-chip-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.actions-consolidated-right-alleles {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-700);
}

.actions-consolidated-right-gene { color: var(--text-primary); }

/* ============================================================
   Simple rows (per-evidence)
   ============================================================ */
.actions-simple-mobile {
  margin-bottom: var(--spacing-12);
  font-size: var(--font-size-12);
  line-height: 1rem;

  @media (min-width: 48rem) { display: none; }

  & .actions-simple-mobile-id {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    color: var(--text-tertiary);
  }

  & .actions-simple-mobile-rsid {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);
  }

  & .actions-simple-mobile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
  }

  & .actions-simple-mobile-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    padding-inline: var(--spacing-8);
    padding-block: var(--spacing-2);
    border-radius: var(--corner-radius-sm);
    background-color: var(--background-surface-2);
    border: var(--stroke-weight-1) solid var(--border-default);
  }

  & .actions-simple-mobile-chip-alleles {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);
  }

  & .actions-simple-mobile-chip-gene { color: var(--text-primary); }

  & .actions-simple-mobile-tracks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
  }
}

.actions-simple-row {
  display: flex;
  gap: var(--spacing-24);

  @media (min-width: 64rem) { gap: var(--spacing-32); }
}

.actions-simple-left {
  display: none;
  flex-shrink: 0;
  width: 8rem; /* Note: bespoke value */
  padding-right: var(--spacing-12);
  text-align: right;
  font-size: var(--font-size-12);
  line-height: 1rem;

  & > * + * { margin-top: var(--spacing-4); }

  @media (min-width: 48rem) { display: block; }

  & .actions-simple-left-rsid {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);

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

  & .actions-simple-left-gene { color: var(--text-tertiary); }

  & .actions-simple-left-tracks {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-12);
  }
}

.actions-simple-center {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 32rem; /* Note: bespoke reading width */
  font-size: var(--font-size-14);
  line-height: 1.25rem;

  & > * + * { margin-top: var(--spacing-12); }

  & .actions-simple-title {
    font-weight: var(--font-weight-600);
    color: var(--text-primary);
  }

  & .actions-simple-summary {
    color: var(--text-secondary);
    margin-top: var(--spacing-2);
  }

  /* prose styling lives in objects/_prose.css; ERB carries `actions-simple-prose prose prose-sm`. */
  & .actions-simple-prose {
    margin-top: var(--spacing-8);
    max-width: none;
    color: var(--text-secondary);
  }

  & .actions-simple-share { margin-top: var(--spacing-8); }
}

.actions-simple-right {
  display: none;
  flex-shrink: 0;

  @media (min-width: 48rem) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }
}

.actions-simple-right-chip {
  border-width: var(--stroke-weight-1);
  border-style: solid;
  border-radius: var(--corner-radius-sm);
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-4);
  background-color: var(--background-surface-2);
  border-color: var(--border-default);
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-primary);
}

.actions-simple-right-chip-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.actions-simple-right-alleles {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-700);
}

.actions-simple-right-you {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--text-primary);
}

/* ============================================================
   Empty state
   ============================================================ */
.actions-results-empty {
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-md);
  border: var(--stroke-weight-1) solid var(--border-default);
  padding: var(--spacing-32);
  text-align: center;
  color: var(--text-tertiary);
}

.actions-results-empty-icon {
  width: var(--spacing-48);
  height: var(--spacing-48);
  margin-inline: auto;
  margin-bottom: var(--spacing-12);
  color: var(--text-tertiary);
}

.actions-results-empty-title {
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
  margin-bottom: var(--spacing-4);
}

.actions-results-empty-text {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
}