.unit-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 56px;
  height: 56px;
  padding: 4px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: #01a75b;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 25px rgba(7, 30, 18, 0.2);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 180ms, box-shadow 180ms, opacity 180ms;
  -webkit-tap-highlight-color: transparent;
}
.unit-nav--previous { left: 18px; }
.unit-nav--next { right: 18px; }
.unit-nav-icon { position: absolute; inset: 5px; display: block; width: auto; height: auto; }
.unit-nav--previous .unit-nav-icon { transform: scaleX(-1); }
.unit-nav svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
.unit-nav svg path, .unit-nav svg circle {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.unit-nav:hover:not(:disabled), .unit-nav:focus-visible {
  background: #fff;
  box-shadow: 0 10px 30px rgba(1, 167, 91, 0.3);
}
.unit-nav:focus-visible { outline: 3px solid #01a75b; outline-offset: 4px; }
.unit-nav:disabled { cursor: default; opacity: 0.28; box-shadow: none; }
.unit-nav:disabled * { animation: none !important; }
.unit-nav .arrow-ring { stroke-width: 1; opacity: 0.3; transform-origin: 24px 24px; }

/* 1. A small outward pulse with a gently moving arrow. */
.unit-nav[data-arrow-style="pulse"] .arrow-ring { animation: bvi-arrow-pulse 2.2s ease-out infinite; }
.unit-nav[data-arrow-style="pulse"] .arrow-motion { animation: bvi-arrow-nudge 2.2s ease-in-out infinite; }
@keyframes bvi-arrow-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.25; }
  55% { transform: scale(1.1); opacity: 0.08; }
}
@keyframes bvi-arrow-nudge {
  0%, 72%, 100% { transform: translateX(0); }
  38% { transform: translateX(3px); }
}

/* 2. Two chevrons slide together. */
.unit-nav[data-arrow-style="chevron"] { border-radius: 13px; background: rgba(16, 31, 22, 0.75); color: #fff; }
.unit-nav[data-arrow-style="chevron"]:hover:not(:disabled) { background: rgba(1, 167, 91, 0.94); }
.unit-nav[data-arrow-style="chevron"] .arrow-motion { animation: bvi-chevron-slide 1.8s cubic-bezier(0.22, 0.72, 0.2, 1) infinite; }
.unit-nav[data-arrow-style="chevron"] .chevron-back { opacity: 0.4; }
@keyframes bvi-chevron-slide {
  0%, 100% { transform: translateX(-2px); opacity: 0.7; }
  50% { transform: translateX(3px); opacity: 1; }
}

/* 3. A line arrow draws itself inside a fine circle. */
.unit-nav[data-arrow-style="draw"] { background: rgba(255, 255, 255, 0.88); }
.unit-nav[data-arrow-style="draw"] .arrow-ghost { opacity: 0.22; }
.unit-nav[data-arrow-style="draw"] .arrow-drawn { stroke-dasharray: 54; stroke-dashoffset: 0; animation: bvi-arrow-draw 2.8s ease-in-out infinite; }
@keyframes bvi-arrow-draw {
  0%, 12% { stroke-dashoffset: 54; opacity: 0.4; }
  44%, 85% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -54; opacity: 0.4; }
}

/* 4. Three chevrons light up in the direction of travel. */
.unit-nav[data-arrow-style="trail"] { width: 64px; border-radius: 16px; background: rgba(255, 255, 255, 0.88); }
.unit-nav[data-arrow-style="trail"] path { animation: bvi-arrow-trail 1.65s ease-in-out infinite; }
.unit-nav[data-arrow-style="trail"] .trail-two { animation-delay: 0.18s; }
.unit-nav[data-arrow-style="trail"] .trail-three { animation-delay: 0.36s; }
@keyframes bvi-arrow-trail {
  0%, 75%, 100% { opacity: 0.18; }
  35% { opacity: 1; }
}

/* 5. A green capsule with a springing white arrow. */
.unit-nav[data-arrow-style="capsule"] { width: 70px; height: 48px; border-radius: 24px; color: #fff; background: rgba(1, 167, 91, 0.93); }
.unit-nav[data-arrow-style="capsule"]:hover:not(:disabled) { background: #008a49; }
.unit-nav[data-arrow-style="capsule"] .arrow-motion { animation: bvi-arrow-spring 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes bvi-arrow-spring {
  0%, 62%, 100% { transform: translateX(0) scaleX(1); }
  24% { transform: translateX(4px) scaleX(1.1); }
  42% { transform: translateX(-2px) scaleX(0.96); }
}

.unit-modal.unit-switching[open] { animation: none; }

/* Reserve room outside the window; arrow edges remain exactly 20px away. */
.unit-modal {
  --unit-nav-width: 56px;
  width: min(1920px, calc((100dvh - 48px) * 1.7777778), calc(100% - var(--unit-nav-width) - var(--unit-nav-width) - 64px));
  overflow: visible;
}
.gallery-modal {
  --unit-nav-width: 56px;
  width: min(1920px, calc((100dvh - 48px) * 1.7777778), calc(100% - var(--unit-nav-width) - var(--unit-nav-width) - 64px));
  overflow: visible;
}
:is(.unit-modal, .gallery-modal):has(.unit-nav[data-arrow-style="trail"]) { --unit-nav-width: 64px; }
:is(.unit-modal, .gallery-modal):has(.unit-nav[data-arrow-style="capsule"]) { --unit-nav-width: 70px; }
:is(.unit-modal, .gallery-modal) .unit-nav { width: var(--unit-nav-width); }
:is(.unit-modal, .gallery-modal) .unit-nav--previous { left: calc(-20px - var(--unit-nav-width)); }
:is(.unit-modal, .gallery-modal) .unit-nav--next { right: calc(-20px - var(--unit-nav-width)); }

/* Centre the image, arrows and separate thumbnail column as one group. */
.unit-modal:has(.unit-gallery) {
  --unit-gallery-width: clamp(180px, 14vw, 240px);
  left: calc(var(--unit-gallery-width) + 20px);
  width: min(1920px, calc((100dvh - 48px) * 1.7777778), calc(100vw - var(--unit-gallery-width) - var(--unit-nav-width) - var(--unit-nav-width) - 104px));
}

/* Keep opened thumbnail previews on the exact same 16:9 desktop frame. */
.gallery-modal {
  --unit-gallery-width: clamp(180px, 14vw, 240px);
  left: calc(var(--unit-gallery-width) + 20px);
  width: min(1920px, calc((100dvh - 48px) * 1.7777778), calc(100vw - var(--unit-gallery-width) - var(--unit-nav-width) - var(--unit-nav-width) - 104px));
}

@media (max-width: 980px) {
  .unit-modal:has(.unit-gallery),
  .gallery-modal { --unit-gallery-width: clamp(100px, 14vw, 136px); }
}

@media (max-width: 680px), (max-width: 900px) and (max-height: 550px) {
  .unit-nav { width: 44px; height: 44px; padding: 2px; }
  .unit-nav--previous { left: 10px; }
  .unit-nav--next { right: 10px; }
  .unit-nav[data-arrow-style="trail"] { width: 50px; }
  .unit-nav[data-arrow-style="capsule"] { width: 54px; height: 40px; }
  :is(.unit-modal, .gallery-modal) { --unit-nav-width: 44px; width: calc(100% - var(--unit-nav-width) - var(--unit-nav-width) - 64px); }
  :is(.unit-modal, .gallery-modal):has(.unit-nav[data-arrow-style="trail"]) { --unit-nav-width: 50px; }
  :is(.unit-modal, .gallery-modal):has(.unit-nav[data-arrow-style="capsule"]) { --unit-nav-width: 54px; }
}
@media (max-width: 680px) {
  .unit-modal .unit-modal__surface .detail-heading { left: 16px; right: 16px; bottom: 80px; }
  .unit-modal .unit-modal__surface .detail-heading h2 { max-width: 100%; font-size: clamp(20px, 6vw, 32px); }
  .unit-modal:has(.unit-gallery) {
    --unit-gallery-width: 68px;
    left: calc(var(--unit-gallery-width) + 12px);
    width: calc(100vw - var(--unit-gallery-width) - var(--unit-nav-width) - var(--unit-nav-width) - 72px);
  }
  .gallery-modal {
    --unit-gallery-width: 68px;
    left: calc(var(--unit-gallery-width) + 12px);
    width: calc(100vw - var(--unit-gallery-width) - var(--unit-nav-width) - var(--unit-nav-width) - 72px);
  }
  .unit-modal .unit-gallery { right: calc(100% + var(--unit-nav-width) + 32px); }
}
@media (max-width: 680px) and (orientation: portrait) {
  .unit-modal { height: auto; aspect-ratio: 4 / 5; max-height: 88dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .unit-nav, .unit-nav * { animation: none !important; transition: none !important; }
  .unit-nav .arrow-drawn { stroke-dashoffset: 0; }
}