/* annona.co.uk - Peel It (anatomy) exhibit: cross-section stage, Peel slider, hotspots and the part info panel */

.anatomy-wrap{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.anatomy-wrap{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}}

/* ---------- the fruit ---------- */
.anatomy-stage{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:var(--radius);background:radial-gradient(ellipse at 50% 40%,#fbf3dc 0%,var(--cream) 55%,#f3e4c0 100%);overflow:visible}
.anatomy-svg{display:block;width:100%;height:100%}
.anatomy-svg .peel-rect{transition:width .45s cubic-bezier(.3,.9,.4,1)}
.anatomy-svg .part-shape{transition:filter .25s}
.anatomy-svg .is-hit{stroke:var(--accent);stroke-width:6;stroke-linejoin:round;filter:drop-shadow(0 0 7px var(--accent))}
.anatomy-svg .seeds.is-hit{stroke:none}
.anatomy-svg .seeds.is-hit .seed{stroke:var(--accent);stroke-width:4}

/* ---------- hotspots ---------- */
.hotspot{position:absolute;translate:-50% -50%;width:48px;height:48px;padding:0;border:3px solid #fff;border-radius:50%;background:var(--accent);color:#fff;font:900 1.25rem/1 var(--font-display);cursor:pointer;box-shadow:0 4px 12px rgba(20,40,20,.3);display:grid;place-items:center;z-index:2}
.hotspot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--accent);opacity:0;animation:ping 1.8s ease-out infinite}
.hotspot.is-seen{background:var(--green-600)}
.hotspot.is-seen::after,.is-still .hotspot::after{animation:none}
.hotspot[aria-pressed="true"]{border-color:var(--green-900)}
.hotspot:hover{transform:scale(1.08)}
/* Keyboard focus must beat the button's own orange and its orange ping: a dark seed-brown ring on a paper halo
   (5.3:1+ against the fruit and the button face), the ping paused so the focused badge is the only still one. */
.hotspot:focus-visible{outline:3px solid var(--seed);outline-offset:3px;box-shadow:0 0 0 6px var(--paper),0 0 0 9px var(--seed);transform:scale(1.08)}
.hotspot:focus-visible::after{animation:none}
@keyframes ping{0%{transform:scale(.7);opacity:.9}80%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.hotspot::after{animation:none}}

/* ---------- Peel slider ---------- */
.anatomy-view{display:flex;flex-direction:column}
.peel-row{order:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;margin-top:.75rem;font-weight:800;color:var(--green-900)}
.peel-row label{font-size:1.1em}
.peel-readout{font-size:.95em;white-space:nowrap;min-width:7.5ch;text-align:right}
.peel-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:48px;margin:0;background:transparent;cursor:pointer}
.peel-row input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:linear-gradient(90deg,var(--green-600),var(--custard))}
.peel-row input[type=range]::-moz-range-track{height:14px;border-radius:999px;background:linear-gradient(90deg,var(--green-600),var(--custard))}
.peel-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:36px;height:36px;margin-top:-11px;border-radius:50%;border:4px solid #fff;background:var(--accent);box-shadow:0 3px 8px rgba(20,40,20,.3)}
.peel-row input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;border:4px solid #fff;background:var(--accent);box-shadow:0 3px 8px rgba(20,40,20,.3)}

/* ---------- info panel ---------- */
.part-info{min-height:8rem;padding:1rem 1.25rem;background:var(--cream);border-radius:var(--radius);border:2px solid transparent}
.part-info h3{margin:0 0 .5rem;font:800 clamp(1.25rem,1rem + 1vw,1.7rem)/1.15 var(--font-display);color:var(--green-900)}
.part-info p{max-width:46ch}
.part-info .blurb{font-weight:700}
.part-info .kid{margin-bottom:.75rem}
.part-info .found{margin:.75rem 0 0;font-size:.95em;font-weight:800;color:var(--green-900)}
.part-info.is-warning{border-color:var(--accent);background:#fff8e8}
.part-info .warning{max-width:none}
.part-info .more-line{margin:.25rem 0 .75rem}
.part-info .more-line summary{cursor:pointer;font-weight:800;min-height:48px;display:flex;align-items:center;gap:.5rem;list-style:none;color:var(--green-900)}
.part-info .more-line summary::-webkit-details-marker{display:none}
.part-info .more-line summary::before{content:"▸" / "";display:inline-block;color:var(--green-600);transition:transform .2s}
.part-info .more-line[open] summary::before{transform:rotate(90deg)}
.part-info .more-line p{font-size:.92em;max-width:60ch}
.part-info .read-btn{margin-top:0}

@media(max-width:560px){
  .part-info{padding:.9rem 1rem}
  .peel-row{gap:.5rem}
}