/* Visual explanations for the testosterone delivery article only. */
.tt-visual { --tt-teal:#78d5cf; --tt-coral:#efa191; margin:36px 0; font-family:var(--tl-sans,system-ui,sans-serif); color:var(--tl-paper,#dce3e8); }
.tl-body .tt-visual p,.tl-body .tt-visual figcaption { font-family:var(--tl-sans,system-ui,sans-serif); font-size:14px; line-height:1.65; }
.tt-visual .tt-eyebrow { display:block; margin:0 0 10px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9daab4; }
.tl-body .tt-visual h3 { margin:0 0 12px; font-family:var(--tl-sans,system-ui,sans-serif); font-size:25px; line-height:1.25; color:#f1f4f5; }
.tl-body .tt-visual figcaption { margin:14px 0 0; color:#a9b5bf; }
.tl-body .tt-anatomy { margin:14px 0 42px; }
.tl-body .tt-anatomy img { display:block; width:100%; height:auto; border-radius:5px; }
.tt-anatomy figcaption strong { color:#e5ebef; }
.tt-curve { padding:26px; border:1px solid #303a42; border-radius:6px; background:linear-gradient(145deg,#101b22,#101418 70%); }
.tt-curve-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.tt-controls { display:none; flex-wrap:wrap; gap:8px; margin:6px 0 0; }
.tt-curve[data-enhanced] .tt-controls { display:flex; }
.tt-controls button { min-height:44px; padding:9px 13px; border:1px solid #46535e; border-radius:4px; background:transparent; color:#c0cbd3; font:600 12px/1.25 var(--tl-sans,system-ui,sans-serif); cursor:pointer; }
.tt-controls button:hover { background:#22303a; }
.tt-controls button[aria-pressed="true"] { color:#11191d; background:#dce9ed; border-color:#dce9ed; }
.tt-controls button:focus-visible { outline:2px solid #f2f5f7; outline-offset:4px; }
.tt-plot { margin:20px 0 0; }
.tt-axis-label { color:#a9b5bf; font:11px/1.4 var(--tl-sans,system-ui,sans-serif); }
.tt-axis-time { display:block; text-align:right; margin-top:2px; }
.tt-plot svg { display:block; width:100%; height:auto; overflow:visible; }
.tt-auc-fill { fill:var(--tt-teal); opacity:.22; transition:opacity .2s ease; }
.tt-concentration-line { stroke:var(--tt-teal); stroke-width:4; fill:none; stroke-linecap:round; }
.tt-peak-marker { opacity:1; transition:opacity .2s ease; }
.tt-peak-marker line { stroke:var(--tt-coral); stroke-width:2; stroke-dasharray:5 6; }
.tt-peak-marker circle { fill:var(--tt-coral); stroke:#111b23; stroke-width:3; }
.tt-curve[data-mode="auc"] .tt-peak-marker { opacity:.25; }
.tt-curve[data-mode="peak"] .tt-auc-fill { opacity:.035; }
.tl-body .tt-curve .tt-explanation { min-height:3.3em; margin:18px 0 0; color:#dce5ea; }
.tt-curve figcaption { padding-top:14px; border-top:1px solid #303a42; }
.tt-needle-comparison { padding:25px 0; border-top:1px solid #343d44; border-bottom:1px solid #343d44; }
.tt-needle-row { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:14px; margin:20px 0; }
.tt-needle-label { font-size:12px; line-height:1.5; }
.tt-needle-label strong { display:block; color:#f1f4f5; font-size:17px; }
.tt-needle-track { position:relative; height:28px; margin-right:12px; }
.tt-needle-hub { position:absolute; left:0; top:2px; width:24px; height:24px; border:1px solid #78d5cf; border-radius:4px 1px 1px 4px; background:#254d51; }
.tt-needle-im .tt-needle-hub { border-color:#efa191; background:#543e39; }
.tt-needle-shaft { position:absolute; left:24px; top:12px; height:4px; background:#d1d8df; }
.tt-needle-sc .tt-needle-shaft { width:calc((100% - 24px) * .416666667); }
.tt-needle-im .tt-needle-shaft { width:calc((100% - 24px) * .666666667); }
.tt-needle-shaft:after { content:""; position:absolute; right:0; top:0; border-top:4px solid transparent; border-right:8px solid #101418; }
.tt-needle-range { position:absolute; left:calc(24px + (100% - 24px) * .666666667); right:0; top:12px; height:0; border-top:3px dashed #84919b; }
.tt-needle-range:after { content:""; position:absolute; right:0; top:-7px; height:11px; border-right:1px solid #9ca9b2; }
@media (max-width:600px) { .tt-curve { padding:19px 16px; } .tt-curve-top { display:block; } .tt-controls { margin-top:18px; } .tl-body .tt-visual h3 { font-size:22px; } .tt-needle-row { grid-template-columns:86px minmax(0,1fr); gap:10px; } .tt-needle-label { font-size:11px; } .tt-needle-label strong { font-size:16px; } .tt-visual { margin:30px 0; } }
@media (prefers-reduced-motion:reduce) { .tt-auc-fill,.tt-peak-marker { transition:none; } }