/* Anatomy pictures: the card inside a lesson and the full-screen labelled viewer. */

/* ---- card inside the lesson ---- */
.rc-photo { margin: 0 0 1.4rem; }
.rc-photo-btn { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--s21-border); border-radius: 16px; overflow: hidden; cursor: zoom-in; background: #050b18; box-shadow: var(--card-shadow); font: inherit; color: inherit; }
.rc-photo-btn img { display: block; width: 100%; height: clamp(260px, 52vw, 430px); object-fit: contain; background: #050b18; transition: transform .35s var(--ease, ease); }
.rc-photo-btn:hover img { transform: scale(1.02); }
.rc-photo-btn:focus-visible { outline: 3px solid var(--s21-accent); outline-offset: 3px; }
.rc-photo-tap { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; background: var(--s21-accent, #EF476F); color: #fff; font: 700 .82rem var(--font-body, system-ui); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.rc-photo figcaption { margin: .55rem .2rem 0; font-size: .86rem; color: var(--s21-text-soft); text-align: center; }

/* ---- full-screen viewer ---- */
html.av-lock { overflow: hidden; }
.av-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; background: #050b18; }
.av-overlay[hidden] { display: none; }
.av-panel { display: flex; flex-direction: column; width: min(1180px, 100%); height: 100%; margin: 0 auto; color: #eef2f7; font-family: var(--font-body, system-ui, sans-serif); }
.av-head { flex: none; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; padding-top: max(.7rem, env(safe-area-inset-top)); }
.av-title { flex: 1; margin: 0; font: 700 1.05rem/1.25 var(--font-display, var(--font-body, system-ui)); color: #fff; }
.av-btn { appearance: none; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; font: 700 .8rem var(--font-body, system-ui); padding: .5rem .85rem; border-radius: 999px; cursor: pointer; min-height: 40px; }
.av-btn:hover { background: rgba(255, 255, 255, .2); }
.av-btn:focus-visible, .av-list button:focus-visible, .av-pin:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.av-close { width: 40px; padding: 0; font-size: 1rem; }

.av-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 0 .9rem 1rem; -webkit-overflow-scrolling: touch; }
.av-stagewrap { display: flex; justify-content: center; }
.av-stage { position: relative; width: fit-content; max-width: 100%; line-height: 0; border-radius: 14px; touch-action: manipulation; }
.av-stage img { display: block; max-width: 100%; height: auto; border-radius: 14px; user-select: none; -webkit-user-drag: none; }

.av-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; line-height: 1; z-index: 2; }
.av-pin::before { content: ''; position: absolute; inset: -9px; }                    /* bigger touch target */
.av-num { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #ef476f; color: #fff; font: 800 .72rem var(--font-body, system-ui); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .55); transition: transform .15s; }
.av-pin:hover .av-num { transform: scale(1.15); }
.av-pin.on { z-index: 5; }
.av-pin.on .av-num { background: #ffd166; color: #14213d; transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255, 209, 102, .35), 0 2px 8px rgba(0, 0, 0, .55); }
.av-tag { position: absolute; display: none; white-space: nowrap; padding: .2rem .55rem; border-radius: 7px; background: rgba(6, 12, 28, .86); color: #fff; font: 700 .74rem/1.25 var(--font-body, system-ui); border: 1px solid rgba(255, 255, 255, .25); pointer-events: none; }
.av-names .av-tag, .av-pin.on .av-tag, .av-pin:hover .av-tag { display: block; }
.av-pin[data-side="r"] .av-tag { left: calc(100% + 5px); top: 50%; transform: translateY(-50%); }
.av-pin[data-side="l"] .av-tag { right: calc(100% + 5px); top: 50%; transform: translateY(-50%); }
.av-pin[data-side="t"] .av-tag { bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.av-pin[data-side="b"] .av-tag { top: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.av-pin.on .av-tag { background: #ffd166; color: #14213d; border-color: #ffd166; }

.av-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem; }
.av-list button { appearance: none; width: 100%; display: flex; align-items: center; gap: .6rem; text-align: left; padding: .5rem .7rem; min-height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #eef2f7; font: 600 .88rem var(--font-body, system-ui); cursor: pointer; }
.av-list button:hover { background: rgba(255, 255, 255, .14); }
.av-list button.on { background: #ffd166; color: #14213d; border-color: #ffd166; }
.av-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ef476f; color: #fff; font: 800 .72rem var(--font-body, system-ui); }
.av-list button.on .av-n { background: #14213d; color: #ffd166; }

.av-info { flex: none; padding: .75rem .9rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .08); border-top: 1px solid rgba(255, 255, 255, .15); min-height: 74px; display: flex; align-items: center; }
.av-hint { margin: 0; color: #b8c4d6; font-size: .9rem; }
.av-card { display: flex; gap: .8rem; align-items: flex-start; }
.av-card strong { display: block; font-size: 1.02rem; color: #fff; }
.av-card p { margin: .15rem 0 0; font-size: .92rem; color: #dbe3ef; line-height: 1.45; }

/* wide screens: picture on the left, list on the right, picture sized to fit the screen */
@media (min-width: 900px) {
  .av-body { flex-direction: row; align-items: flex-start; overflow: hidden; }
  .av-stagewrap { flex: 1; min-width: 0; justify-content: center; }
  .av-stage img { max-height: calc(100vh - 56px - 96px - 16px); width: auto; }
  .av-list { flex: none; width: 280px; max-height: calc(100vh - 56px - 96px - 16px); overflow-y: auto; grid-template-columns: 1fr; padding-right: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .av-num, .rc-photo-btn img { transition: none; } }