/* K21: What drugs do to the brain. One lane per substance, drawn by js/drugs-brain.js from
   src/data/drugs-brain.json. Shares .mfig (K07) and .sci (J05). --tint is the substance's colour. */
.dbx { --tint: #ffb347; --way: .5; --inset: 1; --during: 0; --after: 1; --time: 1; }
.dbx__scene { display: grid; gap: 12px; padding: 14px; }
.dbx__lane { display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(255,214,180,.12); border-radius: 16px; background: rgba(255,214,180,.035); }
.article__body .dbx .dbx__name { margin: 0 0 .2rem; font-family: var(--font-sans); font-size: .78rem; line-height: 1.4; letter-spacing: .02em; color: rgba(255,232,210,.72); }
.dbx__name b { margin-right: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tint); }
.dbx svg { display: block; width: 100%; height: auto; }
.dbx svg text { font-family: var(--font-sans); fill: rgba(255,232,210,.8); }

/* Step 1: the way in */
.dbx__way { opacity: var(--way); }
.dbx__vessel { fill: none; stroke: rgba(255,214,180,.22); stroke-width: 7; stroke-linecap: round; }
.dbx__organ--liver { fill: #5a2a1c; stroke: #a8603c; stroke-width: 1.5; }
.dbx__organ--plain { fill: #4a2a24; stroke: #9a6450; stroke-width: 1.5; }
.dbx__organ--gut { fill: none; stroke: #7a5a48; stroke-width: 6; stroke-linecap: round; }
.dbx__mao path { fill: #8a7f78; }
.dbx__waylabel { font-size: 15px; }
.dbx__waysub { font-size: 13px; opacity: .75; }
.dbx svg .dbx__waysub--mao { fill: #c49cff; opacity: 1; }

/* The brain */
.dbx__cortex { fill: #2a1a1d; stroke: rgba(255,214,200,.45); stroke-width: 1.6; }
.dbx__cerebellum, .dbx__stem { fill: #24171a; stroke: rgba(255,214,200,.32); stroke-width: 1.4; }
.dbx__gyri { fill: none; stroke: rgba(255,214,200,.22); stroke-width: 1.6; stroke-linecap: round; }

/* Molecules travelling in */
.dbx__dot { fill: var(--tint); filter: drop-shadow(0 0 3px currentColor); opacity: 0; }
.dbx__dot--alt { fill: #ffd166; }
.dbx__dot--blocker { fill: #c49cff; }

/* Step 3: what scans show */
.dbx__regions { opacity: var(--during); }
.dbx__spot { fill: none; }
.dbx__spot--up { fill: var(--tint); opacity: .4; }
.dbx__spot--down { fill: #0b0d1c; opacity: .75; stroke: #8fa6ff; stroke-width: 1.4; stroke-dasharray: 3 3; }
.dbx__spot--dense { fill: var(--tint); opacity: .22; stroke: var(--tint); stroke-width: 1.2; }
.dbx__leader { fill: none; stroke: rgba(255,232,210,.35); stroke-width: 1; stroke-dasharray: 2 3; }
.dbx__rlabel { font-size: 14px; }
.dbx svg .dbx__rlabel--up { fill: var(--tint); }
.dbx__tag { font-size: 14px; }
.dbx__tag--during { opacity: var(--during); }
.dbx__tag--after { opacity: var(--after); }

/* Step 4: the shared time scale */
.dbx__time { opacity: var(--time); }
.dbx__axis, .dbx__tick { fill: none; stroke: rgba(255,214,180,.3); stroke-width: 1; }
.dbx__ticklabel { font-size: 12.5px; opacity: .7; }
.dbx__bar { fill: var(--tint); opacity: .65; }
.dbx__linger { fill: none; stroke: #ffd166; stroke-width: 1.6; stroke-dasharray: 4 4; }
.dbx__barlabel { font-size: 13px; }
.dbx svg .dbx__lingerlabel { font-size: 12px; fill: #ffd166; }

/* Step 2: the synapse, up close */
.dbx__zoom { margin-top: 4px; opacity: calc(.3 + .7 * var(--inset)); }
.dbx__cell { fill: rgba(255,214,180,.05); stroke: rgba(255,232,210,.3); stroke-width: 1.5; }
.dbx__celllabel, .dbx__gaplabel, .dbx__mechlabel, .dbx__pumplabel { font-size: 15px; opacity: .72; }
.dbx svg .dbx__zcap { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.dbx__ntdot { fill: rgba(190,225,255,.85); }
.dbx__pumpbody { fill: #3a2a33; stroke: rgba(255,232,210,.5); stroke-width: 1.4; }
.dbx__pumparrow { fill: none; stroke: rgba(255,232,210,.6); stroke-width: 1.6; stroke-linecap: round; }
.dbx__rec { fill: #3a2a33; stroke: rgba(255,232,210,.55); stroke-width: 1.4; }
.dbx__hole { fill: #1a1013; }
.dbx__lit { fill: var(--tint); opacity: 0; }
.dbx__key { fill: var(--tint); filter: drop-shadow(0 0 3px currentColor); opacity: 0; }
.dbx__reclabel { font-size: 13px; }

/* Picker for the comparison figure */
.dbx__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0 1.5rem 1rem; }
.dbx__pick { display: grid; gap: .3rem; }
.dbx__pick label { font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--color-text-2); }
.dbx__pick select { min-height: 48px; padding: .5rem .7rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-card); color: var(--color-text); font: inherit; font-size: .9rem; }
.article__body .dbx__pair { display: grid; gap: .5rem; }
.dbx__pair span { display: block; }
.dbx__pair b { color: var(--color-text); }

/* Page furniture */
.article__body .dbx-sub { margin-top: 2.5rem; }
.dbx-sub span { display: block; margin-top: .25rem; font-family: var(--font-sans); font-size: .8rem; font-weight: 400; letter-spacing: .02em; color: var(--color-text-2); }
.article__body .dbx-actions { margin: 1rem 0 0; }
.dbx-vs { font-size: .8rem; }
.article__body .dbx-note { padding: 1rem 1.25rem; border-left: 3px solid var(--color-ember); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--color-ember) 7%, transparent); font-size: .9rem; }
.dbx-table { margin: 1.25rem 0; overflow-x: auto; }
.dbx-table table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.dbx-table caption { margin-bottom: .6rem; text-align: left; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--color-text-2); }
.dbx-table th, .dbx-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.dbx-table thead th { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-2); white-space: nowrap; }
.dbx-table tbody th { font-weight: 600; white-space: nowrap; }
.dbx-table tbody th a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 901px) { .dbx--compare .dbx__scene { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .dbx__scene { padding: 10px; }
  .dbx__lane { padding: 10px; }
  .dbx__picks { grid-template-columns: 1fr; padding-inline: 1.1rem; }
  .dbx__waylabel, .dbx__rlabel, .dbx__celllabel, .dbx__gaplabel, .dbx__mechlabel { font-size: 19px; }
  .dbx__waysub, .dbx__ticklabel, .dbx__barlabel, .dbx__reclabel { font-size: 16px; }
  .dbx__tag { font-size: 17px; }
  .dbx-table { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .dbx__zoom, .dbx__regions, .dbx__time { transition: none; } }