/* =============================================================
   MECHANICA NATURA — SHARED COMPONENTS
   Requires mn-tokens.css (and usually mn-core.css) to be loaded
   first.

   For components used by more than one page family, but not by
   every page — the middle tier between mn-core.css (every page,
   no exceptions: nav/footer/hero/buttons) and family-specific
   files like mn-compound.css (only compound profile pages).

   A page loads this file if it uses ANY component below; there's
   no expectation that every component here is used by every page
   that loads it.

   Current residents:
   - References list (.refs / .refs-more) — used by compound
     profile pages today (cbd.html, berberine.html), and by the
     future Evidence Library / References page once it exists.
     Originally lived in mn-compound.css; moved here once a second
     consumer was identified, rather than staying compound-only.
   ============================================================= */

/* ── REFERENCES ───────────────────────────────────────────────── */
.refs { list-style: none; counter-reset: r; }
.refs li { counter-increment: r; display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--bdr); align-items: flex-start; }
.refs li::before { content: counter(r); font-family: var(--font-head); font-size: 10px; font-weight: 700; color: var(--sage); min-width: 18px; padding-top: 2px; }
.refs li:last-child { border-bottom: none; }
/* Extra spacing/border needed only when .refs sits inside the
   collapsible .refs-more container (its only current use) — kept as
   a descendant selector rather than a second required class, since
   .refs and .refs-more-list were previously always applied together
   on the same element anyway. */
.expand-box .refs { padding: 0 16px; border-top: 1px solid var(--bdr); }

/* ── EXPANDABLE BOX (shared shell) ────────────────────────────── */
/* Unified version of a collapsible box that existed twice under
   different names — compound pages' .pw-also ("Expanded Pathways")
   and this file's own .refs-more (References) — with the outer
   shell (box, summary toggle, label, count, chevron) essentially
   identical, just a 2px padding difference in the clickable header.
   Settled on .pw-also's values (used more: 2 instances per page vs
   1 for refs-more). The CONTENT inside each is genuinely different
   — .pw-also-row's 3-column grid vs. this file's .refs list — so
   only the shell is shared; each box's inner content keeps its own
   name and structure. Default margin-top matches .pw-also's more
   common context; .expand-box--tight overrides it for contexts
   (like References) that need less space above the box. */
.expand-box { margin-top: 24px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--cream); overflow: hidden; }
.expand-box--tight { margin-top: 6px; }
.expand-box summary { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; cursor: pointer; list-style: none; user-select: none; transition: background .15s; }
.expand-box summary::-webkit-details-marker { display: none; }
.expand-box summary::marker { display: none; content: ""; }
.expand-box summary:hover { background: rgba(85,107,75,.05); }
.expand-box-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
/* ── PILL LABEL (shared shape) ───────────────────────────────── */
/* Unified structural shape for 5 small round labels that existed
   separately with drifted padding/size/weight/letter-spacing:
   .l1-badge (Framework), .l1-pill (compound pathway-card role tag),
   .ev-card__badge (shared evidence card), .onset-badge and
   .onset-tag (compound onset). Settled on .l1-pill's shape. Each
   class below keeps its own separate rule for color/background/
   layout extras — those are NOT touched here.

   .pkr-codose-cat was originally included here too but pulled back
   out — its labels are multi-word ("Avoid — oncology review
   required") sitting inside a narrow, fixed-width table column, and
   the shared shape's white-space:nowrap (needed by the other five,
   which are always short single words) broke its wrapping, causing
   it to overflow into the next column. Reverted to its own fully
   independent rule in mn-compound.css rather than patching it —
   this one has its own real layout constraints the other five
   don't share.

   Two real (non-color) side effects from this merge, flagged since
   they're not just color:
   1) .l1-badge loses its explicit Poppins font-family and now
      inherits Inter (var(--font-body), matching .l1-pill), since
      Poppins isn't part of this shared shape.
   2) .onset-tag gains text-transform:uppercase (didn't have it
      before) and its weight goes 600->700 and font-size
      10.5px->10px. Its actual content is natural-case text like
      "Daily, sustained use" — forcing uppercase will render that
      as "DAILY, SUSTAINED USE". Worth checking live before this
      ships; if that's not wanted, .onset-tag is the one to pull
      back out of this shared rule.

   .ev-card__badge was also originally included here, alongside
   .pkr-codose-cat, but pulled back out for the same reason —
   Curcumin's Evidence Summary badges carry short multi-word
   phrases ("Strong preclinical signal"), and this shape's
   white-space:nowrap forced the badge — and with it, the whole
   card, since a flex/grid child won't shrink below an unshrinkable
   child's intrinsic width by default — wider than its 1fr grid
   track, breaking the three-card equal-width layout. Its own rule,
   with normal wrapping, lives with the rest of the .ev-card__*
   rules in mn-core.css rather than here. Badge copy should still
   default to something CBD's own three badges are short enough to
   never have needed a fix for; treat length as the first thing to
   check if this class's card ever overflows again. */
.l1-badge, .l1-pill, .onset-badge, .onset-tag {
  padding: 3px 12px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── COUNT PILL (shared shape) ───────────────────────────────── */
/* Unified structural shape for .expand-box-count and
   .atlas-role-count — same idea, lighter-weight "count" tier
   rather than the label tier above. Colors/background/margin stay
   separate per class below. */
.expand-box-count, .atlas-role-count, .sr-type-count {
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
.expand-box-count { color: var(--moss); background: rgba(85,107,75,.1); text-transform: none; }

/* .atlas-role-count (Pathways' sidebar role-filter count) and
   .sr-type-count (Search Results' sidebar type-filter count) share
   identical color treatment too, not just shape — a genuine second
   consumer of the same sidebar-filter-button count component, not
   just visual coincidence. Base: muted text on parch background.
   Active state (driven by the parent .atlas-role-btn.active /
   .sr-type-btn.active — those button-shell classes stay page-scoped,
   only the count pill itself is shared) swaps to forest text on a
   soft forest-tinted background. */
.atlas-role-count, .sr-type-count { color: var(--muted); background: var(--parch); }
.atlas-role-btn.active .atlas-role-count,
.sr-type-btn.active .sr-type-count { color: var(--forest); background: rgba(31,61,46,.08); }

.expand-box-chevron { font-size: 15px; color: var(--moss); font-weight: 700; transition: transform .2s; display: inline-block; line-height: 1; }
details.expand-box[open] .expand-box-chevron { transform: rotate(45deg); }
.ref-url { color: var(--clay); font-size: 11px; background: rgba(200,106,75,.09); padding: 1px 7px; border-radius: 3px; margin-left: 6px; white-space: nowrap; }

/* ── SOURCE LINK ("↗ Source") ─────────────────────────────────── */
/* Unified version of a link that existed twice with trivial drift:
   pathways.html's .pw-atlas-src (opacity 0.8) and mn-compound.css's
   .pw-also-src (opacity 0.75, and — as of this migration — not
   actually used by any current row, just defined for future use).
   Settled on 0.8. Not the same thing as .ref-url (the References
   list's source link), which is a deliberately different pill/badge
   treatment, not drift — left alone. */
.src-link {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--clay);
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.8;
  transition: opacity 0.15s;
  text-decoration: none;
}
.src-link:hover { opacity: 1; }

/* ── AD SLOT (structural, muted palette) ─────────────────────── */
/* Base ad-slot markup — page-agnostic, usable by any page except
   (probably) Homepage. The .ad-slot--research-only variant, which
   depends on the compound-specific Summary/Research toggle state,
   stays in mn-compound.css instead — it doesn't make sense outside
   a page that has that toggle at all. */
.ad-slot { margin: 44px 0; background: var(--cream); border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 16px 20px 20px; text-align: center; }
.ad-slot-label { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); opacity: .65; margin-bottom: 12px; font-family: var(--font-body); }
.ad-slot-unit { min-height: 90px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.5); border: 1px dashed var(--bdr); border-radius: 6px; color: var(--muted); opacity: .6; font-size: 11px; font-family: var(--font-body); letter-spacing: .02em; }
.ad-slot-unit ins { display: block; width: 100%; }
/* ── AD SLOTS HIDDEN (AdSense not live yet) ───────────────────────
   Placeholders stay in the markup so they're ready, but are hidden
   site-wide until the AdSense account is approved. TO GO LIVE: delete
   BOTH selectors in this rule (or change to `display:block`) and drop
   the real ad unit into each .ad-slot-unit. The second selector cancels
   mn-compound.css's `.research-mode .ad-slot--research-only{display:block}`,
   which otherwise leaks a placeholder into Research view (this file loads
   AFTER mn-compound.css on compound pages, so it wins). Affects every
   page that loads this file — compound pages + pathways.html. */
.ad-slot,
.research-mode .ad-slot--research-only { display: none; }

/* ── "Last reviewed" line — sits at the end of a page's main content
   column (inside <main>), so it left-aligns with the body text. Muted
   (~50% forest). The matching JSON-LD datePublished/dateModified (in
   each page head) is what feeds Google's freshness signal; this is the
   human-visible counterpart. */
.page-reviewed {
  margin: 34px 0 8px;
  font-size: 12px;
  font-style: italic;
  color: rgba(31, 61, 46, .55);
}

/* ── CARD TITLE ───────────────────────────────────────────────── */
/* Unified version of a pathway-card title that existed twice under
   different names: compound pages' .card-title (Inter, 13.5px,
   margin 7px) and pathways.html's .pw-atlas-name (Poppins, 14px,
   margin 6px) — genuinely different typefaces, not just drift.
   Standardized on the .pw-atlas-name spec, kept under the
   .card-title name (far larger existing footprint: ~180 instances
   across cbd.html/berberine.html vs. 72 for pw-atlas-name). */
.card-title { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--forest); margin-bottom: 6px; }

/* ── BODY TEXT (muted secondary) ─────────────────────────────── */
/* Unified version of a secondary/muted body-text style that existed
   twice: compound pages' .body-muted and pathways.html's former
   .pw-atlas-desc. Identical specs once .pw-atlas-desc's divider
   spacing was moved to .pw-atlas-cite where it actually belonged
   (see that commit) — no values needed reconciling here, just the
   duplicate definition.

   .body-muted-marg is a genuine sibling variant, not drift: it's
   for runs of multiple consecutive paragraphs of this same style
   (e.g. several .body-muted-marg <p> tags back to back in a
   research-view narrative), where .body-muted is for a single
   standalone blurb. The :last-child reset is real paragraph-to-
   paragraph spacing, not a divider's margin smuggled into the text
   style — checked this one specifically before promoting it. */
.body-muted { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.body-muted-marg { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-bottom: 13px; }
.body-muted-marg:last-child { margin-bottom: 0; }

/* .body-char / .body-char-marg — the --char (darker, more prominent)
   sibling of .body-muted, for the three body-text spots that used
   var(--char) instead of var(--muted) at this same 12.5px size:
   .ev-research-preview p, .onset-washout-row p (both single blurbs,
   -> .body-char), and .ev-research-more-body p (multiple paragraphs
   in sequence, -> .body-char-marg). That last one previously used
   margin-top + :first-child instead of margin-bottom + :last-child
   — switched to match .body-muted-marg's shape for consistency,
   since there's no reason for these two to differ mechanically. */
.body-char { font-size: 12.5px; color: var(--char); line-height: 1.7; }
.body-char-marg { font-size: 12.5px; color: var(--char); line-height: 1.7; margin-bottom: 13px; }
.body-char-marg:last-child { margin-bottom: 0; }

/* .body-bark — the --bark (warm brown, ties to the clay/lichen
   accent family) body-text color used inside .saf-note. */
.body-bark { font-size: 12.5px; color: var(--bark); line-height: 1.7; }

/* ── SECTION HEADER (eyebrow + divided title) ────────────────── */
/* Unified pattern for a major page section: small uppercase
   eyebrow, then a title that carries its own divider baked in
   (border-bottom on the title itself, not a separate rule on the
   section container — see the note on Framework's migration for
   why that distinction mattered). Originally compound-only;
   Framework adopted this same pattern in place of its own separate
   fw-section/__eye/__h2, which had drifted into a different
   typeface and an end-of-section divider instead of a title-owned
   one. */
.sec { margin-bottom: 64px; }
.sec-eye { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--moss); margin-bottom: 10px; }
.sec-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--forest);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--bdr);
}

/* ── L2 GRID CARD ─────────────────────────────────────────────── */
/* Unified version of a card that existed twice under different
   names with slightly different padding: Framework's .l2-card
   (14px 16px) and Pathways' .l2-def-card (16px 18px). Settled on
   16px/18px, kept under the .l2-card name (far larger existing
   footprint: 24 instances vs. 8 for l2-def-card). */
.l2-card { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 16px 18px; }

/* ── SECTION INTRO (text right below a section/role heading) ──── */
/* Unified version of a style that existed three times under three
   names, each with its own drift: compound pages' .sec-intro
   (13px/1.7/760px cap/22px margin), Pathways' .l1-section__def
   (14.5px/1.75/660px cap/32px margin), and Framework's .l1-def
   (13.5px/1.5/italic/no cap). Settled on .sec-intro's values, no
   width cap, and dropped the italic — kept under the .sec-intro
   name (largest existing footprint: 10 instances vs. 5 each). */
.sec-intro { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 22px; }