/* Piperine lesson. Everything scoped under .pip-*. */
.pip-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pip-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }
.pip-hero img { width: 300px; max-width: 100%; max-height: 30vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

.gauge.pip-on .gt i { background: #ff7a4a; }

/* the gut */
.pip-gut { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pip-gut svg { width: 100%; display: block; }
.pip-lane { stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: 6 6; fill: none; }
.pip-st { stroke-width: 2; }
.pip-st.gut { fill: #3b3a2a; stroke: #7a7550; }
.pip-st.wall { fill: #5a3a4a; stroke: #b0708e; }
.pip-st.liver { fill: #5a2e24; stroke: #b0604c; }
.pip-st.blood { fill: #4a1822; stroke: #d8455a; }
.pip-bin { fill: rgba(255,255,255,.03); stroke: var(--line-strong); stroke-dasharray: 4 4; }
.pip-tx { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.pip-tx.dim { fill: var(--faint); font-weight: 600; }
.pip-slow circle { fill: #3b2a22; stroke: #d9b48a; stroke-width: 2; opacity: 0; transition: opacity .4s; }
svg.slowed .pip-slow circle { opacity: 1; }
.pip-d.cur { fill: #FFC23A; }
.pip-d.med { fill: #6fc3ff; }
.pip-d.tag { fill: #6b6f80; }

/* the study */
.pip-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pip-card div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline; }
.pip-card span { font-size: 12.5px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.pip-card b { font-size: 15px; line-height: 1.3; }
.pip-card .res b { color: var(--gold); }

@media (max-height: 700px) {
  .pip-hero img { max-height: 24vh; }
  .pip-card { gap: 6px; padding: 10px 12px; }
  .pip-card b { font-size: 14px; }
}