/* AdhdNest — page-specific styles for /brain.html
   (the ADHD-vs-typical dopamine-pathway comparison).

   Extracted from the standalone preview. Everything the site shell already
   provides — typography, .wrap, .read, .chip, .article-head, .sources — is
   deliberately absent here so this file cannot fight style.css.
   The three visualisation-only colours that the shell does not define
   (--deep #0E1420, --deep-2 #161F2E, --blue #3E8BE0, --red #E85440,
   --gray #9AA3AF) are inlined as literals. */

/* ---------- stage ---------- */
.stage{
  background:
    radial-gradient(72% 58% at 50% 8%, rgba(196,169,111,.09) 0%, rgba(196,169,111,0) 60%),
    linear-gradient(180deg,#0A0C11 0%,#05070A 48%,#000 100%);
  border:1px solid rgba(196,169,111,.28);
  box-shadow:inset 0 0 120px 40px rgba(0,0,0,.7);
  margin:34px 0 0;padding:26px 22px 22px;position:relative;overflow:hidden;
}
.stage::before{content:'';position:absolute;inset-inline-start:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,#9AA3AF,#3E8BE0,#E85440)}
.brains{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.brains{grid-template-columns:1fr}}
.brain-cell{position:relative;text-align:center}
.brain-cell h3{color:#F1EAD9;font-size:1.16rem;margin:0 0 4px}
.brain-cell .sub{color:#9FB0C4;font-size:.83rem;font-weight:700;letter-spacing:.04em;margin-bottom:10px}
.brain-cell.adhd h3{color:#FFD9CF}
canvas.bc{width:100%;height:380px;display:block;background:transparent;touch-action:pan-y}
@media(max-width:820px){canvas.bc{height:320px}}
.fallback{display:none;color:#9FB0C4;font-size:.9rem;padding:40px 20px}
.building .brain-cell{position:relative}
.building canvas.bc{opacity:0}
.buildmsg{display:none;position:absolute;inset-block-start:46%;inset-inline:0;text-align:center;
  color:#8FA3B8;font-size:.86rem;font-weight:700}
.building .buildmsg{display:block}
.no-webgl canvas.bc{display:none}
.no-webgl .fallback{display:block}

.readout{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;text-align:start}
.readout li{display:flex;align-items:center;gap:10px;font-size:.83rem;color:#C2CDDA;
  background:rgba(255,255,255,.04);border:1px solid rgba(196,169,111,.16);padding:7px 11px}
.readout .dot{width:9px;height:9px;border-radius:50%;background:#E85440;flex:0 0 auto}
.readout .nm{flex:1 1 auto;font-weight:700}
.readout .vl{font-variant-numeric:tabular-nums;font-weight:800;color:#F0E7D6}
.readout .dl{font-size:.76rem;font-weight:800;color:#FF9E86;min-width:52px;text-align:end}
.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.ctl{
  background:rgba(255,255,255,.06);color:#E9E2D2;border:1px solid rgba(196,169,111,.4);
  padding:10px 18px;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;min-height:44px;
}
.ctl:hover{background:rgba(255,255,255,.12)}
.ctl[aria-pressed="true"]{background:var(--gold-line);color:#20180C;border-color:var(--gold-line)}
.hint{color:#8C9BAD;font-size:.8rem;text-align:center;margin-top:12px}

.legend3{display:flex;gap:8px 26px;flex-wrap:wrap;justify-content:center;margin-top:16px;
  font-size:.84rem;font-weight:700;color:#C8D2DE}
.legend3 span{display:inline-flex;align-items:center;gap:8px}
.legend3 i{width:11px;height:11px;border-radius:50%;display:inline-block}
.lg-gray{background:#9AA3AF} .lg-blue{background:#3E8BE0} .lg-red{background:#E85440}
/* the same hot scale the 3D regions are coloured with, so the picture is readable */
.legend3 .cbar{width:132px;height:11px;border-radius:6px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(to left,#2B0C33,#741646,#B8244A,#F05E3A,#FF992C,#FFD14D,#FFF6D2)}
.legend3 em{font-style:normal;font-weight:600;color:#9AA8B8;font-size:.78rem}

/* ---------- data ---------- */
.data{margin-top:44px}
.bars{display:grid;gap:16px;margin-top:22px}
.bar-row{background:var(--card);border:1px solid var(--hairline);padding:16px 18px}
.bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.bar-head b{font-size:1rem}
.bar-head .delta{font-size:.84rem;font-weight:800;color:#E85440}
.track{position:relative;height:16px;background:rgba(90,75,50,.1);margin-bottom:7px}
.fill{position:absolute;inset-inline-start:0;top:0;height:100%;transition:width 1.1s cubic-bezier(.22,.9,.25,1);width:0}
.fill.ctrl{background:linear-gradient(90deg,#7FA9D8,#3E8BE0)}
.fill.adhd{background:linear-gradient(90deg,#E8917F,#E85440)}
.bar-lbl{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);font-weight:700}

.caveat{background:rgba(243,238,228,.8);border:1px solid var(--hairline);
  border-inline-start:3px solid var(--brass);padding:22px 24px;margin:34px 0}
.caveat h3{font-size:1.1rem;margin-top:0}
.caveat ul{margin:0;padding-inline-start:20px}
.caveat li{margin-bottom:.5em;font-size:.96rem;color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){ .fill{transition:none} }