.oc-svg { width: 100%; max-width: 640px; display: block; font-size: 12px; }
.oc-l   { text-anchor: end; dominant-baseline: middle; fill: #333; }
.oc-t   { text-anchor: middle; fill: #888; font-size: 10px; }
.oc-na  { dominant-baseline: middle; fill: #888; font-size: 9px; }
.oc-ax  { stroke: #e5e5e5; }
.oc-b   { fill: var(--c, #999); }
.oc-m   { fill: #000; }
.oc-ring { fill: #fff; stroke: #000; stroke-width: 1.2; }
.oc-hit { fill: transparent; }
.oc-link .oc-l { fill: #000; }
.oc .oc-g, .oc-link { cursor: pointer; }
.oc .oc-g:hover .oc-hit, .oc-link:hover .oc-hit { fill: #c5dfbc; }   /* same hover as the tissue atlas, rounded (rx in organ_chart.js) */
.oc-link, .oc-link:hover, .oc-link:hover .oc-l { text-decoration: none; }
.oc-link:hover .oc-l { font-weight: bold; }

.oc-leg { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin-bottom: 6px; }
.oc-leg span { display: flex; align-items: center; gap: 4px; }

.oc-pop {
    position: fixed; inset: 0;
    z-index: 2147483000 !important;
    display: flex;
    align-items: center; justify-content: center; background: rgba(0, 0, 0, .4); }
.oc-box { position: relative; width: min(680px, 95vw); max-height: 90vh; overflow: auto; background: #fff; padding: 16px 20px; border-radius: 6px; }
.oc-box h3 { margin: 0 0 8px; }
.oc-x { position: absolute; top: 6px; right: 12px; font-size: 22px; cursor: pointer; }