/* /prolactin/: anti-life hormone page. Built by tools/build_prolactin.py, driven by assets/prolactin.js.
   The field is his "Hormone Atlas, pituitary gland" illustration (an image) with a live SVG overlay in its style. */
.pl-page { --pl-paper: #FBF7EE; --pl-ink: #24345A; --pl-coral: #FF5A4E; --pl-teal: #2FC7AE; --pl-gold: #F2C14E;
  --pl-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --pl-edge: #2E2E2E; }
.pl-page :where(h2, h3, p, ol, ul, figure) { margin: 0; }

/* hero bullets */
.pl-hero { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.pl-hero li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.4; color: var(--x-text, #E7E9EA); font-weight: 500; }
.pl-hero li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pl-coral); box-shadow: 0 0 10px rgba(255, 90, 78, .65); }
@media (max-width: 420px) { .pl-hero { grid-template-columns: 1fr; gap: 8px; } }

/* field */
.pl-field { margin: 0 0 34px; padding: 16px; border: 1px solid var(--pl-edge); border-radius: 20px; background: #0B0B0B; }
.pl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pl-kick { display: block; font: 500 11px/1.3 var(--pl-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pl-teal); margin-bottom: 4px; }
.pl-field h2 { font-family: var(--font-display, inherit); font-size: 22px; line-height: 1.2; color: #fff; }
.pl-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-presets button { padding: 7px 12px; border: 1px solid #3A3A3A; border-radius: 999px; background: transparent; color: #CFCFCF;
  font: 500 12.5px/1 var(--font-body, inherit); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.pl-presets button:hover { border-color: #777; color: #fff; }
.pl-presets button[aria-pressed="true"] { background: #fff; border-color: #fff; color: #000; }

.pl-read { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px 18px; margin: 14px 0 12px; }
.pl-r > span { display: block; font: 500 10.5px/1.2 var(--pl-mono); letter-spacing: .14em; text-transform: uppercase; color: #8A8A8A; }
.pl-r b { display: inline-block; font: 600 24px/1.15 var(--pl-mono); color: #fff; font-variant-numeric: tabular-nums; }
.pl-r--da b { color: var(--pl-teal); }
.pl-r small { font-size: 12px; font-weight: 500; color: #8A8A8A; }
.pl-badge { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; font: 600 11px/1.2 var(--font-body, inherit);
  font-style: normal; vertical-align: 4px; border: 1px solid currentColor; }
.pl-badge.is-low { color: #9DB5EC; } .pl-badge.is-norm { color: #6EE7B7; } .pl-badge.is-bord { color: var(--pl-gold); } .pl-badge.is-high { color: var(--pl-coral); }
.pl-spark { width: 100%; height: 34px; min-width: 60px; }
.pl-spark-hi { fill: rgba(255, 90, 78, .09); }
.pl-spark polyline { fill: none; stroke: var(--pl-coral); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.pl-main { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; }
.pl-stage { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #D9CFBE;
  background-color: var(--pl-paper);
  background-image: linear-gradient(90deg, transparent 22px, rgba(220, 90, 90, .28) 22px, rgba(220, 90, 90, .28) 23px, transparent 23px),
    repeating-linear-gradient(180deg, transparent 0, transparent 21px, rgba(110, 150, 205, .22) 21px, rgba(110, 150, 205, .22) 22px); }
.pl-brain { display: block; width: 100%; height: auto; touch-action: manipulation; }
.pl-zoom { display: none; position: absolute; right: 8px; top: 8px; z-index: 2; align-items: center; gap: 6px; padding: 6px 10px 6px 8px;
  border: 1.5px solid var(--pl-ink); border-radius: 999px; background: #fff; color: var(--pl-ink); font: 600 12px/1 var(--font-body, inherit);
  cursor: pointer; box-shadow: 0 2px 0 rgba(36, 52, 90, .25); }
.pl-js .pl-zoom { display: inline-flex; }
.pl-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pl-zoom[aria-pressed="true"] svg path { d: path("M12.5 12.5L17 17M6 8.5h5"); }
.pl-zoom:focus-visible, .pl-target:focus-visible, .pl-track:focus-visible { outline: 2px solid var(--pl-teal); outline-offset: 2px; }

/* the atlas image + live overlay (SVG units = pixels of his original page) */
.pl-brain :is(path, ellipse, circle, rect, line) { vector-effect: non-scaling-stroke; }
.pl-brain .sc { vector-effect: none; }
.pl-hy-glow { opacity: .6; mix-blend-mode: screen; }
.pl-axon { fill: none; stroke: #1E7A4A; stroke-width: 1.2; stroke-opacity: .8; }
.pl-map-hl { fill: #FF5A4E; opacity: 0; mix-blend-mode: multiply; }
.pl-cell-g { fill: #FF5A4E; opacity: 0; }
.pl-cell-b { fill: #F6CDD2; stroke: #8E2238; stroke-width: 1; }
.pl-cell.is-hit .pl-cell-b { stroke: #12A08F; stroke-width: 1.6; }
.pl-cell-n { fill: #7A2236; opacity: .75; }
.pl-neuron { fill: #1E8F63; stroke: #0F5A3C; stroke-width: .8; }
.pl-vessel-glow { fill: none; stroke: #FF4A3A; stroke-width: 18; stroke-linecap: round; opacity: 0; filter: blur(3px); }
.pl-vessel { fill: none; stroke: #9E2A25; stroke-width: 9; stroke-linecap: round; }
.pl-vessel-in { fill: none; stroke: #E8675C; stroke-width: 5.5; stroke-linecap: round; }
.pl-target { cursor: zoom-in; outline: none; }
.pl-target rect { fill: #C0392B; fill-opacity: .001; stroke: none; }
.pl-target:hover rect { fill-opacity: .06; }
.pl-target text { font: 700 15px var(--font-body, sans-serif); fill: #C0392B; }
.pl-js .pl-target rect { animation: pl-pulse 2.2s ease-in-out infinite; }
@keyframes pl-pulse { 50% { fill-opacity: .05; } }
.pl-l line { stroke: var(--pl-ink); stroke-width: 1.1; }
.pl-l circle { fill: var(--pl-ink); }
.pl-l rect { fill: #fff; stroke: var(--pl-ink); stroke-width: 1.3; }
.pl-l text { font-family: var(--font-body, sans-serif); font-weight: 600; fill: var(--pl-ink); }
.pl-l text.pl-l-sub { font-weight: 500; font-style: italic; fill: #5A6788; }
.pl-dots circle { pointer-events: none; }
.pl-d-da { fill: #12A08F; }
.pl-d-prl { fill: #F0382A; }

/* dopamine scale */
.pl-scale { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.pl-scale-t, .pl-scale-b { font: 500 9.5px/1 var(--pl-mono); letter-spacing: .1em; text-transform: uppercase; color: #8A8A8A; }
.pl-scale-t { color: var(--pl-teal); }
.pl-track { position: relative; flex: 1 1 auto; width: 26px; min-height: 160px; border-radius: 14px; border: 1px solid #333;
  background: linear-gradient(0deg, #1A1A1A, #13302C); cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.pl-fill { position: absolute; left: 3px; right: 3px; bottom: 3px; height: calc((100% - 6px) * .6); border-radius: 11px;
  background: linear-gradient(0deg, #0E6E62, var(--pl-teal)); box-shadow: 0 0 14px rgba(47, 199, 174, .45); }
.pl-tick { position: absolute; left: -7px; width: 5px; height: 1px; background: #555; }
.pl-tick--0 { bottom: 0; } .pl-tick--25 { bottom: 25%; } .pl-tick--50 { bottom: 50%; } .pl-tick--75 { bottom: 75%; } .pl-tick--100 { bottom: calc(100% - 1px); }
.pl-thumb { position: absolute; left: 50%; bottom: calc((100% - 30px) * .6); width: 40px; height: 30px; margin-left: -20px; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); display: grid; place-items: center; }
.pl-thumb i { font: 700 12px/1 var(--pl-mono); font-style: normal; color: #0B0B0B; }
.pl-track.is-drag .pl-thumb { transform: scale(1.06); }

.pl-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: #A3A3A3; }
.pl-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.pl-dot-da { background: #12A08F; box-shadow: 0 0 0 2px rgba(18, 160, 143, .25); }
.pl-dot-prl { background: #F0382A; box-shadow: 0 0 0 2px rgba(240, 56, 42, .25); }
.pl-dot-cell { background: #F6CDD2; border: 1.5px solid #9E2F45; }
.pl-say { margin: 10px 0 14px; padding: 10px 12px; border-left: 3px solid var(--pl-teal); background: #121212; border-radius: 0 10px 10px 0;
  font-size: 15px; line-height: 1.5; color: #E7E9EA; transition: border-color .3s; }
.pl-say.is-high { border-left-color: var(--pl-coral); }


.pl-fx { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-fx li { padding: 5px 10px; border: 1px solid #333; border-radius: 999px; font-size: 12.5px; color: #6E6E6E; transition: all .35s; }
.pl-fx li.is-on { color: #fff; border-color: var(--pl-coral); background: rgba(255, 90, 78, .12); box-shadow: 0 0 12px rgba(255, 90, 78, .3); }
.pl-note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: #8A8A8A; }

/* compounds */
.pl-comp h2 { font-family: var(--font-display, inherit); font-size: 26px; line-height: 1.2; color: #fff; margin-bottom: 14px; }
.pl-list { list-style: none; padding: 0; display: grid; gap: 10px; counter-reset: pl; }
.pl-c { counter-increment: pl; padding: 14px 16px; border: 1px solid var(--x-line, #2F3336); border-radius: 16px; background: #0B0B0B; }
.pl-c__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pl-c h3 { font-size: 18px; line-height: 1.25; color: #fff; }
.pl-c h3::before { content: counter(pl, decimal-leading-zero); margin-right: 10px; font: 500 12px var(--pl-mono); color: #6E6E6E; }
.pl-c p { font-size: 15px; line-height: 1.5; color: #CFCFCF; }
.pl-c .pl-c__src { margin-top: 6px; font-size: 13px; color: #8A8A8A; }
.pl-c__src a, .pl-more a { color: #9FD8CF; text-decoration: underline; text-underline-offset: 2px; }
.pl-tag { margin-left: auto; padding: 3px 9px; border-radius: 999px; font: 600 10.5px/1.3 var(--pl-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor; }
.pl-tag--food { color: var(--pl-gold); }
.pl-tag--prescription { color: var(--pl-coral); }
.pl-tag--supplement { color: #6EE7B7; }
.pl-tag--nootropic { color: #B9A2FF; }
.pl-tag--amino-acid { color: #7CC4FF; }
.pl-tag--hormone { color: #F59AC0; }
.pl-warn { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 90, 78, .08); border: 1px solid rgba(255, 90, 78, .35);
  font-size: 14px; line-height: 1.5; color: #E7E9EA; }
.pl-more { margin: 22px 0 8px; font-size: 15px; line-height: 1.6; color: #A3A3A3; }

@media (max-width: 520px) {
  .pl-field { padding: 12px 10px; border-radius: 16px; }
  .pl-field h2 { font-size: 19px; }
  .pl-main { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; }
  .pl-track { width: 22px; }
  .pl-thumb { width: 36px; margin-left: -18px; height: 28px; bottom: calc((100% - 28px) * .6); }
  .pl-read { grid-template-columns: auto auto; }
  .pl-spark { grid-column: 1 / -1; }
  .pl-zoom { right: 6px; top: 6px; padding: 5px 9px 5px 7px; font-size: 11px; }
  .pl-c h3 { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .pl-js .pl-target rect { animation: none; } }