/* JAK-REL-001/T1/1.2 — responsive navigation and reachable image failure state */
@media(max-width:760px){.site-primary-nav{box-sizing:border-box;width:100%;max-width:100%;min-width:0;flex-wrap:wrap!important;align-items:center;justify-content:flex-start;overflow:visible!important;gap:.3rem}.site-primary-nav a{box-sizing:border-box;flex:0 1 auto!important;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}}
@media(max-width:520px){header.sticky>div.max-w-5xl.mx-auto.px-4.py-3.flex.items-center.justify-between{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem;width:100%;min-width:0;padding:.75rem}.site-primary-nav{gap:.25rem;padding:.45rem .5rem}.site-primary-nav a{padding:.45rem .6rem;font-size:.82rem;line-height:1.25}header.sticky>div.max-w-5xl.mx-auto.px-4.py-3.flex.items-center.justify-between>nav{display:flex;box-sizing:border-box;width:100%;max-width:100%;min-width:0;flex-wrap:wrap;align-items:center;gap:.25rem;overflow:visible}header.sticky>div.max-w-5xl.mx-auto.px-4.py-3.flex.items-center.justify-between>nav>a{box-sizing:border-box;flex:0 1 auto!important;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}#lightbox-modal>div:first-child{width:min(100%,56rem);max-height:calc(100dvh - 1rem)}#lightbox-viewer{height:clamp(12rem,52dvh,40rem);min-height:12rem;max-height:75dvh}}
@media(max-width:520px){main nav.flex.items-center.gap-2.overflow-x-auto.whitespace-nowrap{box-sizing:border-box;width:100%;max-width:100%;min-width:0;flex-wrap:wrap;gap:.35rem;overflow-x:visible;white-space:normal}main nav.flex.items-center.gap-2.overflow-x-auto.whitespace-nowrap>*{box-sizing:border-box;flex:0 1 auto;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere}}
#lightbox-viewer{position:relative;box-sizing:border-box;width:100%;height:clamp(14rem,52vh,40rem);height:clamp(14rem,52dvh,40rem);min-height:14rem;max-height:75vh;max-height:75dvh}
#lightbox-modal[data-photo-state=unavailable] #lightbox-viewer{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}
#lightbox-modal[data-photo-state=unavailable] #lightbox-loader{position:static!important;inset:auto!important;z-index:4;display:flex!important;box-sizing:border-box;width:100%;max-width:min(100%,38rem);justify-content:center;align-items:center;flex-wrap:wrap;gap:.75rem;margin:auto;padding:1rem;border-radius:1rem;background:rgba(0,0,0,.9);text-align:center;font-size:.95rem;line-height:1.5}
#lightbox-modal[data-photo-state=unavailable] #lightbox-loader .animate-spin{display:none!important}
#lightbox-modal[data-photo-state=unavailable] #lightbox-status-text{min-width:0;white-space:normal;overflow-wrap:anywhere}
#lightbox-modal[data-photo-state=unavailable] #lightbox-retry-btn{flex:0 1 auto;min-width:11rem;min-height:3rem;padding:.65rem 1rem}

/* Keep long taxonomic family names and their links inside the atlas column. */
@media(max-width:520px){main .flex.items-center.justify-between.pb-4.mb-4.border-b.border-slate-800{box-sizing:border-box;align-items:flex-start;flex-wrap:wrap;justify-content:flex-start;gap:.5rem}main .flex.items-center.justify-between.pb-4.mb-4.border-b.border-slate-800>.flex.items-center.gap-3{box-sizing:border-box;flex:1 1 100%;min-width:0}main .flex.items-center.justify-between.pb-4.mb-4.border-b.border-slate-800>.flex.items-center.gap-3>div{box-sizing:border-box;flex:1 1 0;min-width:0}main .flex.items-center.justify-between.pb-4.mb-4.border-b.border-slate-800 h2{min-width:0;overflow-wrap:anywhere}main .flex.items-center.justify-between.pb-4.mb-4.border-b.border-slate-800>a{box-sizing:border-box;flex:0 1 auto;max-width:calc(100% - 2.75rem);margin-left:2.75rem;white-space:normal;overflow-wrap:anywhere}}


/* JAK-REL-001/T1 1.3: keep the full photo region visible when its local image fails. */
.species-photo-fallback[hidden]{display:none!important}
.species-photo-fallback{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:center;height:16rem;padding:1rem;pointer-events:none}
.species-photo-fallback>div{pointer-events:none}
.species-photo-fallback button{pointer-events:auto}
.species-photo-fallback button:disabled{cursor:wait;opacity:.65}
[data-species-photo][data-photo-state=error] [data-photo-image],[data-species-photo][data-photo-state=retrying] [data-photo-image]{visibility:hidden}
@media(min-width:640px){.species-photo-fallback{height:24rem}}