/* =============================================================
   MECHANICA NATURA — COMPOUND PROFILE STYLES
   Requires mn-tokens.css and mn-core.css to be loaded first.

   Everything here is specific to compound profile pages (CBD,
   Berberine, and future compounds): the Summary/Research view
   toggle mechanism, doctrine strip, sidebar quick-facts, PK/
   Onset/Safety tables (both Summary and Research renderings),
   pathway cards, references list, and prev/next compound nav.

   NOT included here (moved to mn-core.css instead, since they're
   shared site-wide, not compound-specific): nav, breadcrumb, hero
   shell, footer, disclaimer bar, buttons, callout box, and the
   evidence-tier summary cards (.ev-grid/.ev-card — unified with
   Framework's version; see mn-core.css's notes on that).

   NOT included here (dead code in the old agent_style.css, never
   actually used by cbd.html/berberine.html — search-results.html
   loads its own separate search_style.css): .sr-*, .ev-legend,
   .ev-leg-item.

   NOT YET WIRED IN anywhere — this file doesn't replace
   agent_style.css until cbd.html / berberine.html are actually
   switched over to load it.
   ============================================================= */

/* ── DOCTRINE STRIP (functional-role pill row under the hero) ─── */
.doctrine-strip {
  background: rgba(251,247,241,.1);
  border-top: 1px solid rgba(165,179,155,.35);
  border-bottom: 1px solid rgba(165,179,155,.2);
  padding: 16px 0;
}
.doctrine-strip-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
  display: flex;
  align-items: center;
  gap: 20px;
}
.dct-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
  font-family: var(--font-body);
}
.doctrine-bar { display: flex; gap: 13px; flex-wrap: wrap; }
.dpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 1.5px solid var(--sage);
  cursor: pointer;
  transition: filter .15s, box-shadow .15s, transform .15s, border-color .15s, color .15s;
}
.dpill.active { background: var(--forest); color: #fff; }
.dpill.partial { background: var(--moss); color: #fff; }
.dpill.off { background: transparent; color: rgba(165,179,155,.35); border-color: rgba(165,179,155,.2); cursor: default; }
.dpill:not(.off):hover { filter: brightness(1.35); box-shadow: 0 4px 12px rgba(0,0,0,.25); transform: translateY(-1px); }

/* ── PAGE BODY: SIDEBAR + MAIN CONTENT ───────────────────────── */
.page-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px var(--sp-xl) 0;
  gap: 0;
  align-items: start;
}
.sidebar { padding-right: 36px; position: sticky; top: 22px; }
.sb-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bdr);
}
.sb-links { list-style: none; margin-bottom: 18px; }
.sb-links li a {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  padding: 4px 0 4px 11px;
  border-left: 2px solid var(--bdr);
  font-weight: 400;
  transition: all .15s;
}
.sb-links li a:hover { color: var(--forest); border-left-color: var(--forest); }
.sb-fact-box { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 14px; }
.sb-fact-title { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sb-fact { margin-bottom: 7px; }
.sb-fact-k { font-size: 11px; color: var(--muted); font-weight: 500; }
.sb-fact-v { font-size: 12px; color: var(--forest); font-weight: 600; line-height: 1.4; }

.main-content { min-width: 0; }
/* .sec / .sec-eye / .sec-title have moved to mn-components.css —
   Framework now uses this same section pattern too. */
/* .sec-intro has moved to mn-components.css, unified with
   pathways.html's l1-section__def and framework.html's l1-def —
   all three were "the sentence right under a section/role heading"
   with drifted size, line-height, width cap, and margin. */

/* ── PATHWAY PROFILE (Summary view) ──────────────────────────── */
.l2-group { margin-bottom: 32px; }
.l2-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bdr); }
/* .l1-pill sits noticeably high against .l2-name's title line under
   flex-start alignment — nudge down a bit. Estimated without a live
   render; may need a follow-up pixel adjustment once seen. */
.l2-hdr .l1-pill { margin-top: 5px; }
.l2-name { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--forest); margin-bottom: 3px; }
/* .body-muted-marg has moved to mn-components.css, alongside its
   sibling .body-muted. */

.l1-pill {
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: filter .15s, box-shadow .15s, transform .15s;
}
.l1-pill:hover { filter: brightness(1.3); box-shadow: 0 3px 8px rgba(31,61,46,.3); transform: translateY(-1px); }
/* Status-driven color, matching the doctrine strip (.dpill) exactly —
   this replaces an earlier static "Attack/Protect always get their
   own color" rule, which wasn't actually reading each compound's real
   per-role status and had drifted inconsistent between pages (CBD's
   Attack pills had no modifier at all; Berberine's did). Every
   .l1-pill now needs one of these three classes, matching whatever
   that specific compound's doctrine strip says for that role. */
.l1-pill.active  { background: var(--forest); color: #fff; }
.l1-pill.partial { background: color-mix(in srgb, var(--moss) 78%, transparent); color: #fff; }
.l1-pill.off     { background: transparent; color: rgba(165,179,155,.6); border: 1px solid var(--bdr); cursor: default; }
.l1-pill.off:hover { filter: none; box-shadow: none; transform: none; }

.pw-card {
  background: #fff;
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 9px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.pw-id {
  font-size: 10px;
  font-weight: 700;
  color: var(--sage);
  padding: 3px 7px;
  background: var(--cream);
  border-radius: 4px;
  border: 1px solid var(--bdr);
  white-space: nowrap;
  margin-top: 2px;
  letter-spacing: .03em;
}
.pw-id--flag { background: rgba(200,106,75,.12); border-color: var(--clay); color: var(--clay); }
/* .card-title has moved to mn-components.css, unified with
   pathways.html's former .pw-atlas-name. */
.pw-name-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.pw-name-link:hover { border-bottom-color: var(--forest); }

/* "Also relevant" expandable pathway list */
/* .pw-also's shell (box, summary, label, count, chevron) is now the
   shared .expand-box in mn-components.css. The row content below
   (.pw-also-body/.pw-also-row/.pw-also-name) is genuinely specific
   to this component and stays here. */
.pw-also-body { border-top: 1px solid var(--bdr); }
.pw-also-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 8px 20px; border-bottom: 1px solid var(--bdr); }
.pw-also-row:last-child { border-bottom: none; }
.pw-also-name { font-size: 12.5px; color: var(--muted); line-height: 1.7; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; justify-self: start; width: fit-content; }
.pw-also-name:hover { border-bottom-color: var(--char); }
/* Source link inside a .pw-also row uses the shared .src-link
   component (mn-components.css), not a dedicated class here. */

/* ── AD SLOT ──────────────────────────────────────────────────── */
/* Base .ad-slot/.ad-slot-label/.ad-slot-unit have moved to
   mn-components.css — genuinely page-agnostic. This modifier stays
   here because it depends on .research-mode, a state that only
   exists on pages with the Summary/Research toggle (compound
   profile pages). */
.ad-slot--research-only { display: none; }
.research-mode .ad-slot--research-only { display: block; }

/* ── EVIDENCE SUMMARY — RESEARCH VIEW (stacked tiers, expand-to-read-more) ── */
/* Distinct from mn-core.css's .ev-grid/.ev-card (Summary view) —
   this is the deeper, expandable Research-view rendering, kept
   compound-specific. */
.ev-research { display: none; }
.research-mode #evidence .ev-grid { display: none; }
.research-mode .ev-research { display: flex; flex-direction: column; gap: 28px; }
.ev-research-block { background: var(--cream); border: 1px solid var(--bdr); border-radius: var(--r-lg); overflow: hidden; }
.ev-research-head { padding: 20px 24px; color: #fff; }
.ev-research-head.human { background: var(--forest); }
.ev-research-head.animal { background: var(--pine); }
.ev-research-head.invitro { background: var(--moss); }
.ev-research-ctitle { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: #fff; line-height: 1.3; }
.ev-research-body-wrap { padding: 24px 28px; }
/* .ev-research-preview p is gone — now the shared .body-char (see
   mn-components.css), applied directly on each <p>. */
.ev-research-more { margin-top: 2px; }
.ev-research-more summary { display: flex; align-items: center; gap: 8px; padding: 12px 0 0; cursor: pointer; list-style: none; user-select: none; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--moss); }
.ev-research-more summary::-webkit-details-marker { display: none; }
.ev-research-more summary::marker { display: none; content: ""; }
.ev-research-more summary:hover { color: var(--forest); }
.ev-research-more-chevron { font-size: 14px; font-weight: 700; transition: transform .2s; display: inline-block; line-height: 1; }
details.ev-research-more[open] .ev-research-more-chevron { transform: rotate(45deg); }
.ev-research-more-body { padding-top: 14px; }
/* .ev-research-more-body p / :first-child is gone — now the shared
   .body-char-marg (see mn-components.css), applied directly on each
   <p>. Note this switches the spacing mechanism from margin-top +
   :first-child to margin-bottom + :last-child, matching
   .body-muted-marg's shape — same visual result, just consistent
   with the rest of the site now. */
/* .ev-research-sigmat is now box-only — its text (was var(--muted),
   matching .body-muted already) is the shared .body-muted class,
   combined on the same <p> tag. */
.ev-research-sigmat { background: #fff; border-radius: 8px; padding: 14px 16px; margin-top: 14px !important; }

/* ── PATHWAY INTERACTION PROFILE — RESEARCH VIEW ─────────────── */
.pw-research { display: none; }
.research-mode .pw-research { display: block; }
.research-mode #pathways > .l2-group { display: none; }
.research-mode #pathways > .expand-box { display: none; }
.pwr-l1-block { margin-bottom: 34px; }
.pwr-l1-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pwr-l1-intro { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--bdr); }
.pwr-l2-group { margin-bottom: 18px; }
.pwr-l2-group:last-child { margin-bottom: 0; }
.pwr-flag-note { display: block; font-size: 11px; color: var(--clay); font-style: italic; margin-top: 6px; }
/* .pwr-protect-note and .onset-washout collapsed into one shared
   .note-box. Also dropped .pwr-protect-note's own font-size/color/
   line-height here — dead weight, since every child inside it
   (.card-title, .body-muted-marg) already carries its own explicit
   typography that fully overrides whatever the box declared. */
.note-box { background: var(--cream); border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 18px 22px; margin-bottom: 14px; }
.pwr-cite-pending { font-size: 11px; color: var(--clay); font-style: italic; white-space: nowrap; }

/* ── PK & FORMULATION — Summary view ─────────────────────────── */
.pk-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
/* .pk-card, .onset-clock, .onset-card collapsed into one shared
   .info-card — all three were the same box (white, bordered, r-md)
   with only 1px of accidental padding drift between them. */
.info-card { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 20px 22px; }
.pk-hl { background: color-mix(in srgb, var(--lichen) 18%, transparent); border-radius: 3px; padding: 0 3px; color: var(--bark); font-weight: 600; }

/* ── PK & Formulation / Onset & Deployment / Safety — Research view (shared component language) ── */
.pkr, .onr, .safr { display: none; }
.onr { margin-top: 22px; }
.safr { margin-top: 22px; }
.research-mode #pk .pk-grid { display: none; }
.research-mode #onset .onset-rows, .research-mode #onset .note-box { display: none; }
.research-mode #safety .saf-grid { display: none; }
.research-mode .pkr, .research-mode .onr, .research-mode .safr { display: block; }
.pkr-block, .onr-block, .safr-block { background: #fff; border: 1px solid var(--bdr); border-radius: var(--r-lg); padding: 26px 28px; margin-bottom: 20px; }
.pkr-block:last-child, .onr-block:last-child, .safr-block:last-child { margin-bottom: 0; }

.pkr-table-wrap, .onr-table-wrap, .safr-table-wrap { width: 100%; margin: 16px 0 18px; overflow: hidden; border: 1px solid var(--bdr); border-radius: var(--r-md); }
.pkr-cap, .onr-cap, .safr-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--moss); padding: 11px 16px; background: var(--cream); }
.data-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; }
.data-table th { text-align: left; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--forest); padding: 10px 16px; overflow-wrap: break-word; }
.data-table td { padding: 11px 16px; border-top: 1px solid var(--bdr); color: var(--char); line-height: 1.7; vertical-align: top; overflow-wrap: break-word; word-break: break-word; }
.data-table tbody tr:nth-child(even) td { background: var(--cream); }
.data-table td.dt-hl { color: var(--bark); font-weight: 600; }
.codose-cell { text-align: center; }
/* .pkr-codose-cat is fully independent — not part of the shared
   pill-label shape (see mn-components.css for why: multi-word
   labels in a narrow fixed-width table column need their own
   wrapping behavior the other pills don't). */
.pkr-codose-cat { display: inline-block; width: fit-content; min-width: 60%; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 14px; border-radius: 100px; margin-bottom: 6px; }
.pkr-codose-cat.avoid { background: rgba(200,106,75,.13); color: var(--clay); }
.pkr-codose-cat.caution { background: rgba(196,179,129,.22); color: var(--bark); }
.pkr-codose-cat.monitor { background: rgba(85,107,75,.1); color: var(--moss); }

/* ── ONSET & WASHOUT — Summary view ──────────────────────────── */
.onset-rows { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 14px; }
/* .onset-clock's own box styling is now the shared .info-card above. */
.onset-clock-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
/* .onset-badge's shape is now the shared pill-label rule above;
   only its color modifiers (.on-fast/.on-fade/.on-slow) remain. */
.onset-badge.on-fast { background: color-mix(in srgb, var(--moss) 16%, transparent); color: var(--moss); }
.onset-badge.on-fade { background: rgba(0,0,0,.05); color: var(--muted); }
.onset-badge.on-slow { background: color-mix(in srgb, var(--lichen) 28%, transparent); color: var(--bark); }
.onset-arrow { color: var(--bdr); font-size: 13px; }

/* .onset-card's own box styling is now the shared .info-card above. */
.onset-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.onset-tag { background: var(--parch); color: var(--forest); }
.onset-tag.clay { background: color-mix(in srgb, var(--clay) 28%, transparent); color: var(--bark); border: none; }

/* .onset-washout's own box styling is now the shared .note-box above. */
.onset-washout-row { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-top: 1px solid var(--bdr); }
.onset-washout-row:first-of-type { border-top: none; padding-top: 2px; }
.onset-washout-tag { flex-shrink: 0; padding: 5px 12px; border-radius: var(--r-sm); background: var(--forest); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; min-width: 80px; text-align: center; }
.onset-washout-tag.alt { background: var(--clay); }
/* .onset-washout-row p is gone — now the shared .body-char (see
   mn-components.css), applied directly on each <p>. */

/* ── SAFETY — Summary view ───────────────────────────────────── */
.saf-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 22px; }
.saf-item { display: flex; align-items: flex-start; gap: 11px; background: #fff; border: 1px solid var(--bdr); border-left: 3px solid var(--clay); border-radius: var(--r-md); padding: 13px 15px; }
.saf-item strong { color: var(--forest); }
/* .saf-note is now box-only — its text is the shared .body-bark
   class, combined on the same <p> tag. */
.saf-note { margin-top: 14px; padding: 13px 16px; background: rgba(200,106,75,.07); border-radius: 8px; border: 1px solid rgba(200,106,75,.15); }

/* ── SOURCING GUIDE CTA (link out to sourcing.html) ──────────── */
.src-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.src-row .src-row-text { flex: 1; min-width: 280px; margin: 0; }
.src-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--forest);
  color: #fff;
  border: 1.5px solid var(--forest);
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.src-cta-btn:hover { background: rgba(31,61,46,.1); color: var(--forest); box-shadow: 0 4px 12px rgba(31,61,46,.25); transform: translateY(-1px); }
.src-cta-btn i { font-size: 15px; }

/* References list (.refs / .refs-more) has moved to
   mn-components.css — used by more than just compound pages now. */

/* ── PREV / NEXT COMPOUND NAV ─────────────────────────────────── */
.cmpd-nav { display: flex; justify-content: space-between; padding: 32px var(--sp-xl); border-top: 1.5px solid var(--bdr); margin: 40px 0 0; }
.cmpd-nav-lnk { display: flex; align-items: baseline; gap: 8px; max-width: none; }
.cmpd-nav-lnk.nx { margin-left: auto; }
.cmpd-dir { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmpd-cname { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--forest); }

/* ── VIEW TOGGLE (Summary / Research) ─────────────────────────── */
.sb-view-toggle { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--bdr); }
.sb-view-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; line-height: 1; }
.mode-pill { display: flex; background: var(--cream); border: 1px solid var(--bdr); border-radius: 7px; overflow: hidden; }
.mode-btn { flex: 1; padding: 6px 0; font-size: 11px; font-weight: 600; font-family: var(--font-body); letter-spacing: .03em; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: all .18s; line-height: 1; }
.mode-btn.active { background: var(--forest); color: #fff; }
#btn-research.active { background: var(--clay); }
.mode-btn:not(.active):hover { background: rgba(31,61,46,.06); color: var(--forest); }
.mode-indicator { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; color: var(--muted); font-family: var(--font-body); }
.mode-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); flex-shrink: 0; transition: background .25s; }
.mode-indicator strong { color: var(--forest); font-weight: 600; }

/* ── RESEARCH BANNER (visible only in Research view) ─────────── */
.research-banner { display: none; align-items: flex-start; gap: 10px; background: rgba(200,106,75,.06); border-left: 3px solid var(--clay); border-radius: 0 6px 6px 0; padding: 10px 14px; margin-bottom: 32px; font-size: 12px; color: var(--bark); line-height: 1.55; }
.research-banner i { color: var(--clay); font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ── CONTENT LAYER VISIBILITY (Summary/Research toggle core) ──── */
.research-layer { display: none; }
.research-mode .research-banner { display: flex; }
.research-mode .research-layer { display: block; }