/* Hihaze interactive components. Page layout and typography come from the
   unmodified Academic Project Page Template in vendor/template.css. */

[hidden] { display: none !important; }
.skip-link { position: absolute; top: -4rem; left: 1rem; z-index: 10; padding: .75rem 1rem; background: white; }
.skip-link:focus { top: 1rem; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #3273dc; outline-offset: 3px; }
.link-block button { margin: 5px 0; }

/* Bulma's hero containers otherwise keep the controls' intrinsic width. */
#results > .container, #fade-results > .container,
#quantitative-results > .container { width: 100%; min-width: 0; }

/* Approved centered crops share a 4:3 frame across both galleries. */
.carousel { width: 100%; margin: 1.5rem auto 0; }
.carousel-window { overflow: hidden; position: relative; }
.carousel-track { display: flex; align-items: flex-start; transition: transform .5s cubic-bezier(.2, .65, .3, 1); }
.carousel-page { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.slide { min-width: 0; }
.image-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; isolation: isolate; overflow: hidden; }
.image-stage img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.image-stage .restored { position: absolute; inset: 0; }
.manual .restored { clip-path: inset(0 0 0 var(--split, 50%)); }
.fade .restored { opacity: var(--fade, 0); }
.image-stage[aria-busy="true"]::after { content: "Loading comparison…"; position: absolute; inset: 0; display: grid; place-items: center; background: #f5f5f5; color: #4a4a4a; }
.image-tag, .fade-state { position: absolute; z-index: 2; top: 1rem; padding: .4rem .6rem; color: white; background: rgb(0 0 0 / 55%); font-size: .65rem; font-weight: 600; letter-spacing: .04em; pointer-events: none; }
.image-tag.left, .fade-state { left: 1rem; }
.image-tag.right { right: 1rem; }
.fade-state span { margin: 0 .5rem; }
.divider { position: absolute; top: 0; bottom: 0; left: clamp(1px, var(--split, 50%), calc(100% - 1px)); width: 2px; background: white; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 43px; height: 43px; border: 2px solid white; border-radius: 50%; background: rgb(0 0 0 / 25%); color: white; display: grid; place-items: center; font-size: 25px; white-space: pre; }
.scrubber { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; touch-action: none; }
.image-stage:has(.scrubber:focus-visible) { outline: 3px solid #3273dc; outline-offset: -4px; }
.gallery-step { position: absolute; top: var(--arrow-y, 50%); transform: translateY(-50%); z-index: 5; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #dbdbdb; border-radius: 50%; background: rgb(255 255 255 / 95%); color: #363636; font-size: 26px; line-height: 1; }
.gallery-step:hover { background: #f5f5f5; }
.gallery-step.previous { left: 8px; }
.gallery-step.next { right: 8px; }
.slide-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 0; min-height: 48px; font-size: .75rem; }
.slide-status { margin: 0; color: #6b6b6b; }
.slide-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.slide-actions button { border: 0; border-radius: 4px; padding: .25rem .4rem; background: transparent; color: #4a4a4a; }
.slide-actions button:hover { background: #f5f5f5; }
.slide-actions button:disabled { opacity: .5; }
.carousel-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .75rem 0; border-top: 1px solid #eee; }
.carousel-caption { display: none; }
.carousel-count { grid-column: 3; justify-self: end; color: #6b6b6b; font-size: .75rem; font-variant-numeric: tabular-nums; }
.carousel-dots { grid-column: 2; display: flex; gap: 10px; }
.carousel-dots button { position: relative; width: 8px; height: 8px; border: 0; padding: 0; border-radius: 50%; background: #dbdbdb; }
.carousel-dots button::before { content: ""; position: absolute; inset: -8px -4px; }
.carousel-dots button[aria-current="true"] { background: #363636; }
.loading { padding: 2rem; text-align: center; }

.fade .image-stage { cursor: pointer; touch-action: pan-y; }
.fade-trigger { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .65rem; padding: 0; border: 0; background: transparent; color: white; font-size: .75rem; white-space: nowrap; }
.play-icon { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid white; border-radius: 50%; background: rgb(255 255 255 / 20%); backdrop-filter: blur(8px); font-size: 20px; }
.trigger-text { padding: .4rem .75rem; background: rgb(0 0 0 / 55%); border-radius: 20px; }
.fade-trigger:hover .play-icon { background: rgb(255 255 255 / 35%); }
.fade-trigger:focus-visible { outline-color: white; outline-offset: 8px; }

.paper-figure { margin-top: 1.5rem; }
.image-zoom { display: block; border: 0; padding: 0; width: 100%; background: white; cursor: zoom-in; }
.paper-figure img { display: block; width: 100%; height: auto; }
.paper-figure figcaption { text-align: center; margin-top: 1rem; }
.results-disclosure > summary { cursor: pointer; font-size: 1.5rem; font-weight: 600; }
.results-disclosure + .results-disclosure { margin-top: 2rem; }
#more-results > summary { cursor: pointer; }
.disclosure-content { padding-top: 1.5rem; }
.benchmark-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.benchmark-tabs button { padding: .4rem .8rem; border: 1px solid #dbdbdb; border-radius: 4px; background: white; color: #363636; }
.benchmark-tabs button[aria-pressed="true"] { background: #363636; border-color: #363636; color: white; }
.table-scroll { overflow-x: auto; }
#benchmark-table { width: 100%; white-space: nowrap; font-size: .9rem; }
#benchmark-table caption { text-align: left; padding-bottom: .75rem; color: #6b6b6b; font-size: .8rem; }
#benchmark-table th, #benchmark-table td { padding: .65rem .75rem; vertical-align: middle; }
#benchmark-table th:first-child { min-width: 130px; }
#benchmark-table td, #benchmark-table thead th:not(:first-child) { text-align: right; }
#benchmark-table .ours-row th, #benchmark-table .ours-row td { font-weight: 700; }
.best, .legend-best { color: #c92130; }
.second, .legend-second { color: #245cba; }
.fine-print { margin-top: 1rem; font-size: .8rem; }
.citation-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.citation-heading .title { margin-bottom: 0; }
.citation-note { margin: 1rem 0; color: #6b6b6b; font-size: .85rem; }
#copy-status { display: block; margin-top: .5rem; font-size: .85rem; }

#image-dialog { position: fixed; inset: 0; margin: auto; width: min(1500px, 94vw); max-height: 92vh; overflow: auto; padding: 1.25rem; border: 1px solid #dbdbdb; border-radius: 6px; background: white; }
#image-dialog::backdrop { background: rgb(0 0 0 / 70%); }
.dialog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
#dialog-image { display: block; width: 100%; height: auto; }
.dialog-hint { margin-top: 1rem; font-size: .8rem; color: #6b6b6b; }

@media screen and (max-width: 768px) {
  .carousel-page { gap: .75rem; }
  /* The original template has no responsive title size. */
  .publication-title { font-size: 2rem !important; overflow-wrap: break-word; }
  .slide-bottom { flex-wrap: wrap; gap: .25rem; font-size: .7rem; }
  .slide-actions { margin-left: auto; }
  .image-tag, .fade-state { top: .5rem; font-size: .55rem; padding: .3rem .4rem; }
  .image-tag.left, .fade-state { left: .5rem; }
  .image-tag.right { right: .5rem; }
  .gallery-step { width: 30px; height: 30px; font-size: 23px; }
  .gallery-step.previous { left: 5px; }
  .gallery-step.next { right: 5px; }
  .knob { width: 37px; height: 37px; }
  .play-icon { width: 52px; height: 52px; font-size: 17px; }
  .results-disclosure > summary { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }