/* Action page — /actions/:id (actions/show). The header is the dashboard's
 * expanded .recommendation-card (gem component + widgets/recommendations/
 * rec-card.css, whose rail rules apply unscoped) at page scale; below it the
 * SNP page's two-column layout (snp-show.css: .snp-article-layout, -main,
 * -sidebar, -detailbox, -eyebrow, -dl, -h2, -section-sub, -genotype-tag),
 * details box on the left as there. Only what those don't ship lives here. */

/* ============ Back link ============ */
.action-page-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-16);
  font-family: var(--font-family-display);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--text-secondary);
  &:hover { color: var(--text-primary); }
}
.action-page-back-icon { width: var(--spacing-16); height: var(--spacing-16); }

/* ============ Header card ============ */
.action-page-header { margin-bottom: var(--spacing-32); }

/* Figma uses a 4px radius for the dashboard card, not the gem's 32px. */
.action-page-header .recommendation-card { border-radius: var(--corner-radius-xs); }

/* Type and significance pill sit inline on the left, as on the dashboard card
 * (the gem makes __category flex-grow, which pushes the pill to the right). */
.action-page-header .recommendation-card__category { flex: 0 0 auto; }

/* headline-md on mobile and tablet, headline-lg on desktop. */
.action-page-title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-700);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);
  font-size: var(--font-size-24);
  line-height: 1.15;

  @media (min-width: 64rem) { font-size: var(--font-size-32); }
}

.action-page-summary {
  max-width: var(--width-672);
  font-family: var(--font-family-display);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-500);
  line-height: 1.33;
  color: var(--text-secondary);
}

/* ============ Reading column ============ */
/* prose styling lives in objects/_prose.css; these carry `prose`. */
.action-page-prose {
  max-width: var(--width-672);
  color: var(--text-secondary);
}
.action-page-prose--spaced { margin-top: var(--spacing-16); }

/* The personalized overlay — a surface panel like the SNP page's top panel. */
.action-page-personal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-32);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-1);

  @media (max-width: 47.999rem) { padding: var(--spacing-24); }
}
.action-page-personal-summary {
  font-family: var(--font-family-display);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-600);
  line-height: 1.33;
  color: var(--text-primary);
}

/* Notes — rows split by a subtle rule, as the SNP page's interactions. */
.action-page-notes,
.action-page-genotypes,
.action-page-week { list-style: none; padding: 0; }
.action-page-notes { margin-top: var(--spacing-16); }
.action-page-notes > * + * {
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-12);
  border-top: var(--stroke-weight-1) solid var(--border-subtle);
}
.action-page-note-text { color: var(--text-primary); }
.action-page-note-because {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-8);
  font-size: var(--font-size-12);
  color: var(--text-tertiary);
}
.action-page-note-tag {
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-2);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  font-weight: var(--font-weight-600);
  color: var(--text-primary);
}

/* Genotypes — a gene chip per row, its tags beside it, the SNP's description under. */
.action-page-genotypes {
  margin-top: var(--spacing-16);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.action-page-genotype-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}
/* Gene chips are SNP links — strip link chrome, 4px radius (as rec-card.css). */
.action-page-genotype .gene-chip {
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--corner-radius-xs);
}
/* Scoped: snp-show.css's .snp-article-genotype-tag loads later and sets a colour. */
.action-page-genotype .action-page-genotype-tag--doubt { color: var(--text-risk-factor); }
.action-page-genotype-desc {
  margin-top: var(--spacing-4);
  max-width: var(--width-672);
  font-size: var(--font-size-14);
  color: var(--text-secondary);
}

/* ============ Sidebar — daily tracking ============ */
.action-page-week {
  display: flex;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
}
.action-page-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}
.action-page-week-dot {
  width: var(--spacing-24);
  height: var(--spacing-24);
  border-radius: var(--corner-radius-full);
  background-color: var(--background-surface-2);
}
.action-page-week-day.is-done .action-page-week-dot { background-image: var(--brand-gradient); }
.action-page-week-label {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--text-tertiary);
}
.action-page-tracking-text {
  font-size: var(--font-size-14);
  color: var(--text-secondary);
}
.action-page-tracking-link {
  display: inline-block;
  margin-top: var(--spacing-8);
  font-size: var(--font-size-14);
}