/* Dose–response relationship lesson. All rules scoped under .drr-* */

.drr-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.drr-hero { width: min(94%, 380px); }
.drr-hero img { width: 100%; display: block; }

/* the lab: wells on top, chart below */
.drr-lab { display: block; width: 100%; max-width: 400px; height: auto; overflow: visible; }
.drr-hit { fill: transparent; }
.drr-wo { fill: rgba(220, 232, 255, .05); stroke: rgba(200, 214, 240, .45); stroke-width: 2; }
.drr-wi { fill: rgba(140, 120, 255, .9); }
.drr-well { cursor: pointer; }
.drr-well.next .drr-wo { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 5 3; }
.drr-dl { font: 700 12px var(--mono); fill: var(--dim); text-anchor: middle; }
.drr-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.drr-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.drr-yl { font: 700 12px var(--mono); fill: var(--dim); text-anchor: end; }
.drr-yt { font: 700 12px var(--sans); fill: var(--dim); }
.drr-xt { font: 700 12px var(--sans); fill: var(--dim); text-anchor: end; }
.drr-curve { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.drr-hl { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.drr-lab.drr-hlon .drr-hl { opacity: .55; }
.drr-pt { fill: #fff; stroke: var(--violet-bright); stroke-width: 2.5; }
.drr-tk { font: 700 12px var(--mono); fill: var(--dim); text-anchor: middle; opacity: 0; }
.drr-lab.drr-axis .drr-tk, .drr-lab.drr-done .drr-tk { opacity: 1; }
.drr-lab.drr-axis .drr-wells, .drr-lab.drr-done .drr-wells { opacity: .25; pointer-events: none; }

/* Paracelsus */
.drr-portrait { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.drr-portrait img { width: min(62vw, 240px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.drr-portrait span { font-size: 13px; color: var(--dim); }

/* botox card */
.drr-card { width: 100%; padding: 18px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 6px; }
.drr-card b { font: 700 22px var(--serif); color: var(--gold); }
.drr-card span { font-size: 15px; color: var(--dim); line-height: 1.4; }

@media (max-height: 700px) {
  .drr-lab { max-width: 330px; }
  .drr-hero { width: min(80%, 300px); }
  .drr-portrait img { width: 180px; }
}