/* Components added for the reframed page: replay scene overlay, rollout videos, paired readouts. */

.ax-scene-wrap { position: relative; border-radius: 10px; overflow: hidden; }
.ax-scene-wrap img { display: block; width: 100%; height: auto; }
.ax-scene-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ax-pills-left { justify-content: flex-start; margin: 0.35rem 0 0.9rem; }

.ax-cand-out { font-weight: 700; font-size: 1rem; }
.ax-cand-out.is-success, .ax-good { color: #009E73; }
.ax-cand-out.is-fail, .ax-bad { color: #D55E00; }

.ax-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ax-cards-3 { grid-template-columns: 1fr; } }

.ax-pairs { display: grid; gap: 0.45rem; margin: 1rem auto 1.5rem; max-width: 680px; }
.ax-pair {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; align-items: baseline;
  padding: 0.45rem 0.8rem; border: 1px solid var(--border-color); border-radius: 10px; background: #fff;
  font-size: 0.92rem;
}
.ax-pair b { font-variant-numeric: tabular-nums; }
.ax-pair em { color: var(--text-secondary); font-style: normal; font-variant-numeric: tabular-nums; }
.ax-pair.is-clear { border-color: #B9A6E0; background: #F6F2FC; }

.ax-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 700px) { .ax-video-grid { grid-template-columns: 1fr; } }
.ax-video { margin: 0; }
.ax-video video { display: block; width: 100%; height: auto; border-radius: 10px; background: #111; }
.ax-video figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); }

/* Rollout gallery */
.ax-gallery { margin-top: 1.25rem; }
.ax-gallery-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.ax-gallery-group-name { min-width: 8.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.ax-gallery-group .ax-pills { margin: 0; }
.ax-gallery-player { max-width: 760px; margin: 1.1rem auto 0; }
.ax-gallery-nav { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.8rem; }
@media (max-width: 700px) { .ax-gallery-group-name { min-width: 100%; } }

/* Failure notices and keyboard focus */
.ax-video-fallback, .ax-data-notice, .ai-noscript {
  margin: 0.6rem auto 0; padding: 0.6rem 0.85rem; border-radius: 8px;
  background: #FFF4E5; color: #6B4200; font-size: 0.9rem;
}
.ai-noscript { max-width: 760px; text-align: center; }
.ax-pill:focus-visible, .ax-toggle:focus-visible, .ai-stage:focus-visible, .ai-tab:focus-visible,
.copy-bibtex-btn:focus-visible, .ai-zoomable:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }
.ax-outcome { font-weight: 700; margin-right: 0.35rem; }
.ax-outcome.is-success { color: #009E73; }
.ax-outcome.is-fail { color: #D55E00; }

/* Pipeline walkthrough: stage name above its one-line description. */
.ai-stage-name, .ai-stage-sub { display: block; }

/* Handle points viewer (handle-points.html), sized to its content by setupEmbeds */
.ax-embed { margin-top: 1.25rem; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: #EDF0EF; }
.ax-embed iframe { display: block; width: 100%; height: 2600px; border: 0; }

/* Page width: sections span up to 1280 px on wide screens; running text keeps a readable measure. */
@media screen and (min-width: 1024px) {
  .container.is-max-desktop { max-width: min(1280px, calc(100vw - 64px)); }
}
.ai-nav-inner { max-width: 1280px; }
.ai-section-intro, .ai-table-note { max-width: 880px; margin-left: auto; margin-right: auto; }
#abstract .column.is-four-fifths { max-width: 880px; }
.ax-embed.is-dark { background: #0D1214; border-color: #253135; }