/**
* sermorelin mastery course styles
*
* extends the base learn page styles with course-specific theming,
* paywall ui, loading states, and interactive visualization containers.
* aligned to the shared mountain-meadow interactive palette.
*/
/* ============================================================
course header badge
============================================================ */
.sml-course-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: lowercase;
background: linear-gradient(
135deg,
rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18),
rgba(var(--meadow-400-rgb, 52, 211, 158), 0.1)
);
color: var(--meadow-300, #6ee7bf);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.24);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 2px 8px rgba(var(--meadow-500-rgb, 16, 185, 129), 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.sml-course-badge i {
width: 14px;
height: 14px;
}
/* ============================================================
loading skeleton for paid content
============================================================ */
.sml-loading {
position: relative;
min-height: 120px;
}
.sml-loading::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(90deg,
var(--color-bg-card, rgba(255, 255, 255, 0.03)) 25%,
rgba(255, 255, 255, 0.06) 50%,
var(--color-bg-card, rgba(255, 255, 255, 0.03)) 75%);
background-size: 200% 100%;
animation: sml-shimmer 1.5s ease-in-out infinite;
}
@keyframes sml-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* light mode loading skeleton */
[data-theme="light"] .sml-loading::after {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.04) 25%,
rgba(0, 0, 0, 0.08) 50%,
rgba(0, 0, 0, 0.04) 75%);
background-size: 200% 100%;
}
/* ============================================================
paywall cta
============================================================ */
.sml-paywall {
text-align: center;
padding: 48px 24px;
border-radius: 16px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
margin: 32px 0;
}
.sml-paywall-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
margin-bottom: 16px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.12);
color: var(--meadow-400, #34d39e);
}
.sml-paywall-title {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 8px;
}
.sml-paywall-title--success {
color: var(--meadow-400, #34d39e);
}
.sml-paywall-desc {
font-size: 0.9rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.6;
margin: 0 0 20px;
max-width: 520px;
margin-inline: auto;
}
.sml-paywall--cert {
border-color: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.2);
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.04);
}
/* ============================================================
stat grid
============================================================ */
.sml-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px;
margin: 24px 0;
}
.sml-stat-card {
text-align: center;
padding: 16px 12px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-stat-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--meadow-400, #34d39e);
margin-bottom: 4px;
}
.sml-stat-label {
font-size: 0.72rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.3;
}
/* ============================================================
interactive area styling
============================================================ */
.sml-interactive-header {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: lowercase;
color: var(--meadow-400, #34d39e);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.2);
}
.sml-interactive-body {
min-height: 200px;
position: relative;
}
.sml-interactive-hint {
font-size: 0.8rem;
color: var(--text-secondary, #a3a3a3);
text-align: center;
margin-top: 12px;
font-style: italic;
}
/* neurotransmitter detail panel */
.sml-neuro-detail {
margin-top: 16px;
padding: 16px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
animation: sml-fade-in 0.3s ease;
}
.sml-neuro-detail-header {
font-size: 0.9rem;
padding-left: 12px;
margin-bottom: 8px;
}
.sml-neuro-detail-text {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-secondary, #a3a3a3);
margin: 0;
}
@keyframes sml-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
cert input
============================================================ */
.sml-cert-form {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: 12px;
}
.sml-cert-input {
padding: 8px 16px;
border-radius: 8px;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary, #fafafa);
font-size: 0.9rem;
min-width: 200px;
}
[data-theme="light"] .sml-cert-input {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.15);
color: #1a1a1a;
}
/* ============================================================
key terms grid
============================================================ */
.sml-terms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
gap: 12px;
margin: 18px 0;
}
.sml-term-card {
position: relative;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.sml-term-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, rgba(52,211,158,0.9), rgba(16,185,129,0.5));
opacity: 0;
transition: opacity 0.25s ease;
}
.sml-term-card:hover {
border-color: rgba(52,211,158,0.22);
background: linear-gradient(135deg, rgba(52,211,158,0.06), rgba(255,255,255,0.02));
transform: translateY(-1px);
}
.sml-term-card[open] {
border-color: rgba(52,211,158,0.35);
background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(255,255,255,0.02));
}
.sml-term-card[open]::before {
opacity: 1;
}.sml-term-card[open] .sml-term-chev,
.sml-term-card[open] .sml-term-chevron {
transform: rotate(90deg);
}
.sml-term-summary {
padding: 14px 16px;
cursor: pointer;
list-style: none;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
}
.sml-term-summary::-webkit-details-marker { display: none; }
.sml-term-summary::marker { display: none; content: ''; }
.sml-term-monogram {
display: none;
width: 36px;
height: 36px;
border-radius: 9px;
display: none;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(52,211,158,0.15), rgba(16,185,129,0.06));
border: 1px solid rgba(52,211,158,0.22);
color: var(--meadow-400, #34d39e);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: -0.02em;
flex-shrink: 0;
text-transform: uppercase;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.sml-term-meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.sml-term-name {
font-size: 1rem;
font-weight: 600;
color: var(--color-text, #fff);
letter-spacing: -0.01em;
line-height: 1.2;
}
.sml-term-cat {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.62);
font-weight: 500;
}.sml-term-chev,
.sml-term-chevron {
width: 16px;
height: 16px;
color: rgba(255,255,255,0.4);
transition: transform 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}.sml-term-card:hover .sml-term-chev,
.sml-term-card:hover .sml-term-chevron,
.sml-term-card[open] .sml-term-chev,
.sml-term-card[open] .sml-term-chevron {
color: var(--meadow-400, #34d39e);
}
.sml-term-body {
padding: 4px 16px 16px 16px;
font-size: 0.84rem;
line-height: 1.65;
color: var(--color-muted, rgba(255,255,255,0.7));
}
[data-theme="light"] .sml-term-card {
background: linear-gradient(135deg, rgba(15,23,42,0.02), rgba(15,23,42,0.005));
border-color: rgba(15,23,42,0.08);
}
[data-theme="light"] .sml-term-card:hover {
border-color: rgba(16,185,129,0.3);
background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(15,23,42,0.005));
}
[data-theme="light"] .sml-term-card[open] {
border-color: rgba(16,185,129,0.4);
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(15,23,42,0.005));
}
[data-theme="light"] .sml-term-monogram {
display: none;
background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
border-color: rgba(16,185,129,0.25);
color: #047852;
}
[data-theme="light"] .sml-term-name { color: #1a1a1a; }
[data-theme="light"] .sml-term-cat { color: rgba(15,23,42,0.5); }[data-theme="light"] .sml-term-chev,
[data-theme="light"] .sml-term-chevron { color: rgba(15,23,42,0.4); }
[data-theme="light"] .sml-term-body { color: rgba(15,23,42,0.7); }
/* ============================================================
comparison layout
============================================================ */
.sml-comparison-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin: 16px 0;
}
.sml-comparison-card {
padding: 20px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.1);
}
.sml-comparison-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sml-comparison-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--color-text, #fff);
margin: 0;
}
.sml-comparison-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sml-comparison-list li {
font-size: 0.8rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.6));
padding-left: 12px;
position: relative;
}
.sml-comparison-list li::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--meadow-400, #34d39e);
}
/* ============================================================
light theme overrides
============================================================ */
[data-theme="light"] .sml-term-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .sml-term-card[open] { border-color: rgba(16,185,129,0.3); }
[data-theme="light"] .sml-comparison-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .sml-stat-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.1);
}
/* ============================================================
responsive
============================================================ */
@media (max-width: 600px) {
.sml-stat-grid {
grid-template-columns: repeat(2, 1fr);
}
.sml-terms-grid { grid-template-columns: 1fr; }
.sml-comparison-layout { grid-template-columns: 1fr; }
}
/* ============================================================
dosing snapshot -- free preview block above paywall
============================================================ */
.sml-dosing-snapshot .sml-comparison-card {
background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(52,211,158,0.02));
border-color: rgba(52,211,158,0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .sml-dosing-snapshot .sml-comparison-card {
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
border-color: rgba(16,185,129,0.2);
}
/* ============================================================
unit 2 -- tuftsin to sermorelin derivation chain
============================================================ */
.sml-derivation-body {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
padding: 8px 4px;
}
.sml-derivation-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.sml-derivation-tag {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: lowercase;
color: var(--meadow-300, #6ee7bf);
padding: 4px 10px;
border-radius: 100px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.12);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.22);
white-space: nowrap;
}
.sml-derivation-tag--child {
color: #fff;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.55), rgba(52, 211, 158, 0.4));
border-color: rgba(52, 211, 158, 0.5);
}
[data-theme="light"] .sml-derivation-tag {
color: #047852;
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.25);
}
[data-theme="light"] .sml-derivation-tag--child {
color: #fff;
background: linear-gradient(135deg, #10b981, #059669);
border-color: #10b981;
}
.sml-residue-chain {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
justify-content: center;
}
.sml-residue {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 56px;
padding: 8px 10px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(52, 211, 158, 0.18), rgba(16, 185, 129, 0.06));
border: 1px solid rgba(52, 211, 158, 0.3);
cursor: default;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sml-residue::after {
content: '';
position: absolute;
right: -8px;
top: 50%;
width: 8px;
height: 1px;
background: rgba(52, 211, 158, 0.5);
transform: translateY(-50%);
}
.sml-residue:last-child::after { display: none; }
.sml-residue-pos {
font-size: 0.6rem;
color: rgba(255, 255, 255, 0.4);
font-family: 'JetBrains Mono', ui-monospace, monospace;
line-height: 1;
}
.sml-residue-aa {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--meadow-300, #6ee7bf);
line-height: 1.2;
margin-top: 2px;
}
.sml-residue--added {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0.06));
border-color: rgba(167, 139, 250, 0.5);
animation: sml-residue-grow 0.45s ease-out backwards;
}
.sml-residue--added .sml-residue-aa { color: #c4b5fd; }
.sml-residue--added::after { background: rgba(167, 139, 250, 0.55); }
.sml-residue-chain--child .sml-residue--added:nth-child(5) { animation-delay: 0.05s; }
.sml-residue-chain--child .sml-residue--added:nth-child(6) { animation-delay: 0.2s; }
.sml-residue-chain--child .sml-residue--added:nth-child(7) { animation-delay: 0.35s; }
@keyframes sml-residue-grow {
from { opacity: 0; transform: translateX(-12px) scale(0.85); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
.sml-residue:hover {
transform: translateY(-2px);
border-color: rgba(52, 211, 158, 0.7);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
}
.sml-residue--added:hover {
border-color: rgba(167, 139, 250, 0.85);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.2);
}
.sml-residue[data-tip]:hover::before {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 200px;
padding: 6px 10px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.95);
color: #fff;
font-size: 0.72rem;
line-height: 1.4;
text-align: center;
pointer-events: none;
z-index: 10;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .sml-residue {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.03));
border-color: rgba(16, 185, 129, 0.3);
}
[data-theme="light"] .sml-residue-pos { color: rgba(15, 23, 42, 0.45); }
[data-theme="light"] .sml-residue-aa { color: #047852; }
[data-theme="light"] .sml-residue--added {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.03));
border-color: rgba(139, 92, 246, 0.35);
}
[data-theme="light"] .sml-residue--added .sml-residue-aa { color: #6d28d9; }
.sml-derivation-bridge {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: rgba(167, 139, 250, 0.85);
}
.sml-derivation-bridge-line {
width: 1px;
height: 18px;
background: linear-gradient(180deg, rgba(52, 211, 158, 0.6), rgba(167, 139, 250, 0.7));
}
.sml-derivation-bridge-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #c4b5fd;
}
[data-theme="light"] .sml-derivation-bridge-label { color: #6d28d9; }
.sml-derivation-legend {
display: flex;
gap: 18px;
flex-wrap: wrap;
justify-content: center;
margin-top: 6px;
font-size: 0.72rem;
color: var(--text-secondary, #a3a3a3);
}
.sml-derivation-key {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sml-derivation-swatch {
width: 12px;
height: 12px;
border-radius: 3px;
border: 1px solid;
}
.sml-derivation-swatch--parent {
background: rgba(52, 211, 158, 0.25);
border-color: rgba(52, 211, 158, 0.5);
}
.sml-derivation-swatch--added {
background: rgba(167, 139, 250, 0.28);
border-color: rgba(167, 139, 250, 0.55);
}
/* ============================================================
unit 3 -- GABA-A pentamer with binding sites
============================================================ */
.sml-gaba-body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px 4px;
}
.sml-gaba-svg-wrap {
width: 100%;
max-width: 520px;
margin: 0 auto;
}
.sml-gaba-svg { width: 100%; height: auto; display: block; }
.sml-gaba-subunit {
fill: rgba(52, 211, 158, 0.18);
stroke: rgba(52, 211, 158, 0.55);
stroke-width: 1.5;
transition: fill 0.2s ease, stroke 0.2s ease;
}
[data-theme="light"] .sml-gaba-subunit {
fill: rgba(16, 185, 129, 0.1);
stroke: rgba(16, 185, 129, 0.5);
}
.sml-gaba-label {
fill: var(--meadow-300, #6ee7bf);
font-size: 12px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
[data-theme="light"] .sml-gaba-label { fill: #047852; }
.sml-gaba-pore {
fill: rgba(15, 23, 42, 0.6);
stroke: rgba(255, 255, 255, 0.15);
stroke-width: 1;
}
[data-theme="light"] .sml-gaba-pore {
fill: rgba(15, 23, 42, 0.05);
stroke: rgba(15, 23, 42, 0.15);
}
.sml-gaba-pore-label {
fill: rgba(255, 255, 255, 0.55);
font-size: 10px;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
[data-theme="light"] .sml-gaba-pore-label { fill: rgba(15, 23, 42, 0.55); }
.sml-gaba-site {
cursor: pointer;
transition: filter 0.2s ease;
}
.sml-gaba-site circle {
transition: stroke-width 0.2s ease;
}
.sml-gaba-site:hover { filter: brightness(1.18); }
.sml-gaba-site:hover circle { stroke-width: 2.5; }
.sml-gaba-site-bzd circle {
fill: rgba(251, 191, 36, 0.85);
stroke: #fbbf24;
}
.sml-gaba-site-sermorelin circle {
fill: rgba(167, 139, 250, 0.85);
stroke: #a78bfa;
}
.sml-gaba-site-gaba circle {
fill: rgba(52, 211, 158, 0.95);
stroke: var(--meadow-400, #34d39e);
}
.sml-gaba-site-label {
font-size: 9px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
fill: #0f172a;
}
.sml-gaba-legend {
display: grid;
grid-template-columns: repeat(3, minmax(140px, 1fr));
gap: 10px;
font-size: 0.74rem;
}
.sml-gaba-legend-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
border-radius: 10px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-gaba-legend-head {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--color-text, #fff);
}
.sml-gaba-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.sml-gaba-legend-dot--bzd { background: #fbbf24; }
.sml-gaba-legend-dot--sermorelin { background: #a78bfa; }
.sml-gaba-legend-dot--gaba { background: var(--meadow-400, #34d39e); }
.sml-gaba-legend-text {
font-size: 0.72rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.45;
}
[data-theme="light"] .sml-gaba-legend-item {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sml-gaba-legend-head { color: #1a1a1a; }
[data-theme="light"] .sml-gaba-legend-text { color: rgba(15, 23, 42, 0.7); }
@media (max-width: 600px) {
.sml-gaba-legend { grid-template-columns: 1fr; }
}
/* ============================================================
unit 4 -- BDNF cascade chart
============================================================ */
.sml-bdnf-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 4px;
}
.sml-bdnf-svg-wrap { width: 100%; }
.sml-bdnf-svg { width: 100%; height: auto; display: block; }
.sml-bdnf-axis {
stroke: rgba(255, 255, 255, 0.15);
stroke-width: 1;
}
[data-theme="light"] .sml-bdnf-axis { stroke: rgba(15, 23, 42, 0.18); }
.sml-bdnf-grid {
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 1;
stroke-dasharray: 3 3;
}
[data-theme="light"] .sml-bdnf-grid { stroke: rgba(15, 23, 42, 0.06); }
.sml-bdnf-tick {
fill: rgba(255, 255, 255, 0.5);
font-size: 10px;
}
[data-theme="light"] .sml-bdnf-tick { fill: rgba(15, 23, 42, 0.55); }
.sml-bdnf-axis-label {
fill: var(--text-secondary, #a3a3a3);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: lowercase;
}
[data-theme="light"] .sml-bdnf-axis-label { fill: rgba(15, 23, 42, 0.65); }
.sml-bdnf-baseline {
stroke: rgba(255, 255, 255, 0.35);
stroke-width: 1;
stroke-dasharray: 4 3;
}
[data-theme="light"] .sml-bdnf-baseline { stroke: rgba(15, 23, 42, 0.3); }
.sml-bdnf-baseline-label {
fill: rgba(255, 255, 255, 0.5);
font-size: 9px;
font-style: italic;
}
[data-theme="light"] .sml-bdnf-baseline-label { fill: rgba(15, 23, 42, 0.55); }
.sml-bdnf-area {
fill: url(#slkBdnfGrad);
opacity: 0.85;
}
.sml-bdnf-line {
fill: none;
stroke: var(--meadow-400, #34d39e);
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.sml-bdnf-point {
fill: var(--meadow-400, #34d39e);
stroke: #fff;
stroke-width: 2;
cursor: pointer;
}
[data-theme="light"] .sml-bdnf-point { stroke: #fff; }
.sml-bdnf-value {
fill: var(--meadow-300, #6ee7bf);
font-size: 10px;
font-weight: 700;
text-anchor: middle;
pointer-events: none;
}
[data-theme="light"] .sml-bdnf-value { fill: #047852; }
.sml-bdnf-caption {
font-size: 0.74rem;
color: var(--text-secondary, #a3a3a3);
text-align: center;
line-height: 1.5;
margin: 0;
}
[data-theme="light"] .sml-bdnf-caption { color: rgba(15, 23, 42, 0.7); }
.sml-bdnf-region-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 100px;
font-weight: 600;
font-size: 0.7rem;
color: var(--meadow-300, #6ee7bf);
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.14);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.25);
margin: 0 4px;
}
[data-theme="light"] .sml-bdnf-region-pill {
color: #047852;
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.22);
}
/* ============================================================
unit 5 -- cytokine dose slider
============================================================ */
.sml-cyto-body {
display: flex;
flex-direction: column;
gap: 18px;
padding: 8px 4px;
}
.sml-cyto-slider-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.sml-cyto-slider-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-size: 0.78rem;
color: var(--text-secondary, #a3a3a3);
}
.sml-cyto-slider-readout {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.85rem;
font-weight: 700;
color: var(--meadow-300, #6ee7bf);
}
[data-theme="light"] .sml-cyto-slider-readout { color: #047852; }
.sml-cyto-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.08);
outline: none;
cursor: pointer;
}
[data-theme="light"] .sml-cyto-slider { background: rgba(15, 23, 42, 0.08); }
.sml-cyto-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--meadow-400, #34d39e);
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
cursor: grab;
}
.sml-cyto-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--meadow-400, #34d39e);
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
cursor: grab;
}
.sml-cyto-slider-ticks {
display: flex;
justify-content: space-between;
font-size: 0.68rem;
color: var(--text-secondary, #a3a3a3);
}
.sml-cyto-bars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.sml-cyto-bar {
padding: 12px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
display: flex;
flex-direction: column;
gap: 8px;
}
[data-theme="light"] .sml-cyto-bar {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
.sml-cyto-bar-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
.sml-cyto-bar-name {
font-size: 0.78rem;
font-weight: 700;
color: var(--color-text, #fff);
letter-spacing: -0.01em;
}
[data-theme="light"] .sml-cyto-bar-name { color: #1a1a1a; }
.sml-cyto-bar-tag {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary, #a3a3a3);
}
.sml-cyto-bar-track {
position: relative;
height: 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
overflow: hidden;
}
[data-theme="light"] .sml-cyto-bar-track { background: rgba(15, 23, 42, 0.06); }
.sml-cyto-bar-fill {
position: absolute;
inset: 0;
transform-origin: left center;
transform: scaleX(var(--sml-cyto-fill, 0.5));
border-radius: 6px;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}
.sml-cyto-bar-baseline {
position: absolute;
top: -4px;
bottom: -4px;
width: 1px;
left: 50%;
background: rgba(255, 255, 255, 0.45);
transform: translateX(-0.5px);
}
[data-theme="light"] .sml-cyto-bar-baseline { background: rgba(15, 23, 42, 0.4); }
.sml-cyto-bar--pro .sml-cyto-bar-fill {
background: linear-gradient(90deg, #f59e0b, #ef4444);
}
.sml-cyto-bar--anti .sml-cyto-bar-fill {
background: linear-gradient(90deg, var(--meadow-400, #34d39e), #6ee7bf);
}
.sml-cyto-bar-value {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.74rem;
color: var(--text-secondary, #a3a3a3);
}
.sml-cyto-bar-arrow {
font-size: 0.78rem;
font-weight: 700;
}
.sml-cyto-bar-arrow--down { color: #34d39e; }
.sml-cyto-bar-arrow--up { color: #34d39e; }
.sml-cyto-bar-arrow--neutral { color: var(--text-secondary, #a3a3a3); }
.sml-cyto-note {
font-size: 0.74rem;
color: var(--text-secondary, #a3a3a3);
text-align: center;
line-height: 1.5;
padding: 8px 10px;
border-radius: 8px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.06);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
}
[data-theme="light"] .sml-cyto-note {
color: rgba(15, 23, 42, 0.7);
background: rgba(16, 185, 129, 0.04);
border-color: rgba(16, 185, 129, 0.18);
}
@media (max-width: 600px) {
.sml-cyto-bars { grid-template-columns: 1fr; }
}
/* ============================================================
unit 1 free-page bespoke widgets
------------------------------------------------------------
.sml-subhead -- light eyebrow above prose blocks
.sml-grf-trim -- GHRH(1-44) -> sermorelin(1-29) residue
strip, highlighting the C-terminal
15-residue trim. shape:
.sml-evidence-grid + tiers (solid/moderate/weak/missing) +
.sml-evidence-pill -- mirror motsc-evidence-* shape
.sml-quote-callout/-source/-body/-attrib -- regulatory pull-quote
.sml-popularity-grid -- 3-up "why this regulatory hook matters"
cards. shape:
.sml-axis-flow -- horizontal GHRH -> GH -> IGF-1 chain
with arrows. shape:
.sml-pulse-rail -- pulsatile-vs-continuous side-by-side
comparison. shape:
.sml-roadmap-list -- unit 2-9 preview list, mirror
kpv-roadmap-* shape. ol with
.sml-roadmap-item children carrying
.sml-roadmap-num + .sml-roadmap-body
(h3.sml-roadmap-title + p.sml-roadmap-desc).
the css here is intentionally minimal -- agent for unit 5 can
refine padding/animation once the unit interactive lands.
============================================================ */
.sml-subhead {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--meadow-400, #34d39e);
margin: 22px 0 10px;
}
[data-theme="light"] .sml-subhead { color: #047852; }
/* GHRH(1-44) -> sermorelin(1-29) trim residue strip */
.sml-grf-trim {
margin: 18px 0 6px;
padding: 14px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
[data-theme="light"] .sml-grf-trim {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.sml-grf-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.sml-grf-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
padding: 4px 6px;
border-radius: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.72rem;
font-weight: 700;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
}
[data-theme="light"] .sml-grf-pill {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.1);
color: rgba(15,23,42,0.55);
}
.sml-grf-pill--kept {
background: linear-gradient(135deg, rgba(52,211,158,0.22), rgba(16,185,129,0.08));
border-color: rgba(52,211,158,0.45);
color: var(--meadow-300, #6ee7bf);
}
[data-theme="light"] .sml-grf-pill--kept {
background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
border-color: rgba(16,185,129,0.3);
color: #047852;
}
.sml-grf-pill--trimmed {
opacity: 0.45;
text-decoration: line-through;
}
.sml-grf-trim-caption {
margin-top: 12px;
font-size: 0.78rem;
line-height: 1.55;
text-align: center;
color: var(--text-secondary, #a3a3a3);
}
[data-theme="light"] .sml-grf-trim-caption { color: rgba(15,23,42,0.65); }
/* evidence ceiling grid (mirrors motsc evidence pattern) */
.sml-evidence-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin: 18px 0;
}
.sml-evidence-tier {
padding: 18px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
border-top-width: 3px;
}
[data-theme="light"] .sml-evidence-tier {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.sml-evidence-tier--solid { border-top-color: #10b981; }
.sml-evidence-tier--moderate { border-top-color: #34d39e; }
.sml-evidence-tier--weak { border-top-color: #f59e0b; }
.sml-evidence-tier--missing { border-top-color: #ef4444; }
.sml-evidence-header {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.sml-evidence-pill {
align-self: flex-start;
display: inline-flex;
padding: 2px 10px;
border-radius: 100px;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sml-evidence-pill--solid { background: rgba(16,185,129,0.18); color: var(--meadow-300, #6ee7bf); }
.sml-evidence-pill--moderate { background: rgba(52,211,158,0.18); color: var(--meadow-300, #6ee7bf); }
.sml-evidence-pill--weak { background: rgba(245,158,11,0.18); color: #fbbf24; }
.sml-evidence-pill--missing { background: rgba(239,68,68,0.18); color: #fca5a5; }
[data-theme="light"] .sml-evidence-pill--solid { color: #047852; }
[data-theme="light"] .sml-evidence-pill--moderate { color: #047852; }
[data-theme="light"] .sml-evidence-pill--weak { color: #b45309; }
[data-theme="light"] .sml-evidence-pill--missing { color: #b91c1c; }
.sml-evidence-headline {
font-size: 0.95rem;
font-weight: 700;
margin: 0;
color: var(--color-text, #fff);
}
[data-theme="light"] .sml-evidence-headline { color: #1a1a1a; }
.sml-evidence-claims {
margin: 8px 0 0;
padding-left: 18px;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.7));
}
[data-theme="light"] .sml-evidence-claims { color: rgba(15,23,42,0.72); }
.sml-evidence-claims li { margin-bottom: 6px; }
/* regulatory pull-quote */
.sml-quote-callout {
margin: 20px 0;
padding: 18px 20px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(52,211,158,0.02));
border: 1px solid rgba(52,211,158,0.22);
border-left-width: 3px;
}
[data-theme="light"] .sml-quote-callout {
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
border-color: rgba(16,185,129,0.22);
}
.sml-quote-source {
margin: 0 0 8px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--meadow-300, #6ee7bf);
}
[data-theme="light"] .sml-quote-source { color: #047852; }
.sml-quote-body {
margin: 0 0 10px;
font-size: 0.92rem;
line-height: 1.65;
color: var(--color-text, #fff);
font-style: italic;
}
[data-theme="light"] .sml-quote-body { color: #1a1a1a; }
.sml-quote-attrib {
display: block;
font-size: 0.75rem;
font-style: normal;
color: var(--text-secondary, #a3a3a3);
}
[data-theme="light"] .sml-quote-attrib { color: rgba(15,23,42,0.65); }
/* "why this matters now" 3-card grid */
.sml-popularity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 18px 0;
}
.sml-popularity-card {
padding: 16px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
}
[data-theme="light"] .sml-popularity-card {
background: linear-gradient(135deg, rgba(0,0,0,0.025), rgba(0,0,0,0.005));
border-color: rgba(0,0,0,0.08);
}
.sml-popularity-card h4 {
margin: 0 0 8px;
font-size: 0.9rem;
color: var(--color-text, #fff);
}
[data-theme="light"] .sml-popularity-card h4 { color: #1a1a1a; }
.sml-popularity-card p {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.65));
}
[data-theme="light"] .sml-popularity-card p { color: rgba(15,23,42,0.72); }
/* GH/IGF-1 axis horizontal flow */
.sml-axis-flow {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
margin: 18px 0 6px;
padding: 16px 12px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
[data-theme="light"] .sml-axis-flow {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.sml-axis-node {
flex: 1 1 130px;
min-width: 130px;
padding: 12px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(52,211,158,0.14), rgba(16,185,129,0.04));
border: 1px solid rgba(52,211,158,0.3);
}
[data-theme="light"] .sml-axis-node {
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
border-color: rgba(16,185,129,0.28);
}
.sml-axis-node-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--meadow-300, #6ee7bf);
margin: 0 0 4px;
}
[data-theme="light"] .sml-axis-node-name { color: #047852; }
.sml-axis-node-note {
margin: 0;
font-size: 0.74rem;
line-height: 1.45;
color: var(--text-secondary, #a3a3a3);
}
[data-theme="light"] .sml-axis-node-note { color: rgba(15,23,42,0.65); }
.sml-axis-arrow {
display: flex;
align-items: center;
color: rgba(52,211,158,0.7);
font-weight: 700;
font-size: 1.1rem;
}
[data-theme="light"] .sml-axis-arrow { color: rgba(16,185,129,0.7); }
/* pulsatile vs continuous comparison rail */
.sml-pulse-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin: 18px 0;
}
.sml-pulse-card {
padding: 16px;
border-radius: 12px;
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
background: var(--color-bg-card, rgba(255,255,255,0.03));
}
[data-theme="light"] .sml-pulse-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.sml-pulse-card--pulsatile {
border-color: rgba(52,211,158,0.4);
background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(16,185,129,0.02));
}
[data-theme="light"] .sml-pulse-card--pulsatile {
border-color: rgba(16,185,129,0.28);
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
}
.sml-pulse-card--continuous {
border-color: rgba(245,158,11,0.4);
background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02));
}
[data-theme="light"] .sml-pulse-card--continuous {
border-color: rgba(245,158,11,0.3);
background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(245,158,11,0.015));
}
.sml-pulse-card h4 {
margin: 0 0 8px;
font-size: 0.95rem;
color: var(--color-text, #fff);
}
[data-theme="light"] .sml-pulse-card h4 { color: #1a1a1a; }
.sml-pulse-card p {
margin: 0 0 6px;
font-size: 0.84rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.7));
}
[data-theme="light"] .sml-pulse-card p { color: rgba(15,23,42,0.72); }
/* roadmap list (mirrors kpv-roadmap shape) */
.sml-roadmap-list {
list-style: none;
margin: 18px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.sml-roadmap-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
[data-theme="light"] .sml-roadmap-item {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.sml-roadmap-num {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(52,211,158,0.18), rgba(16,185,129,0.06));
border: 1px solid rgba(52,211,158,0.3);
color: var(--meadow-300, #6ee7bf);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.85rem;
font-weight: 700;
}
[data-theme="light"] .sml-roadmap-num {
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
border-color: rgba(16,185,129,0.28);
color: #047852;
}
.sml-roadmap-body { min-width: 0; }
.sml-roadmap-title {
margin: 0 0 4px;
font-size: 0.95rem;
color: var(--color-text, #fff);
}
[data-theme="light"] .sml-roadmap-title { color: #1a1a1a; }
.sml-roadmap-desc {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.65));
}
[data-theme="light"] .sml-roadmap-desc { color: rgba(15,23,42,0.7); }
@media (max-width: 600px) {
.sml-evidence-grid,
.sml-popularity-grid,
.sml-pulse-rail { grid-template-columns: 1fr; }
.sml-axis-flow { flex-direction: column; }
.sml-axis-arrow { transform: rotate(90deg); align-self: center; }
}
/* ============================================================
reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
.sml-loading::after {
animation: none;
}
.sml-neuro-detail {
animation: none;
}
.sml-residue--added {
animation: none;
}
.sml-cyto-bar-fill {
transition: none;
}
}
/* ============================================================
bespoke widgets per unit -- assembled from css/_sermorelin-fragments/
============================================================ */
/* --- 02-chemistry --- */
/* ============================================================
sermorelin unit 2 -- chemistry and structure
bespoke widgets used by the chemistry migration body_html
============================================================
vocabulary introduced in this fragment:
- .sml-sequence-strip horizontal residue strip (1..29) with N/C-term cap markers
- .sml-residue-table three-row table mapping key residues to their side-chain jobs
- .sml-modification-bars stability/half-life bars across plain sermorelin vs DPP-IV-resistant analogs
- .sml-cleavage-diagram compact diagram showing DPP-IV cleavage at Ala2-Asp3
- .sml-analog-family-grid sermorelin/tesamorelin/CJC-1295/modified-GRF chemistry comparison cards
============================================================ */
/* ---------- .sml-sequence-strip ---------- */
.sml-sequence-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 16px;
margin: 18px 0;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-sequence-strip-cap {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.32);
}
.sml-sequence-strip-pos {
display: inline-flex;
flex-direction: column;
align-items: center;
min-width: 28px;
padding: 6px 4px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
line-height: 1.1;
}
.sml-sequence-strip-pos--active {
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
border-color: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.4);
}
.sml-sequence-strip-pos--cleavage {
background: rgba(239, 68, 68, 0.16);
border-color: rgba(239, 68, 68, 0.4);
}
.sml-sequence-strip-letter {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.sml-sequence-strip-num {
font-size: 0.62rem;
color: var(--text-secondary, #a3a3a3);
margin-top: 2px;
}
.sml-sequence-strip-caption {
flex-basis: 100%;
margin-top: 10px;
font-size: 0.82rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.5;
}
[data-theme='light'] .sml-sequence-strip-pos {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme='light'] .sml-sequence-strip-letter {
color: var(--text-primary, #0f172a);
}
/* ---------- .sml-residue-table ---------- */
.sml-residue-table {
display: flex;
flex-direction: column;
gap: 10px;
margin: 18px 0;
}
.sml-residue-table-row {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
padding: 12px 14px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-residue-table-letter {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 1.15rem;
font-weight: 700;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
}
.sml-residue-table-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.sml-residue-table-name {
font-size: 0.92rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.sml-residue-table-role {
font-size: 0.83rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
}
[data-theme='light'] .sml-residue-table-name {
color: var(--text-primary, #0f172a);
}
/* ---------- .sml-modification-bars ---------- */
.sml-modification-bars {
display: flex;
flex-direction: column;
gap: 12px;
margin: 18px 0;
}
.sml-modification-row {
display: grid;
grid-template-columns: minmax(160px, 1fr) 2fr minmax(180px, 1fr);
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-modification-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary, #fafafa);
}
.sml-modification-track {
position: relative;
height: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.sml-modification-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(var(--meadow-500-rgb, 16, 185, 129), 0.6),
rgba(var(--meadow-400-rgb, 52, 211, 158), 0.8));
}
.sml-modification-fill--low { background: linear-gradient(90deg, #ef4444, #f59e0b); }
.sml-modification-fill--mid { background: linear-gradient(90deg, #f59e0b, #34d39e); }
.sml-modification-fill--high { background: linear-gradient(90deg, #34d39e, #10b981); }
.sml-modification-note {
font-size: 0.78rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.45;
}
[data-theme='light'] .sml-modification-track {
background: rgba(0, 0, 0, 0.08);
}
[data-theme='light'] .sml-modification-label {
color: var(--text-primary, #0f172a);
}
/* ---------- .sml-cleavage-diagram ---------- */
.sml-cleavage-diagram {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 16px;
margin: 18px 0;
border-radius: 14px;
background: rgba(239, 68, 68, 0.06);
border: 1px dashed rgba(239, 68, 68, 0.32);
}
.sml-cleavage-diagram-residue {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
padding: 6px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-mono, ui-monospace, monospace);
font-weight: 700;
}
.sml-cleavage-diagram-scissor {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
color: #ef4444;
font-size: 1.1rem;
font-weight: 900;
}
.sml-cleavage-diagram-caption {
flex-basis: 100%;
margin-top: 10px;
font-size: 0.82rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
}
[data-theme='light'] .sml-cleavage-diagram-residue {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
/* ---------- .sml-analog-family-grid ---------- */
.sml-analog-family-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin: 18px 0;
}
.sml-analog-family-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-analog-family-name {
font-size: 0.98rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.sml-analog-family-mod {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.78rem;
color: var(--meadow-300, #6ee7bf);
word-break: break-word;
}
.sml-analog-family-list {
margin: 6px 0 0;
padding-left: 18px;
}
.sml-analog-family-list li {
font-size: 0.83rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
margin-bottom: 4px;
}
[data-theme='light'] .sml-analog-family-name {
color: var(--text-primary, #0f172a);
}
/* --- 03-ghrh-receptor --- */
/* ============================================================
sermorelin unit 3 -- GHRH receptor signaling
bespoke widgets used by the ghrh-receptor migration body_html
============================================================
vocabulary introduced in this fragment:
- .sml-cascade-rail vertical cAMP/PKA/CREB cascade with brake annotations
- .sml-signaling-flow horizontal node->node flow of receptor->messenger->effector
- .sml-pulse-comparison pulsatile-vs-continuous comparison cards (different from free-unit sml-pulse-rail)
- .sml-receptor-anatomy diagram-style card for class B GPCR two-domain handshake
- .sml-desens-loop receptor desensitization/resensitization loop visual
============================================================ */
/* ---------- .sml-cascade-rail ---------- */
.sml-cascade-rail {
list-style: none;
margin: 18px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
counter-reset: smlcascade;
}
.sml-cascade-step {
display: grid;
grid-template-columns: 38px 1fr;
gap: 14px;
padding: 14px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
position: relative;
}
.sml-cascade-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
font-weight: 700;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.32);
}
.sml-cascade-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.sml-cascade-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.sml-cascade-text {
font-size: 0.83rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
}
.sml-cascade-brake {
margin-top: 6px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.28);
font-size: 0.78rem;
color: #fbbf24;
line-height: 1.5;
}
[data-theme='light'] .sml-cascade-title {
color: var(--text-primary, #0f172a);
}
[data-theme='light'] .sml-cascade-brake {
color: #b45309;
background: rgba(245, 158, 11, 0.12);
}
/* ---------- .sml-signaling-flow ---------- */
.sml-signaling-flow {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
padding: 16px;
margin: 18px 0;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-signaling-node {
flex: 1 1 140px;
padding: 12px;
border-radius: 12px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.08);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.24);
}
.sml-signaling-node-name {
font-size: 0.88rem;
font-weight: 700;
color: var(--meadow-300, #6ee7bf);
margin-bottom: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
}
.sml-signaling-node-text {
font-size: 0.78rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.5;
}
.sml-signaling-arrow {
align-self: center;
color: var(--meadow-400, #34d39e);
font-weight: 900;
font-size: 1.1rem;
}
/* ---------- .sml-pulse-comparison ---------- */
.sml-pulse-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin: 18px 0;
}
.sml-pulse-comparison-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-pulse-comparison-card--good {
border-color: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.32);
}
.sml-pulse-comparison-card--risk {
border-color: rgba(245, 158, 11, 0.32);
}
.sml-pulse-comparison-tag {
align-self: flex-start;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sml-pulse-comparison-card--good .sml-pulse-comparison-tag {
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
}
.sml-pulse-comparison-card--risk .sml-pulse-comparison-tag {
background: rgba(245, 158, 11, 0.18);
color: #fbbf24;
}
.sml-pulse-comparison-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.sml-pulse-comparison-list {
margin: 6px 0 0;
padding-left: 18px;
}
.sml-pulse-comparison-list li {
font-size: 0.83rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
margin-bottom: 4px;
}
[data-theme='light'] .sml-pulse-comparison-title {
color: var(--text-primary, #0f172a);
}
/* ---------- .sml-receptor-anatomy ---------- */
.sml-receptor-anatomy {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 18px 0;
padding: 16px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.sml-receptor-anatomy-part {
display: flex;
flex-direction: column;
gap: 6px;
}
.sml-receptor-anatomy-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--meadow-300, #6ee7bf);
}
.sml-receptor-anatomy-text {
font-size: 0.85rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
}
/* ---------- .sml-desens-loop ---------- */
.sml-desens-loop {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin: 18px 0;
}
.sml-desens-loop-step {
padding: 12px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
position: relative;
}
.sml-desens-loop-step-num {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 8px;
}
.sml-desens-loop-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
margin-bottom: 4px;
}
.sml-desens-loop-text {
font-size: 0.78rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.5;
}
[data-theme='light'] .sml-desens-loop-title {
color: var(--text-primary, #0f172a);
}
/* --- 04-gh-axis --- */
/* ============================================================
sermorelin unit 4 -- gh-axis bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.sml-axis-cascade -- vertical hypothalamus -> pituitary
-> liver -> periphery cascade strip
with reciprocal feedback arrows
.sml-feedback-loop -- 3-up feedback-loop card grid
(long-loop / short-loop / ultrashort)
.sml-pulse-frequency-chart -- 6 to 12 daily pulses visualized as a
horizontal rail of bars with the
largest bar tagged SWS onset
.sml-somatotrope-anatomy -- 2-up cell anatomy card pair
(storage granules vs receptor surface)
.sml-sleep-pulse-card -- sleep-onset GH-pulse callout pair
============================================================ */
/* ------------------------------------------------------------
.sml-axis-cascade
vertical cascade of axis nodes with feedback arrows between
------------------------------------------------------------ */
.sml-axis-cascade {
display: grid;
gap: 0.75rem;
padding: 1.25rem;
margin: 1.5rem 0;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-axis-cascade {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.28);
}
.sml-axis-cascade-row {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 1rem;
align-items: start;
padding: 0.75rem 1rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.15);
background: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .sml-axis-cascade-row {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(148, 163, 184, 0.22);
}
.sml-axis-cascade-stage {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
}
.sml-axis-cascade-name {
font-weight: 600;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-axis-cascade-name { color: rgba(15, 23, 42, 0.92); }
.sml-axis-cascade-desc {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-axis-cascade-desc { color: rgba(30, 41, 59, 0.85); }
.sml-axis-cascade-feedback {
grid-column: 1 / -1;
margin-top: 0.4rem;
padding: 0.4rem 0.75rem;
border-radius: 8px;
background: rgba(34, 197, 94, 0.1);
font-size: 0.85rem;
color: rgba(187, 247, 208, 0.95);
}
[data-theme="light"] .sml-axis-cascade-feedback {
background: rgba(16, 185, 129, 0.12);
color: rgba(6, 95, 70, 0.95);
}
/* ------------------------------------------------------------
.sml-feedback-loop
3-up cards for long-loop, short-loop, ultrashort feedback
------------------------------------------------------------ */
.sml-feedback-loop {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-feedback-loop-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid rgba(96, 165, 250, 0.65);
}
[data-theme="light"] .sml-feedback-loop-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.28);
}
.sml-feedback-loop-card--long { border-top-color: #60a5fa; }
.sml-feedback-loop-card--short { border-top-color: #34d399; }
.sml-feedback-loop-card--ultra { border-top-color: #f59e0b; }
.sml-feedback-loop-name {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.3rem;
}
.sml-feedback-loop-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-feedback-loop-title { color: rgba(15, 23, 42, 0.92); }
.sml-feedback-loop-body {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-feedback-loop-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-pulse-frequency-chart
horizontal rail of vertical bars representing the daily GH pulses
------------------------------------------------------------ */
.sml-pulse-frequency-chart {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-pulse-frequency-chart {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.28);
}
.sml-pulse-frequency-title {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.75rem;
}
.sml-pulse-frequency-rail {
display: flex;
align-items: flex-end;
gap: 0.5rem;
height: 7rem;
border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
padding-bottom: 0.4rem;
}
.sml-pulse-frequency-bar {
flex: 1;
background: linear-gradient(180deg, rgba(96, 165, 250, 0.7), rgba(96, 165, 250, 0.25));
border-radius: 4px 4px 0 0;
position: relative;
}
.sml-pulse-frequency-bar--sws {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.85), rgba(245, 158, 11, 0.3));
}
.sml-pulse-frequency-bar-label {
position: absolute;
bottom: -1.4rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
color: rgba(148, 163, 184, 0.9);
white-space: nowrap;
}
.sml-pulse-frequency-caption {
margin-top: 1.6rem;
font-size: 0.88rem;
line-height: 1.5;
color: rgba(203, 213, 225, 0.85);
}
[data-theme="light"] .sml-pulse-frequency-caption { color: rgba(30, 41, 59, 0.82); }
/* ------------------------------------------------------------
.sml-somatotrope-anatomy
2-up anatomy card pair
------------------------------------------------------------ */
.sml-somatotrope-anatomy {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-somatotrope-anatomy-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-somatotrope-anatomy-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.28);
}
.sml-somatotrope-anatomy-tag {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.4rem;
}
.sml-somatotrope-anatomy-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-somatotrope-anatomy-title { color: rgba(15, 23, 42, 0.92); }
.sml-somatotrope-anatomy-body {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-somatotrope-anatomy-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-sleep-pulse-card
sleep-onset GH-pulse callout pair
------------------------------------------------------------ */
.sml-sleep-pulse-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.25rem 0;
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(245, 158, 11, 0.25);
background: rgba(245, 158, 11, 0.06);
}
[data-theme="light"] .sml-sleep-pulse-card {
background: rgba(254, 243, 199, 0.5);
border-color: rgba(217, 119, 6, 0.3);
}
.sml-sleep-pulse-stage {
font-size: 0.74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(252, 211, 77, 0.95);
margin-bottom: 0.35rem;
}
[data-theme="light"] .sml-sleep-pulse-stage { color: rgba(180, 83, 9, 0.95); }
.sml-sleep-pulse-body {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .sml-sleep-pulse-body { color: rgba(30, 41, 59, 0.88); }
@media (max-width: 640px) {
.sml-axis-cascade-row { grid-template-columns: 1fr; gap: 0.4rem; }
.sml-pulse-frequency-rail { height: 5.5rem; }
}
/* --- 05-pediatric-ghd --- */
/* ============================================================
sermorelin unit 5 -- pediatric-ghd bespoke widgets (MARQUEE)
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.sml-pediatric-trial-grid -- 2-up trial card pair for
Thorner 1985 + Geref ISG 1996
.sml-growth-velocity-chart -- baseline / year-1 / year-2
cm/yr bar trio for the Geref data
.sml-geref-history-rail -- vertical historical timeline
(1982 GHRH isolation -> 2013 FR)
.sml-translation-comparison -- 2-column pediatric vs adult
evidence-base comparison
.sml-case-grid (+ .sml-case-card / -pill / -title / -body /
-takeaway) -- case-based teaching widget
mirrored from kpv-case-grid
.sml-pediatric-presentation -- 3-up presentation card grid
(auxology / labs / imaging)
============================================================ */
/* ------------------------------------------------------------
.sml-pediatric-trial-grid
2-up trial card pair
------------------------------------------------------------ */
.sml-pediatric-trial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-pediatric-trial-card {
padding: 1.15rem 1.3rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #10b981;
}
[data-theme="light"] .sml-pediatric-trial-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-pediatric-trial-author {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.25rem;
}
.sml-pediatric-trial-design {
font-size: 0.85rem;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.45rem;
}
.sml-pediatric-trial-readout {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
margin-bottom: 0.5rem;
}
[data-theme="light"] .sml-pediatric-trial-readout { color: rgba(30, 41, 59, 0.88); }
.sml-pediatric-trial-effect {
font-size: 0.82rem;
font-weight: 600;
padding: 0.3rem 0.6rem;
border-radius: 8px;
background: rgba(16, 185, 129, 0.12);
color: rgba(187, 247, 208, 0.95);
display: inline-block;
}
[data-theme="light"] .sml-pediatric-trial-effect {
background: rgba(16, 185, 129, 0.15);
color: rgba(6, 95, 70, 0.95);
}
/* ------------------------------------------------------------
.sml-growth-velocity-chart
horizontal cm/yr bar trio for baseline / year-1 / year-2
------------------------------------------------------------ */
.sml-growth-velocity-chart {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-growth-velocity-chart {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-growth-velocity-title {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.85rem;
}
.sml-growth-velocity-row {
display: grid;
grid-template-columns: 7rem 1fr 4rem;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.55rem;
}
.sml-growth-velocity-label {
font-size: 0.88rem;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .sml-growth-velocity-label { color: rgba(30, 41, 59, 0.88); }
.sml-growth-velocity-track {
height: 0.9rem;
border-radius: 6px;
background: rgba(148, 163, 184, 0.15);
overflow: hidden;
}
.sml-growth-velocity-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #34d399);
border-radius: 6px;
}
.sml-growth-velocity-fill--baseline { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.sml-growth-velocity-fill--year1 { background: linear-gradient(90deg, #10b981, #34d399); }
.sml-growth-velocity-fill--year2 { background: linear-gradient(90deg, #059669, #10b981); }
.sml-growth-velocity-value {
font-size: 0.88rem;
font-weight: 600;
text-align: right;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-growth-velocity-value { color: rgba(15, 23, 42, 0.92); }
.sml-growth-velocity-caption {
margin-top: 0.6rem;
font-size: 0.85rem;
line-height: 1.45;
color: rgba(203, 213, 225, 0.82);
}
[data-theme="light"] .sml-growth-velocity-caption { color: rgba(30, 41, 59, 0.78); }
/* ------------------------------------------------------------
.sml-geref-history-rail
vertical historical timeline (1982 -> 2013)
------------------------------------------------------------ */
.sml-geref-history-rail {
margin: 1.5rem 0;
padding: 1.25rem 1.25rem 1.25rem 2rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
position: relative;
}
[data-theme="light"] .sml-geref-history-rail {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-geref-history-item {
position: relative;
padding: 0.65rem 0 0.65rem 1.5rem;
border-left: 2px solid rgba(96, 165, 250, 0.35);
}
.sml-geref-history-item::before {
content: '';
position: absolute;
left: -7px;
top: 1rem;
width: 12px;
height: 12px;
border-radius: 50%;
background: #60a5fa;
border: 2px solid rgba(15, 23, 42, 0.95);
}
[data-theme="light"] .sml-geref-history-item::before {
border-color: rgba(248, 250, 252, 0.95);
}
.sml-geref-history-year {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(96, 165, 250, 0.95);
margin-bottom: 0.2rem;
}
.sml-geref-history-title {
font-weight: 600;
margin-bottom: 0.3rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-geref-history-title { color: rgba(15, 23, 42, 0.92); }
.sml-geref-history-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-geref-history-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-translation-comparison
2-column pediatric-vs-adult evidence-base contrast
------------------------------------------------------------ */
.sml-translation-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-translation-comparison-card {
padding: 1.15rem 1.3rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-translation-comparison-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-translation-comparison-card--pediatric { border-top: 3px solid #10b981; }
.sml-translation-comparison-card--adult { border-top: 3px solid #f59e0b; }
.sml-translation-comparison-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.35rem;
}
.sml-translation-comparison-card--pediatric .sml-translation-comparison-tag { color: rgba(94, 234, 212, 0.95); }
.sml-translation-comparison-card--adult .sml-translation-comparison-tag { color: rgba(252, 211, 77, 0.95); }
.sml-translation-comparison-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-translation-comparison-title { color: rgba(15, 23, 42, 0.92); }
.sml-translation-comparison-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .sml-translation-comparison-body { color: rgba(30, 41, 59, 0.85); }
.sml-translation-comparison-list {
font-size: 0.88rem;
line-height: 1.5;
padding-left: 1.1rem;
margin: 0.5rem 0 0;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-translation-comparison-list { color: rgba(30, 41, 59, 0.82); }
/* ------------------------------------------------------------
.sml-case-grid -- case-based teaching widget
mirrored from kpv-case-grid (4 cases A/B/C/D)
------------------------------------------------------------ */
.sml-case-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-case-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #60a5fa;
}
[data-theme="light"] .sml-case-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-case-card[data-case="A"] { border-top-color: #047857; }
.sml-case-card[data-case="B"] { border-top-color: #b45309; }
.sml-case-card[data-case="C"] { border-top-color: #1d4ed8; }
.sml-case-card[data-case="D"] { border-top-color: #b91c1c; }
.sml-case-pill {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
background: rgba(96, 165, 250, 0.15);
color: rgba(191, 219, 254, 0.95);
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.5rem;
}
[data-theme="light"] .sml-case-pill { background: rgba(96, 165, 250, 0.18); color: rgba(30, 64, 175, 0.95); }
.sml-case-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-case-title { color: rgba(15, 23, 42, 0.92); }
.sml-case-body {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0.55rem;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .sml-case-body { color: rgba(30, 41, 59, 0.85); }
.sml-case-takeaway {
font-size: 0.86rem;
line-height: 1.45;
padding: 0.55rem 0.75rem;
border-radius: 8px;
background: rgba(148, 163, 184, 0.08);
color: rgba(203, 213, 225, 0.92);
border-left: 3px solid rgba(148, 163, 184, 0.45);
}
[data-theme="light"] .sml-case-takeaway {
background: rgba(148, 163, 184, 0.12);
color: rgba(30, 41, 59, 0.88);
}
/* ------------------------------------------------------------
.sml-pediatric-presentation
3-up presentation card grid
------------------------------------------------------------ */
.sml-pediatric-presentation {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-pediatric-presentation-card {
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-pediatric-presentation-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-pediatric-presentation-tag {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.3rem;
}
.sml-pediatric-presentation-title {
font-weight: 600;
margin-bottom: 0.4rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-pediatric-presentation-title { color: rgba(15, 23, 42, 0.92); }
.sml-pediatric-presentation-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-pediatric-presentation-body { color: rgba(30, 41, 59, 0.85); }
@media (max-width: 640px) {
.sml-growth-velocity-row { grid-template-columns: 5rem 1fr 3.5rem; gap: 0.5rem; }
}
/* --- 06-adult-use --- */
/* ============================================================
sermorelin unit 6 -- adult-use bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.sml-somatopause-rail -- vertical age-decade rail
mapping GH decline by decade
.sml-rudman-card -- 2-card cluster contrasting
Rudman 1990 rhGH vs sermorelin
extrapolation reality
.sml-body-comp-bars -- horizontal bars for
lean-mass / fat-mass / IGF-1
deltas in the small adult studies
.sml-recovery-claims-grid -- claim vs source vs verdict
grid for community recovery claims
.sml-adult-evidence-tier -- collapsible tier strip for
the adult evidence map
============================================================ */
/* ------------------------------------------------------------
.sml-somatopause-rail
vertical age-decade rail (decade tag + delta + body)
------------------------------------------------------------ */
.sml-somatopause-rail {
margin: 1.5rem 0;
padding: 1.25rem 1.25rem 1.25rem 2rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
position: relative;
}
[data-theme="light"] .sml-somatopause-rail {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-somatopause-item {
position: relative;
padding: 0.65rem 0 0.65rem 1.5rem;
border-left: 2px solid rgba(252, 211, 77, 0.4);
}
.sml-somatopause-item::before {
content: '';
position: absolute;
left: -7px;
top: 1rem;
width: 12px;
height: 12px;
border-radius: 50%;
background: #f59e0b;
border: 2px solid rgba(15, 23, 42, 0.95);
}
[data-theme="light"] .sml-somatopause-item::before {
border-color: rgba(248, 250, 252, 0.95);
}
.sml-somatopause-decade {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(252, 211, 77, 0.95);
margin-bottom: 0.2rem;
}
.sml-somatopause-delta {
font-weight: 600;
margin-bottom: 0.3rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-somatopause-delta { color: rgba(15, 23, 42, 0.92); }
.sml-somatopause-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-somatopause-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-rudman-card
2-card cluster: rhGH evidence vs sermorelin extrapolation
------------------------------------------------------------ */
.sml-rudman-cluster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-rudman-card {
padding: 1.15rem 1.3rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-rudman-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-rudman-card--actual { border-top: 3px solid #10b981; }
.sml-rudman-card--claim { border-top: 3px solid #ef4444; }
.sml-rudman-card-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.35rem;
}
.sml-rudman-card--actual .sml-rudman-card-tag { color: rgba(94, 234, 212, 0.95); }
.sml-rudman-card--claim .sml-rudman-card-tag { color: rgba(252, 165, 165, 0.95); }
.sml-rudman-card-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-rudman-card-title { color: rgba(15, 23, 42, 0.92); }
.sml-rudman-card-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .sml-rudman-card-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-body-comp-bars
horizontal bars for lean / fat / IGF-1 deltas
------------------------------------------------------------ */
.sml-body-comp-bars {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-body-comp-bars {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-body-comp-bars-title {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.85rem;
}
.sml-body-comp-row {
display: grid;
grid-template-columns: 8rem 1fr 5rem;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.55rem;
}
.sml-body-comp-label {
font-size: 0.88rem;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .sml-body-comp-label { color: rgba(30, 41, 59, 0.88); }
.sml-body-comp-track {
height: 0.9rem;
border-radius: 6px;
background: rgba(148, 163, 184, 0.15);
overflow: hidden;
}
.sml-body-comp-fill {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.sml-body-comp-fill--lean { background: linear-gradient(90deg, #10b981, #34d399); }
.sml-body-comp-fill--fat { background: linear-gradient(90deg, #ef4444, #f87171); }
.sml-body-comp-fill--igf1 { background: linear-gradient(90deg, #60a5fa, #93c5fd); }
.sml-body-comp-value {
font-size: 0.88rem;
font-weight: 600;
text-align: right;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-body-comp-value { color: rgba(15, 23, 42, 0.92); }
.sml-body-comp-caption {
margin-top: 0.6rem;
font-size: 0.85rem;
line-height: 1.45;
color: rgba(203, 213, 225, 0.82);
}
[data-theme="light"] .sml-body-comp-caption { color: rgba(30, 41, 59, 0.78); }
/* ------------------------------------------------------------
.sml-recovery-claims-grid
claim / source / verdict grid for community recovery claims
------------------------------------------------------------ */
.sml-recovery-claims-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-recovery-claim-card {
padding: 1.05rem 1.2rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #94a3b8;
}
[data-theme="light"] .sml-recovery-claim-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-recovery-claim-card[data-verdict="supported"] { border-top-color: #10b981; }
.sml-recovery-claim-card[data-verdict="mixed"] { border-top-color: #f59e0b; }
.sml-recovery-claim-card[data-verdict="unsupported"] { border-top-color: #ef4444; }
.sml-recovery-claim-pill {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.45rem;
background: rgba(148, 163, 184, 0.18);
color: rgba(226, 232, 240, 0.95);
}
.sml-recovery-claim-card[data-verdict="supported"] .sml-recovery-claim-pill {
background: rgba(16, 185, 129, 0.18);
color: rgba(187, 247, 208, 0.95);
}
.sml-recovery-claim-card[data-verdict="mixed"] .sml-recovery-claim-pill {
background: rgba(245, 158, 11, 0.18);
color: rgba(253, 230, 138, 0.95);
}
.sml-recovery-claim-card[data-verdict="unsupported"] .sml-recovery-claim-pill {
background: rgba(239, 68, 68, 0.18);
color: rgba(252, 165, 165, 0.95);
}
.sml-recovery-claim-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-recovery-claim-title { color: rgba(15, 23, 42, 0.92); }
.sml-recovery-claim-source {
font-size: 0.82rem;
line-height: 1.5;
color: rgba(148, 163, 184, 0.92);
margin-bottom: 0.45rem;
}
.sml-recovery-claim-verdict {
font-size: 0.86rem;
line-height: 1.45;
padding: 0.55rem 0.75rem;
border-radius: 8px;
background: rgba(148, 163, 184, 0.08);
color: rgba(203, 213, 225, 0.92);
border-left: 3px solid rgba(148, 163, 184, 0.45);
}
[data-theme="light"] .sml-recovery-claim-verdict {
background: rgba(148, 163, 184, 0.12);
color: rgba(30, 41, 59, 0.88);
}
/* ------------------------------------------------------------
.sml-adult-evidence-tier
compact tier strip for the adult evidence map
------------------------------------------------------------ */
.sml-adult-evidence-tier {
margin: 1.5rem 0;
padding: 1.15rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-left: 4px solid #94a3b8;
}
[data-theme="light"] .sml-adult-evidence-tier {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-adult-evidence-tier--solid { border-left-color: #10b981; }
.sml-adult-evidence-tier--moderate { border-left-color: #f59e0b; }
.sml-adult-evidence-tier--weak { border-left-color: #ef4444; }
.sml-adult-evidence-tier--missing { border-left-color: #6b7280; }
.sml-adult-evidence-tier-header {
display: flex;
align-items: baseline;
gap: 0.65rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.sml-adult-evidence-tier-pill {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(148, 163, 184, 0.18);
color: rgba(226, 232, 240, 0.95);
}
.sml-adult-evidence-tier--solid .sml-adult-evidence-tier-pill {
background: rgba(16, 185, 129, 0.2);
color: rgba(187, 247, 208, 0.95);
}
.sml-adult-evidence-tier--moderate .sml-adult-evidence-tier-pill {
background: rgba(245, 158, 11, 0.2);
color: rgba(253, 230, 138, 0.95);
}
.sml-adult-evidence-tier--weak .sml-adult-evidence-tier-pill {
background: rgba(239, 68, 68, 0.2);
color: rgba(252, 165, 165, 0.95);
}
.sml-adult-evidence-tier-title {
font-weight: 600;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-adult-evidence-tier-title { color: rgba(15, 23, 42, 0.92); }
.sml-adult-evidence-tier-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .sml-adult-evidence-tier-body { color: rgba(30, 41, 59, 0.85); }
.sml-adult-evidence-tier-claims {
font-size: 0.88rem;
line-height: 1.5;
padding-left: 1.15rem;
margin: 0.55rem 0 0;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-adult-evidence-tier-claims { color: rgba(30, 41, 59, 0.82); }
@media (max-width: 640px) {
.sml-body-comp-row { grid-template-columns: 6rem 1fr 4rem; gap: 0.5rem; }
}
/* --- 07-vs-other-analogs --- */
/* ============================================================
sermorelin unit 7 -- vs-other-analogs bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.sml-analog-timeline (+ .sml-milestones / .sml-milestone)
-- historical timeline of the
GH-axis analog family
(1982 GHRH -> 2008 MK-677)
.sml-pk-comparison-grid -- mechanism / half-life /
approval / route grid for
each analog vs sermorelin
.sml-stack-strategy-card -- dual-pathway GHRH+GHRP
synergy explainer card
.sml-analog-positioning -- where-sermorelin-sits radar
fallback strip
.sml-receptor-split-grid -- GHRHR-side vs GHSR-side
2-column receptor split
============================================================ */
/* ------------------------------------------------------------
.sml-analog-timeline + .sml-milestones / .sml-milestone
horizontal milestone strip (year + title + body)
------------------------------------------------------------ */
.sml-analog-timeline {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
overflow-x: auto;
}
[data-theme="light"] .sml-analog-timeline {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-milestones {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
position: relative;
}
.sml-milestone {
padding: 1rem 1.15rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.55);
border-top: 3px solid #60a5fa;
position: relative;
}
[data-theme="light"] .sml-milestone {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-milestone-year {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(96, 165, 250, 0.95);
margin-bottom: 0.3rem;
}
.sml-milestone-title {
font-weight: 600;
margin-bottom: 0.4rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-milestone-title { color: rgba(15, 23, 42, 0.92); }
.sml-milestone-body {
font-size: 0.88rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-milestone-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-pk-comparison-grid
per-analog 4-column comparison
------------------------------------------------------------ */
.sml-pk-comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-pk-comparison-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #60a5fa;
}
[data-theme="light"] .sml-pk-comparison-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-pk-comparison-card[data-receptor="ghrhr"] { border-top-color: #10b981; }
.sml-pk-comparison-card[data-receptor="ghsr"] { border-top-color: #a855f7; }
.sml-pk-comparison-card[data-receptor="ghr"] { border-top-color: #f59e0b; }
.sml-pk-comparison-name {
font-weight: 700;
margin-bottom: 0.35rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-pk-comparison-name { color: rgba(15, 23, 42, 0.95); }
.sml-pk-comparison-rows {
display: grid;
gap: 0.35rem;
margin-top: 0.5rem;
}
.sml-pk-comparison-row {
display: grid;
grid-template-columns: 6rem 1fr;
gap: 0.5rem;
font-size: 0.86rem;
line-height: 1.45;
}
.sml-pk-comparison-key {
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
padding-top: 0.15rem;
}
.sml-pk-comparison-val {
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .sml-pk-comparison-val { color: rgba(30, 41, 59, 0.88); }
/* ------------------------------------------------------------
.sml-stack-strategy-card
dual-pathway GHRH + GHRP synergy explainer
------------------------------------------------------------ */
.sml-stack-strategy-card {
margin: 1.5rem 0;
padding: 1.25rem 1.4rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.5);
border-left: 4px solid #a855f7;
}
[data-theme="light"] .sml-stack-strategy-card {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-stack-strategy-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(216, 180, 254, 0.95);
margin-bottom: 0.35rem;
}
.sml-stack-strategy-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-stack-strategy-title { color: rgba(15, 23, 42, 0.92); }
.sml-stack-strategy-arms {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.85rem;
margin: 0.6rem 0 0.65rem;
}
.sml-stack-strategy-arm {
padding: 0.7rem 0.85rem;
border-radius: 10px;
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.2);
}
[data-theme="light"] .sml-stack-strategy-arm {
background: rgba(248, 250, 252, 0.85);
}
.sml-stack-strategy-arm-name {
font-weight: 600;
font-size: 0.88rem;
margin-bottom: 0.25rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-stack-strategy-arm-name { color: rgba(15, 23, 42, 0.95); }
.sml-stack-strategy-arm-body {
font-size: 0.85rem;
line-height: 1.45;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-stack-strategy-arm-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-analog-positioning
where-sermorelin-sits strip
------------------------------------------------------------ */
.sml-analog-positioning {
margin: 1.5rem 0;
padding: 1.2rem 1.35rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #10b981;
}
[data-theme="light"] .sml-analog-positioning {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-analog-positioning-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-analog-positioning-title { color: rgba(15, 23, 42, 0.92); }
.sml-analog-positioning-list {
font-size: 0.9rem;
line-height: 1.55;
padding-left: 1.15rem;
margin: 0;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .sml-analog-positioning-list { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-receptor-split-grid
2-column GHRHR-side vs GHSR-side anatomy
------------------------------------------------------------ */
.sml-receptor-split-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-receptor-split-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .sml-receptor-split-card {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-receptor-split-card--ghrhr { border-top: 3px solid #10b981; }
.sml-receptor-split-card--ghsr { border-top: 3px solid #a855f7; }
.sml-receptor-split-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.35rem;
}
.sml-receptor-split-card--ghrhr .sml-receptor-split-tag { color: rgba(94, 234, 212, 0.95); }
.sml-receptor-split-card--ghsr .sml-receptor-split-tag { color: rgba(216, 180, 254, 0.95); }
.sml-receptor-split-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-receptor-split-title { color: rgba(15, 23, 42, 0.92); }
.sml-receptor-split-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .sml-receptor-split-body { color: rgba(30, 41, 59, 0.85); }
@media (max-width: 640px) {
.sml-pk-comparison-row { grid-template-columns: 5rem 1fr; }
}
/* --- 08-safety-quality --- */
/* ============================================================
sermorelin unit 8 -- safety-quality bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.sml-ae-pyramid -- inline SVG AE-frequency
pyramid (mild -> serious)
used in the first-after-intro
section. fingerprint classifier
reads this as infographicType
'svg'.
.sml-ae-table -- pediatric vs adult AE-frequency
side-by-side comparison
.sml-monitoring-protocol -- IGF-1 monitoring schedule rail
(baseline / 6-8 wk / quarterly)
.sml-quality-checklist -- numbered CoA / procurement
checklist card
.sml-red-flag-list -- vendor marketing red-flag list
with severity dots
============================================================ */
/* ------------------------------------------------------------
.sml-ae-pyramid -- SVG infographic (used inline in section-interactive)
the actual SVG is hand-authored in the HTML; this rule provides
responsive sizing + light-mode label color overrides
------------------------------------------------------------ */
.sml-ae-pyramid {
width: 100%;
max-width: 600px;
height: auto;
display: block;
margin: 0 auto;
}
[data-theme="dark"] .sml-ae-pyramid text[fill="#0f172a"] {
fill: #f8fafc;
}
/* ------------------------------------------------------------
.sml-ae-table -- pediatric vs adult AE frequency comparison
------------------------------------------------------------ */
.sml-ae-table {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 0;
margin: 1.5rem 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.22);
}
.sml-ae-table-cell {
padding: 0.7rem 0.95rem;
font-size: 0.9rem;
line-height: 1.45;
background: rgba(15, 23, 42, 0.45);
color: rgba(226, 232, 240, 0.9);
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.sml-ae-table-cell--head {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(94, 234, 212, 0.95);
background: rgba(15, 23, 42, 0.7);
}
[data-theme="light"] .sml-ae-table-cell {
background: rgba(255, 255, 255, 0.85);
color: rgba(30, 41, 59, 0.88);
border-bottom-color: rgba(148, 163, 184, 0.2);
}
[data-theme="light"] .sml-ae-table-cell--head {
background: rgba(248, 250, 252, 0.95);
color: rgba(15, 76, 71, 0.95);
}
.sml-ae-table-cell--label {
font-weight: 600;
}
/* ------------------------------------------------------------
.sml-monitoring-protocol -- IGF-1 monitoring rail
------------------------------------------------------------ */
.sml-monitoring-protocol {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.85rem;
margin: 1.5rem 0;
}
.sml-monitoring-step {
padding: 1rem 1.15rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #60a5fa;
}
[data-theme="light"] .sml-monitoring-step {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-monitoring-step-when {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(147, 197, 253, 0.95);
margin-bottom: 0.3rem;
}
.sml-monitoring-step-what {
font-weight: 600;
margin-bottom: 0.4rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-monitoring-step-what { color: rgba(15, 23, 42, 0.92); }
.sml-monitoring-step-body {
font-size: 0.88rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-monitoring-step-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-quality-checklist -- numbered CoA / procurement checklist
------------------------------------------------------------ */
.sml-quality-checklist {
margin: 1.5rem 0;
padding: 1.25rem 1.4rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-left: 4px solid #10b981;
}
[data-theme="light"] .sml-quality-checklist {
background: rgba(248, 250, 252, 0.85);
}
.sml-quality-checklist-title {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.6rem;
}
.sml-quality-checklist-list {
list-style: none;
counter-reset: sml-q-counter;
padding: 0;
margin: 0;
}
.sml-quality-checklist-item {
counter-increment: sml-q-counter;
position: relative;
padding: 0.5rem 0 0.5rem 2.1rem;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
border-bottom: 1px dashed rgba(148, 163, 184, 0.18);
}
.sml-quality-checklist-item:last-child { border-bottom: none; }
.sml-quality-checklist-item::before {
content: counter(sml-q-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.55rem;
font-size: 0.78rem;
font-weight: 700;
color: rgba(16, 185, 129, 0.95);
background: rgba(16, 185, 129, 0.12);
padding: 0.1rem 0.4rem;
border-radius: 5px;
}
[data-theme="light"] .sml-quality-checklist-item { color: rgba(30, 41, 59, 0.88); }
/* ------------------------------------------------------------
.sml-red-flag-list -- vendor red-flag list with severity dots
------------------------------------------------------------ */
.sml-red-flag-list {
list-style: none;
padding: 0;
margin: 1.25rem 0;
display: grid;
gap: 0.55rem;
}
.sml-red-flag-item {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 0.7rem;
padding: 0.7rem 0.95rem;
border-radius: 10px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.22);
border-left: 3px solid #f87171;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .sml-red-flag-item {
background: rgba(255, 255, 255, 0.85);
color: rgba(30, 41, 59, 0.88);
}
.sml-red-flag-item--high { border-left-color: #dc2626; }
.sml-red-flag-item--med { border-left-color: #f59e0b; }
.sml-red-flag-item--low { border-left-color: #facc15; }
.sml-red-flag-dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 0.45rem;
background: #f87171;
}
.sml-red-flag-item--high .sml-red-flag-dot { background: #dc2626; }
.sml-red-flag-item--med .sml-red-flag-dot { background: #f59e0b; }
.sml-red-flag-item--low .sml-red-flag-dot { background: #facc15; }
.sml-red-flag-claim {
font-weight: 600;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-red-flag-claim { color: rgba(15, 23, 42, 0.92); }
.sml-red-flag-why {
font-size: 0.86rem;
color: rgba(203, 213, 225, 0.85);
margin-top: 0.25rem;
line-height: 1.45;
}
[data-theme="light"] .sml-red-flag-why { color: rgba(30, 41, 59, 0.78); }
@media (max-width: 640px) {
.sml-ae-table { grid-template-columns: 1fr; }
.sml-ae-table-cell--head { border-bottom: 1px solid rgba(148, 163, 184, 0.25); }
}
/* --- 09-administration-regulatory --- */
/* ============================================================
sermorelin unit 9 -- administration-regulatory bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.sml-route-matrix -- 4-up route-comparison grid
(SubQ / intranasal / oral / IV)
.sml-dose-framework -- pediatric vs adult community
dose-framework comparison card
.sml-reconstitution-table -- vial mass / BAC volume / per-100u
math table
.sml-reg-status-card -- regulatory status panel with
Geref history rail + 503A status
.sml-research-roadmap -- prioritized future-research
list with priority pills
============================================================ */
/* ------------------------------------------------------------
.sml-route-matrix -- 4-up route comparison
------------------------------------------------------------ */
.sml-route-matrix {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.95rem;
margin: 1.5rem 0;
}
.sml-route-card {
padding: 1rem 1.15rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #60a5fa;
}
.sml-route-card--primary { border-top-color: #10b981; }
.sml-route-card--niche { border-top-color: #f59e0b; }
.sml-route-card--blocked { border-top-color: #b91c1c; }
.sml-route-card--clinical { border-top-color: #6366f1; }
[data-theme="light"] .sml-route-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-route-card-name {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.3rem;
}
.sml-route-card--niche .sml-route-card-name { color: rgba(252, 211, 77, 0.95); }
.sml-route-card--blocked .sml-route-card-name { color: rgba(254, 178, 178, 0.95); }
.sml-route-card--clinical .sml-route-card-name { color: rgba(165, 180, 252, 0.95); }
.sml-route-card-bioavail {
font-weight: 600;
margin-bottom: 0.4rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-route-card-bioavail { color: rgba(15, 23, 42, 0.92); }
.sml-route-card-body {
font-size: 0.88rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-route-card-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-dose-framework -- pediatric vs adult dose comparison
------------------------------------------------------------ */
.sml-dose-framework {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sml-dose-framework-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
.sml-dose-framework-card--validated { border-top: 3px solid #10b981; }
.sml-dose-framework-card--community { border-top: 3px solid #f59e0b; }
[data-theme="light"] .sml-dose-framework-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.sml-dose-framework-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.35rem;
}
.sml-dose-framework-card--validated .sml-dose-framework-tag { color: rgba(94, 234, 212, 0.95); }
.sml-dose-framework-card--community .sml-dose-framework-tag { color: rgba(252, 211, 77, 0.95); }
.sml-dose-framework-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-dose-framework-title { color: rgba(15, 23, 42, 0.92); }
.sml-dose-framework-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .sml-dose-framework-body { color: rgba(30, 41, 59, 0.85); }
.sml-dose-framework-list {
font-size: 0.88rem;
line-height: 1.55;
padding-left: 1.1rem;
margin: 0.55rem 0 0;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .sml-dose-framework-list { color: rgba(30, 41, 59, 0.82); }
/* ------------------------------------------------------------
.sml-reconstitution-table -- vial / BAC volume / per-unit math
------------------------------------------------------------ */
.sml-reconstitution-table {
margin: 1.5rem 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.22);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.4fr;
}
.sml-reconstitution-cell {
padding: 0.7rem 0.9rem;
font-size: 0.9rem;
line-height: 1.45;
background: rgba(15, 23, 42, 0.45);
color: rgba(226, 232, 240, 0.9);
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.sml-reconstitution-cell--head {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(147, 197, 253, 0.95);
background: rgba(15, 23, 42, 0.7);
}
[data-theme="light"] .sml-reconstitution-cell {
background: rgba(255, 255, 255, 0.85);
color: rgba(30, 41, 59, 0.88);
border-bottom-color: rgba(148, 163, 184, 0.2);
}
[data-theme="light"] .sml-reconstitution-cell--head {
background: rgba(248, 250, 252, 0.95);
color: rgba(29, 78, 216, 0.95);
}
/* ------------------------------------------------------------
.sml-reg-status-card -- regulatory status panel
------------------------------------------------------------ */
.sml-reg-status-card {
margin: 1.5rem 0;
padding: 1.25rem 1.4rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-left: 4px solid #6366f1;
}
[data-theme="light"] .sml-reg-status-card {
background: rgba(248, 250, 252, 0.85);
}
.sml-reg-status-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.sml-reg-status-title {
font-weight: 600;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .sml-reg-status-title { color: rgba(15, 23, 42, 0.92); }
.sml-reg-status-pill {
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
background: rgba(99, 102, 241, 0.18);
color: rgba(196, 181, 253, 0.95);
}
[data-theme="light"] .sml-reg-status-pill { background: rgba(99, 102, 241, 0.18); color: rgba(67, 56, 202, 0.95); }
.sml-reg-status-pill--ok { background: rgba(16, 185, 129, 0.15); color: rgba(187, 247, 208, 0.95); }
.sml-reg-status-pill--caution { background: rgba(245, 158, 11, 0.15); color: rgba(253, 230, 138, 0.95); }
.sml-reg-status-pill--banned { background: rgba(220, 38, 38, 0.15); color: rgba(254, 202, 202, 0.95); }
[data-theme="light"] .sml-reg-status-pill--ok { color: rgba(6, 95, 70, 0.95); }
[data-theme="light"] .sml-reg-status-pill--caution { color: rgba(146, 64, 14, 0.95); }
[data-theme="light"] .sml-reg-status-pill--banned { color: rgba(153, 27, 27, 0.95); }
.sml-reg-status-body {
font-size: 0.92rem;
line-height: 1.55;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .sml-reg-status-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.sml-research-roadmap -- prioritized future-research list
------------------------------------------------------------ */
.sml-research-roadmap {
list-style: none;
padding: 0;
margin: 1.5rem 0;
display: grid;
gap: 0.65rem;
}
.sml-research-roadmap-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.8rem;
align-items: start;
padding: 0.75rem 1rem;
border-radius: 10px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.22);
}
[data-theme="light"] .sml-research-roadmap-item {
background: rgba(255, 255, 255, 0.85);
}
.sml-research-roadmap-priority {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
align-self: start;
background: rgba(96, 165, 250, 0.15);
color: rgba(191, 219, 254, 0.95);
}
.sml-research-roadmap-priority--p1 { background: rgba(220, 38, 38, 0.15); color: rgba(254, 202, 202, 0.95); }
.sml-research-roadmap-priority--p2 { background: rgba(245, 158, 11, 0.18); color: rgba(253, 230, 138, 0.95); }
.sml-research-roadmap-priority--p3 { background: rgba(16, 185, 129, 0.15); color: rgba(187, 247, 208, 0.95); }
[data-theme="light"] .sml-research-roadmap-priority--p1 { color: rgba(153, 27, 27, 0.95); }
[data-theme="light"] .sml-research-roadmap-priority--p2 { color: rgba(146, 64, 14, 0.95); }
[data-theme="light"] .sml-research-roadmap-priority--p3 { color: rgba(6, 95, 70, 0.95); }
.sml-research-roadmap-body {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .sml-research-roadmap-body { color: rgba(30, 41, 59, 0.88); }
@media (max-width: 640px) {
.sml-reconstitution-table { grid-template-columns: 1fr 1fr; }
}