/* ─────────────────────────────────────────
   LEARNING — LIBRARY CARDS
   The clickable topic cards on the main Learn page
───────────────────────────────────────── */
.lib-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lib-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1.5px solid #F0F0F5;
  border-radius: 16px;
  padding: 14px 16px;
  animation: popUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Square emoji icon on the left side of each card */
.lib-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.lib-card-body { flex: 1; min-width: 0; } /* min-width: 0 prevents long titles from overflowing */

.lib-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}

/* The small meta line: "BODY • 8 MIN • 10 ESSENTIALS" */
.lib-card-meta {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #bbb;
}

/* Right side of the card — holds the NEW badge and the arrow chevron */
.lib-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: #ccc;
}

/* "NEW!" badge that shows on recently added topics */
.lib-new-badge {
  background: #CC2325;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
}

/* "SARX PICK" badge on high-confidence item cards */
.lib-pick-badge {
  background: #E8192C;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
}

/* "PERSONALIZED" badge for user-calculated targets */
.lib-personalized-badge {
  background: #007AFF;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
}


/* ─────────────────────────────────────────
   LEARNING — TOPIC PAGE HEADER
   The headline block at the top of each topic (Gut Health, Supplements, etc.)
───────────────────────────────────────── */
.topic-header { margin-bottom: 20px; }

/* Small red label showing category and read time */
.topic-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #CC2325;
  margin-bottom: 10px;
}

.topic-tag-count { color: #aaa; font-weight: 600; }

.topic-headline {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.05;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.topic-desc {
  font-size: 0.82rem;
  color: #888;
  line-height: 1.6;
}


/* ─────────────────────────────────────────
   LEARNING — TOPIC PAGE CONTENT
   Section headers, cards, and the featured Sarx Pick card
───────────────────────────────────────── */

/* Section label row — shows the section title on the left and a tag on the right */
.topic-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 22px 0 10px;
}

.topic-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}

.topic-section-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #bbb;
}

/* Optional description under a section header (used for the "Trend Aisle" section) */
.topic-section-desc {
  font-size: 0.78rem;
  color: #999;
  line-height: 1.55;
  margin-top: -4px;
  margin-bottom: 4px;
}

/* The red-bordered "Sarx Pick" featured card */
.topic-featured {
  border: 2px solid #CC2325;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  animation: popUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.topic-featured-top  { display: flex; align-items: flex-start; gap: 12px; }
.topic-featured-body { flex: 1; min-width: 0; }

/* "SARX PICK" badge in the top right corner of the featured card */
.topic-featured-badge {
  background: #CC2325;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.topic-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 3px;
}

.topic-card-desc {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.4;
}

/* Thin horizontal line inside the featured card, separating top from meta row */
.topic-featured-divider {
  border: none;
  border-top: 1px solid #F0F0F5;
  margin: 12px 0;
}

/* Bottom row of the featured card — Target, When, and evidence pill */
.topic-featured-meta  { display: flex; align-items: center; gap: 20px; }
.topic-meta-spacer    { flex: 1; } /* pushes the evidence pill to the far right */
.topic-meta-label     { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; color: #bbb; margin-bottom: 2px; }
.topic-meta-value     { font-size: 0.85rem; font-weight: 700; color: #CC2325; }
.topic-meta-when      { color: #1a1a1a; } /* overrides the red on the "WHEN" value */

.topic-list   { display: flex; flex-direction: column; gap: 10px; }

/* Standard topic card — emoji, title, dosage/timing, and evidence pill */
.topic-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #F0F0F5;
  border-radius: 14px;
  padding: 14px;
  animation: popUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.topic-card-body   { flex: 1; min-width: 0; }
.topic-card-dosage { font-size: 0.72rem; font-weight: 700; color: #CC2325; margin-top: 3px; }
.topic-card-when   { font-weight: 600; color: #bbb; } /* the lighter "DAILY" or "WITH MEALS" part */

/* Evidence tier pill — shown on every card */
.topic-evidence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  white-space: nowrap;
  flex-shrink: 0;
}

.topic-evidence-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Green for strong clinical evidence */
.evidence-high   { color: #34C759; }
.evidence-high   .topic-evidence-dot { background: #34C759; }

/* Orange for moderate evidence */
.evidence-medium { color: #FF9500; }
.evidence-medium .topic-evidence-dot { background: #FF9500; }

/* Grey italic for trend/placebo — intentionally de-emphasized */
.evidence-trend  { color: #aaa; font-style: italic; }

/* Red summary box at the very bottom of each topic — a closing takeaway */
.topic-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #c60508;
  border-radius: 16px;
  padding: 18px;
  margin-top: 8px;
}

.topic-summary-icon { font-size: 1.1rem; flex-shrink: 0; }

.topic-summary-text {
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
}

.lib-intro {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}