/* STS Brodmann map. Uses site tokens where present, with fallbacks so the widget
   also works standalone — the same approach as the frequency explorer. */
.sts-brod{
  --_accent:var(--accent,#2f7d4f); --_deep:var(--accent-deep,#1b5233);
  --_surface:var(--surface,#fff); --_surface2:var(--surface-2,#e9efe6);
  --_ink:var(--ink,#161d18); --_soft:var(--ink-soft,#4e5a51); --_faint:var(--ink-faint,#84918a);
  --_line:var(--line,#dce4d9);
  --_sans:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,system-ui,sans-serif;
  font-family:var(--_sans);color:var(--_ink);
  background:var(--_surface);border:1px solid var(--_line);border-radius:18px;
  padding:20px 20px 18px;
  box-shadow:0 1px 2px rgba(22,29,24,.04),0 16px 36px -26px rgba(27,82,51,.28)}
.sts-brod *{box-sizing:border-box}

.sts-brod-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sts-brod-views{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:var(--_surface2)}
.sts-brod-views button{font:inherit;font-size:13px;font-weight:700;border:0;cursor:pointer;
  padding:7px 15px;border-radius:999px;background:transparent;color:var(--_soft)}
.sts-brod-views button.active{background:var(--_accent);color:#fff}

/* ---------- the map ---------- */
.sts-brod-map{display:none}
.sts-brod-map.active{display:block}
.sts-brod-map svg{display:block;width:100%;height:auto}

/* The drawings are black ink on transparency, so in dark mode they are inverted to
   white ink rather than being swapped for a second set of files. */
:root[data-theme="dark"] .sts-brod .sts-brod-art{filter:invert(1) brightness(1.6)}

/* ---------- markers ---------- */
/* Numbers sit ON the anatomy as points, not as filled regions. A dot says "about
   here", which is what this tool can honestly claim; a tinted patch would assert a
   boundary nobody traced. */
.sts-brod-mark{cursor:pointer}
.sts-brod-mark:focus{outline:none}
.sts-brod-pill{
  fill:var(--_surface);stroke:currentColor;stroke-width:2.5;
  transition:fill .13s ease,stroke-width .13s ease}
.sts-brod-num{
  font:800 24px/1 var(--_sans);fill:currentColor;text-anchor:middle;
  pointer-events:none;transition:fill .13s ease}
.sts-brod-mark:hover .sts-brod-pill{fill:color-mix(in srgb,currentColor 18%,var(--_surface))}
.sts-brod-mark.active .sts-brod-pill{fill:currentColor;stroke-width:3.5}
.sts-brod-mark.active .sts-brod-num{fill:var(--_surface)}
.sts-brod-mark:focus-visible .sts-brod-pill{stroke:var(--_ink);stroke-width:4}

/* currentColor carries the lobe colour to both the ring and the number, so the marker
   and the legend agree without repeating the palette for each part. */
.sts-brod-mark.lobe-frontal   {color:#3d72b0}
.sts-brod-mark.lobe-central   {color:#b8801f}
.sts-brod-mark.lobe-parietal  {color:#3f8c5b}
.sts-brod-mark.lobe-temporal  {color:#b4503f}
.sts-brod-mark.lobe-occipital {color:#7355a0}
.sts-brod-mark.lobe-cingulate {color:#2f8c85}
.sts-brod-mark.lobe-limbic    {color:#9c6f3d}
/* Lifted on the dark ground, where the mid-tones above go muddy. */
:root[data-theme="dark"] .sts-brod .sts-brod-mark.lobe-frontal   {color:#7fb0e6}
:root[data-theme="dark"] .sts-brod .sts-brod-mark.lobe-central   {color:#e8b95c}
:root[data-theme="dark"] .sts-brod .sts-brod-mark.lobe-parietal  {color:#72c491}
:root[data-theme="dark"] .sts-brod .sts-brod-mark.lobe-temporal  {color:#e58a76}
:root[data-theme="dark"] .sts-brod .sts-brod-mark.lobe-occipital {color:#ab8fd8}
:root[data-theme="dark"] .sts-brod .sts-brod-mark.lobe-cingulate {color:#5fc4bc}
:root[data-theme="dark"] .sts-brod .sts-brod-mark.lobe-limbic    {color:#cfa06a}

/* ---------- legend ---------- */
.sts-brod-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 2px 0}
.sts-brod-key{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--_soft)}
.sts-brod-key i{width:11px;height:11px;border-radius:3px;display:inline-block}
.sts-brod-key.lobe-frontal i{background:#4f86c6}
.sts-brod-key.lobe-central i{background:#e0a33e}
.sts-brod-key.lobe-parietal i{background:#57a773}
.sts-brod-key.lobe-temporal i{background:#c96a5b}
.sts-brod-key.lobe-occipital i{background:#8a6fb0}
.sts-brod-key.lobe-cingulate i{background:#4aa8a0}
.sts-brod-key.lobe-limbic i{background:#b98a5a}

/* ---------- info panel ---------- */
.sts-brod-info{margin-top:16px;padding-top:16px;border-top:1px solid var(--_line);min-height:132px}
.sts-brod-hz{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sts-brod-n{font-size:20px;font-weight:800;letter-spacing:-.015em}
.sts-brod-lobe{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--_deep);background:var(--_surface2);padding:3px 9px;border-radius:999px}
.sts-brod-name{margin-top:3px;font-size:15.5px;font-weight:700;color:var(--_soft)}
.sts-brod-fn{margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--_ink)}
.sts-brod-sites{margin:9px 0 0;font-size:13.5px;color:var(--_soft)}
.sts-brod-sites strong{color:var(--_deep)}

.sts-brod-note{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--_faint)}

/* ---------- dark ---------- */
:root[data-theme="dark"] .sts-brod{background:var(--surface,#232b26)}

@media (max-width:560px){
  .sts-brod{padding:16px 14px 14px}
  .sts-brod-num{font-size:26px}
  .sts-brod-info{min-height:0}
}