/* ── Chickpea tissue atlas ──────────────────────────────────────────────
   Appearance for the anatomy plate. anatomy.js only toggles classes; every
   visual decision lives here so both themes and every page stay consistent. */

.chickpea-anatomy {
    width: 100%;
    min-height: 120px;
}

.chickpea-anatomy svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Organs sit at rest until something is selected. Dimming everything when
   nothing is chosen would read as "no data" rather than "nothing asked yet". */
.chickpea-anatomy .organ {
    transition: opacity .28s ease;
}

.chickpea-anatomy svg.has-selection .organ {
    opacity: .17;
}

/* Lit organs simply return to full opacity. No filter of any kind is applied
   to the artwork: the old url(#organ-glow) never resolved once ids were
   namespaced, and that dangling reference is what stopped Safari rendering
   highlighted organs at all. */
.chickpea-anatomy svg.has-selection .organ.is-active,
.chickpea-anatomy svg.all-active .organ {
    opacity: 1;
}

/* Plate typography — sized in user units, so it scales with the drawing. */
.chickpea-anatomy .band-title {
    font-family: "Montserrat", "Helvetica Neue", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    fill: #a08160;
}

.chickpea-anatomy .organ-label {
    font-family: "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 8.5px;
    font-weight: 500;
    text-anchor: middle;
    fill: #8a7361;
}

.chickpea-anatomy svg.has-selection .organ.is-active .organ-label,
.chickpea-anatomy svg.all-active .organ .organ-label {
    fill: #833c0d;
    font-weight: 700;
}

body.dark-mode .chickpea-anatomy .band-title { fill: #b08a63; }
body.dark-mode .chickpea-anatomy .organ-label { fill: #9c8a76; }
body.dark-mode .chickpea-anatomy svg.has-selection .organ.is-active .organ-label,
body.dark-mode .chickpea-anatomy svg.all-active .organ .organ-label { fill: #ffb87a; }

/* ── Framing ─────────────────────────────────────────────────────────── */
.anatomy-panel {
    background: #fffdf9;
    border: 1.5px solid var(--coe-border, #e6cbb4);
    border-radius: 12px;
    padding: 18px 20px 14px;
}

body.dark-mode .anatomy-panel {
    background: #171a21;
    border-color: #3a2a1a;
}

.anatomy-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin-bottom: .5rem;
}

.anatomy-panel-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--coe-primary, #833c0d);
}

body.dark-mode .anatomy-panel-title { color: #ffb87a; }

.anatomy-panel-note {
    font-size: .78rem;
    color: #7a6150;
    margin: 0;
}

body.dark-mode .anatomy-panel-note { color: #b8a595; }

/* Wide plate: let it scroll rather than squeeze on narrow screens. */
.anatomy-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.anatomy-scroll .chickpea-anatomy svg {
    min-width: 720px;
}

/* ── Legend / group filters ──────────────────────────────────────────── */
.anatomy-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
}

.anatomy-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    font-weight: 600;
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1.5px solid rgba(131, 60, 13, .22);
    background: transparent;
    color: #7a6150;
    cursor: default;
}

.anatomy-chip .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.anatomy-chip.lit {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 13%, transparent);
}

.anatomy-chip[data-code="RT"].lit  { color: #c2610f; }
.anatomy-chip[data-code="GT"].lit  { color: #2f7d32; }
.anatomy-chip[data-code="FDS"].lit { color: #7b3fa0; }
.anatomy-chip[data-code="FP"].lit  { color: #b0206b; }
.anatomy-chip[data-code="ST"].lit  { color: #a8890c; }

body.dark-mode .anatomy-chip { border-color: #4a3520; color: #b8a595; }
body.dark-mode .anatomy-chip[data-code="RT"].lit  { color: #e08a3a; }
body.dark-mode .anatomy-chip[data-code="GT"].lit  { color: #6cc46f; }
body.dark-mode .anatomy-chip[data-code="FDS"].lit { color: #b481d8; }
body.dark-mode .anatomy-chip[data-code="FP"].lit  { color: #e56ba3; }
body.dark-mode .anatomy-chip[data-code="ST"].lit  { color: #d9be4a; }

/* Interactive variant, used on the standalone visualisation page. */
.anatomy-chip.is-button {
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.anatomy-chip.is-button:hover { border-color: var(--coe-primary, #833c0d); }
.anatomy-chip.is-button:focus-visible {
    outline: 2px solid var(--coe-accent, #c55b11);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .chickpea-anatomy .organ { transition: none; }
}