/* Round 3 visual grammars: source documents, study designs and product-label scopes.
   These diagrams do not simulate molecules, penetration, reactions or treatment. */

.visual-article .visual-comparison h3{text-wrap:balance}

.diagram-spec-product .diagram-root{border-bottom:1px solid #b0c8d5;padding-bottom:17px}
.diagram-spec-product .diagram-root-mark{border-radius:0;width:23px;height:28px;box-shadow:4px 4px 0 #dce8ee}
.diagram-spec-product .diagram-nodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px;margin-top:27px}
.diagram-spec-product .diagram-node{position:relative;text-align:left;background:#f8fbfc;border:1px solid #a8c0ce;padding:21px 18px 20px}
.diagram-spec-product .role-spec{border-top:3px solid #8eacbd;background:linear-gradient(135deg,transparent 12px,#f8fbfc 0) top right/100% 100%}
.diagram-spec-product .role-product{border-radius:3px 3px 24px 24px;border-top:3px solid #8eacbd}
.diagram-spec-product .role-boundary{grid-column:1/-1;border:0;border-top:1px dashed #8caaba;background:transparent;padding:16px 0 0}
.diagram-spec-product .role-boundary .diagram-node-mark{display:none}
.diagram-spec-product .role-boundary strong{font-size:13px}
.diagram-spec-product .diagram-node-detail{line-height:1.9}

.diagram-study-cohorts .diagram-root{justify-content:flex-start;border-bottom:1px solid #a5becd;padding-bottom:15px}
.diagram-study-cohorts .diagram-root-mark{border-radius:0;width:27px;height:25px;box-shadow:inset 0 0 0 4px #f0f5f6,inset 0 0 0 5px #a3bac6}
.diagram-study-cohorts .diagram-nodes{display:block;margin-top:23px;padding:20px 22px 21px;border:1px solid #9db9ca;background:#f7fbfc}
.diagram-study-cohorts .diagram-node{background:transparent;text-align:left;border:0;padding:7px 0}
.diagram-study-cohorts .role-cohort{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 12px}
.diagram-study-cohorts .role-cohort .diagram-node-mark{grid-row:1/3;font-size:23px;margin-top:5px}
.diagram-study-cohorts .role-cohort strong{font:400 19px/1.7 var(--serif)}
.diagram-study-cohorts .role-cohort .diagram-node-detail{grid-column:2;margin-top:3px}
.diagram-study-cohorts .role-subset{margin:20px 0 10px 48px;padding:17px 19px;border:1px dashed #91aebe;border-left:3px solid #91aebe;background:#e9f1f5}
.diagram-study-cohorts .role-subset strong{font:400 17px/1.8 var(--serif)}
.diagram-study-cohorts .role-subset .diagram-node-mark{font-size:11px;margin-bottom:7px}
.diagram-study-cohorts .role-boundary{margin:17px 0 0;padding-top:16px;border-top:1px solid #c2d5df}
.diagram-study-cohorts .role-boundary .diagram-node-mark{display:none}
.diagram-study-cohorts .role-boundary strong{font-size:12px}

.diagram-routine-parallel .diagram-root{border-bottom:1px solid #a7c0ce;padding-bottom:16px}
.diagram-routine-parallel .diagram-root-mark{border-radius:3px;width:27px;height:26px;box-shadow:none;border-top-width:5px}
.diagram-routine-parallel .diagram-nodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 27px;margin-top:23px}
.diagram-routine-parallel .diagram-node{border:0;text-align:left;padding:20px 17px;background:#f9fcfd;box-shadow:0 2px 0 #b1c8d5}
.diagram-routine-parallel .role-twice,.diagram-routine-parallel .role-once{padding-bottom:46px}
.diagram-routine-parallel .role-twice:after,.diagram-routine-parallel .role-once:after{content:'';position:absolute;left:17px;bottom:19px;height:9px;width:22px;border:1px solid #93adbd;background:#e1ecf2}
.diagram-routine-parallel .role-twice:after{box-shadow:30px 0 0 -1px #e1ecf2,30px 0 0 0 #93adbd}
.diagram-routine-parallel .role-study{grid-column:1/-1;text-align:center;padding:16px 0 8px;background:transparent;box-shadow:none;border-top:1px solid #bccfd9}
.diagram-routine-parallel .role-boundary{grid-column:1/-1;padding:13px 15px;border-left:3px solid #91afc0;background:#e5eff3;box-shadow:none}
.diagram-routine-parallel .role-study .diagram-node-mark,.diagram-routine-parallel .role-boundary .diagram-node-mark{display:none}
.diagram-routine-parallel .role-study strong{font:400 17px/1.8 var(--serif)}
.diagram-routine-parallel .role-boundary strong{font-size:12px}

.diagram-use-compartments .diagram-root{padding-bottom:17px;border-bottom:1px solid #b7cbd7}
.diagram-use-compartments .diagram-root-mark{border-radius:0;box-shadow:5px 0 0 -1px #f0f5f6,5px 0 0 0 #a2bccb;width:19px;height:27px}
.diagram-use-compartments .diagram-nodes{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:23px;gap:21px}
.diagram-use-compartments .diagram-node{border:1px solid #aac1cf;border-top:4px solid #91afc0;background:#f9fcfd;text-align:left;padding:22px 15px 19px}
.diagram-use-compartments .diagram-node-mark{display:inline-block;border-bottom:1px solid #b7ccd8;padding-bottom:9px;font-size:13px;margin-bottom:13px}
.diagram-use-compartments .diagram-node strong{font:400 16px/1.8 var(--serif)}
.diagram-use-compartments .role-boundary{grid-column:1/-1;background:transparent;border:0;border-top:1px dashed #9db6c5;padding:15px 0 0}
.diagram-use-compartments .role-boundary .diagram-node-mark{display:none}
.diagram-use-compartments .role-boundary strong{font:400 12px/1.8 var(--sans)}

.diagram-product-label .diagram-stage{border:1px solid #9db7c6;padding:0;margin:23px 0 18px;background:#fbfdfe;box-shadow:5px 5px 0 #e0ebf1}
.diagram-product-label .diagram-root{padding:21px 22px 19px;justify-content:flex-start;background:#e7f0f4;border-bottom:1px solid #9db7c6}
.diagram-product-label .diagram-root strong{font-size:17px}
.diagram-product-label .diagram-root-mark{border-radius:1px;width:24px;height:28px;box-shadow:none;border-top-width:4px;background:#f7fbfd}
.diagram-product-label .diagram-nodes{display:block;margin:0;padding:0 22px}
.diagram-product-label .diagram-node{display:grid;grid-template-columns:25px minmax(110px,1fr) 2fr;gap:12px;background:transparent;text-align:left;border:0;border-bottom:1px solid #d1e0e8;padding:20px 0;align-items:start}
.diagram-product-label .diagram-node:last-child{border-bottom:0}
.diagram-product-label .diagram-node-mark{font-size:11px;margin:5px 0 0}
.diagram-product-label .diagram-node strong{font-size:13px}
.diagram-product-label .diagram-node-detail{font-size:12px;margin:0;line-height:1.9}
.diagram-product-label .diagram-takeaway{border-top:0}

/* Two separate names, followed by two ingredients within one studied formulation. */
.diagram-identity-composition .diagram-root{border-bottom:1px solid #a9c1cf;padding-bottom:16px}
.diagram-identity-composition .diagram-root-mark{border-radius:0;box-shadow:4px 4px 0 #dae7ee;width:24px;height:27px}
.diagram-identity-composition .diagram-nodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:24px}
.diagram-identity-composition .role-identity{background:#f9fcfd;border:1px solid #b4c9d5;border-left:3px solid #9cb7c8;text-align:left;padding:19px 17px;margin-bottom:33px}
.diagram-identity-composition .role-mixture{margin:0;background:#e4eef3;border:1px solid #9bb8c9;padding:23px 13px 20px;border-radius:15px 15px 0 0}
.diagram-identity-composition .role-mixture strong{font:400 16px/1.8 var(--serif)}
.diagram-identity-composition .role-mixture.node-2:after{content:'＋';position:absolute;right:-22px;top:41%;font:17px/1 var(--serif);color:#60869b}
.diagram-identity-composition .role-study{grid-column:1/-1;background:#e4eef3;border:1px solid #9bb8c9;border-top:0;padding:20px 18px;border-radius:0 0 13px 13px;margin-top:0}
.diagram-identity-composition .role-study .diagram-node-mark{display:none}
.diagram-identity-composition .role-study strong{font:400 18px/1.8 var(--serif)}
.diagram-identity-composition .role-study .diagram-node-detail{margin-top:5px}
/* Only the SW approval node receives a scope frame; the generic name stays outside. */
.visual-article[data-visual-article="stearyl-glycyrrhetinate"] .diagram-condition-gate .role-approval{outline:1px solid #9bb8c9;outline-offset:9px;background:#e7f0f4}
.visual-article[data-visual-article="stearyl-glycyrrhetinate"] .diagram-condition-gate .role-approval .diagram-node-detail{background:#e7f0f4}

.diagram-spec-product .diagram-connectors,
.diagram-study-cohorts .diagram-connectors,
.diagram-routine-parallel .diagram-connectors,
.diagram-use-compartments .diagram-connectors,
.diagram-identity-composition .diagram-connectors,
.diagram-product-label .diagram-connectors{display:none}
.diagram-spec-product .diagram-node.is-current,
.diagram-study-cohorts .diagram-node.is-current,
.diagram-routine-parallel .diagram-node.is-current,
.diagram-use-compartments .diagram-node.is-current,
.diagram-identity-composition .diagram-node.is-current,
.diagram-product-label .diagram-node.is-current{background:#d1e3eb;box-shadow:0 0 0 2px #638ba2}
.diagram-product-label .diagram-root.is-current{background:#d1e3eb;box-shadow:0 0 0 2px #638ba2}

@media(max-width:1000px){
 .diagram-product-label .diagram-node{grid-template-columns:22px minmax(80px,1fr) 2fr;gap:10px}
 .diagram-use-compartments .diagram-nodes{gap:15px}
 .diagram-use-compartments .diagram-node{padding:18px 11px}
}
@media(max-width:650px){
 .visual-article[data-visual-article="caffeine"] .role-condition strong{font-size:14px}
 .diagram-spec-product .diagram-nodes{gap:17px 16px;margin-top:23px}
 .diagram-spec-product .diagram-node{padding:18px 11px}
 .diagram-spec-product .role-boundary{padding:16px 0 0}
 .diagram-study-cohorts .diagram-nodes{padding:17px 13px}
 .diagram-study-cohorts .role-cohort{grid-template-columns:23px minmax(0,1fr);gap:0 10px}
 .diagram-study-cohorts .role-cohort strong{font-size:17px}
 .diagram-study-cohorts .role-cohort .diagram-node-mark{font-size:18px}
 .diagram-study-cohorts .role-subset{margin-left:16px;padding:17px 12px}
 .diagram-study-cohorts .role-subset strong{font-size:16px}
 .diagram-routine-parallel .diagram-nodes{gap:17px 15px}
 .diagram-routine-parallel .diagram-node{padding:17px 11px}
 .diagram-routine-parallel .role-twice,.diagram-routine-parallel .role-once{padding-bottom:43px}
 .diagram-routine-parallel .role-twice:after,.diagram-routine-parallel .role-once:after{left:11px;bottom:18px}
 .diagram-routine-parallel .role-study{padding:16px 0 8px}
 .diagram-routine-parallel .role-boundary{padding:14px 12px}
 .diagram-use-compartments .diagram-nodes{grid-template-columns:1fr;gap:16px}
 .diagram-use-compartments .diagram-node{display:grid;grid-template-columns:25px minmax(0,1fr);gap:0 12px;padding:17px 14px;border-top-width:1px;border-left-width:3px}
 .diagram-use-compartments .diagram-node strong{font-size:16px}
 .diagram-use-compartments .diagram-node-detail{grid-column:2;margin-top:4px}
 .diagram-use-compartments .diagram-node-mark{grid-row:1/3;margin:6px 0 0;padding:0;border:0}
 .diagram-use-compartments .role-boundary{display:block;padding:16px 0 0;border-left:0}
 .diagram-identity-composition .diagram-nodes{gap:0 17px;margin-top:22px}
 .diagram-identity-composition .role-identity{padding:17px 11px;margin-bottom:28px}
 .diagram-identity-composition .role-mixture{padding:20px 8px 17px}
 .diagram-identity-composition .role-mixture strong{font-size:14px}
 .diagram-identity-composition .role-mixture.node-2:after{right:-17px;font-size:15px}
 .diagram-identity-composition .role-study{padding:17px 12px}
 .diagram-identity-composition .role-study strong{font-size:16px}
 .visual-article[data-visual-article="stearyl-glycyrrhetinate"] .diagram-condition-gate .role-approval{outline-offset:6px;margin-block:7px;padding:8px 0}
 .diagram-product-label .diagram-stage{margin-top:21px}
 .diagram-product-label .diagram-root{padding:17px 14px}
 .diagram-product-label .diagram-root strong{font-size:15px}
 .diagram-product-label .diagram-nodes{padding:0 13px}
 .diagram-product-label .diagram-node{grid-template-columns:21px minmax(0,1fr);gap:0 10px;padding:17px 0}
 .diagram-product-label .diagram-node-mark{grid-row:1/3;margin-top:5px}
 .diagram-product-label .diagram-node strong{font-size:13px}
 .diagram-product-label .diagram-node-detail{grid-column:2;font-size:11px;margin-top:5px}
}
@media(max-width:360px){
 .diagram-spec-product .diagram-node{padding-inline:9px}
 .diagram-study-cohorts .role-cohort strong{font-size:15px}
 .diagram-product-label .diagram-root strong{font-size:14px}
}