/*
 * Addressable page documents
 *
 * Routed documents describe their final local state directly. These rules
 * intentionally only resolve document geometry and do not redefine the tile
 * design system in chapter-overview.css.
 */

@property --detail-grid-section-extension {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@layer application {
html:has(.route-document) {
  overflow-x: hidden;
  overflow-y: auto;
}

.route-document #content {
  min-block-size: var(--site-viewport-block-size);
  transition:
    opacity var(--route-document-visibility-duration) ease,
    transform 320ms var(--site-ease-out);
}

/* Shared routed-document scrolling and pull-to-navigate contract. */
.route-scroll-deck {
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  touch-action: pan-y;
}

.route-scroll-deck > [data-route-scroll-surface] {
  transition: translate 220ms var(--site-ease-out);
}

.route-scroll-deck.is-route-pulling > [data-route-scroll-surface] {
  translate: 0 var(--route-pull-offset, 0);
  transition: none;
}

.route-scroll-deck::-webkit-scrollbar {
  display: none;
}

.route-document .page-section--route-content {
  min-block-size: var(--site-viewport-block-size);
  block-size: var(--site-viewport-block-size);
}

.route-document .route-stage {
  --accordion-reveal: 1;
  --route-focus-progress: 1;
  --route-navigation-content-progress: 0;
  --route-title-offset: 0;
  --route-title-opacity: 1;
  --route-view-progress: 1;

  position: relative;
}

/*
 * Chapter overviews are complete compositions inside the routed document.
 * Their geometry remains width-driven, while the stage itself follows the
 * viewport itself. Chapter overviews are non-scrolling compositions; width
 * owns their scale, while height only defines the usable band between the
 * navigation and cinema edge.
 */
.route-document--chapter :is(.route-stage, .page-section--route-content) {
  block-size: var(--site-viewport-block-size);
  min-block-size: var(--site-viewport-block-size);
}

/*
 * The accordion composition is centered in the actual usable viewport band:
 * from the settled navigation's lower edge to the lower cinema edge's upper
 * edge. Symmetric inner clearance protects both boundaries without shifting
 * that center. Width remains the primary scale input; only when the available
 * band is shorter than the composition may height cap its block size.
 */
.route-document--chapter .chapter-overview {
  --chapter-overview-band-block-size: max(
    0px,
    calc(
      var(--site-viewport-block-size)
      - var(--route-navigation-dock-offset)
      - var(--route-navigation-control-height)
      - var(--site-cinema-edge-size)
    )
  );
  --chapter-overview-available-block-size: max(
    0px,
    calc(
      var(--chapter-overview-band-block-size)
      - (2 * var(--site-navigation-content-gap))
    )
  );

  inset-block-start: calc(
    var(--route-navigation-dock-offset)
    + var(--route-navigation-control-height)
  );
  inset-block-end: auto;
  box-sizing: border-box;
  block-size: var(--chapter-overview-band-block-size);
  padding-block: var(--site-navigation-content-gap);
}

.route-document .route-view {
  opacity: 1;
}

.route-document .chapter-overview {
  --content-overview-offset: 0;
  --content-overview-opacity: 1;

  pointer-events: auto;
}

.route-document [data-route-navigation].route-navigation {
  --navigation-bulge: 1;
  --navigation-reveal: 1;
  --navigation-text-reveal: 1;
  --route-navigation-content-progress: 0;
  /*
   * Routed chapter pages render the navigation in its settled overview
   * state. Keep the raised surfaces of inactive buttons visible instead of
   * inheriting the base scene's fully collapsed end state.
   */
  --route-view-progress: 0;
  --route-title-offset: 0;
  --route-title-opacity: 1;

  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--route-document-visibility-duration) ease,
    transform 320ms var(--site-ease-out),
    box-shadow 180ms var(--site-ease-out),
    translate var(--site-navigation-auto-hide-duration) var(--site-ease-out);
}

.route-document .route-navigation.is-route-detail
  .route-navigation__entry-title {
  transform: none;
}

@keyframes route-detail-section-title-change {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(
      calc(0px - var(--route-detail-title-entry-inline-offset))
    );
  }

  35% {
    opacity: 1;
  }

  to {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

.route-navigation.is-section-title-changing
  .route-navigation__entry-title-subtitle {
  animation: route-detail-section-title-change
    var(--route-detail-title-entry-duration) var(--site-ease-out) both;
}

/*
 * Detail navigation is one compact, opaque surface. The document beneath it
 * remains continuous, so tiles can pass behind this box while scrolling.
 */
:is(
  .route-document--detail,
  .route-document--timeline,
  .route-document--home,
  .route-document--chapter
) {
  --detail-navigation-box-padding: clamp(0.45rem, calc(0.7 * var(--site-scale-unit)), 0.65rem);
  --detail-navigation-grid-gap: clamp(0.55rem, var(--site-block-unit), 0.9rem);
  --detail-grid-surface-padding: var(--site-navigation-inline-overhang);
  --detail-navigation-surface-overreach: clamp(0.65rem, var(--site-scale-unit), 1rem);
  --detail-navigation-box-inset: calc(
    var(--site-page-inline-padding)
    - var(--detail-grid-surface-padding)
    - var(--detail-navigation-surface-overreach)
  );
  --detail-grid-surface-block-padding: var(--detail-grid-surface-padding);
  --detail-navigation-surface-start: calc(
    var(--route-navigation-dock-offset)
    + var(--site-navigation-height)
    + var(--detail-navigation-box-padding)
    + var(--site-navigation-content-gap)
    + var(--detail-navigation-grid-gap)
  );
}

:is(.route-document--detail, .route-document--timeline) {
  --route-accent-color: #3e4147;
  --route-detail-surface-entry-duration: 1000ms;
  --route-detail-title-entry-duration: 620ms;
  --detail-grid-surface-border-color: rgb(34 39 46 / 0.18);
  --detail-grid-surface-color: #d1d2d3;
  --detail-grid-surface-radius: clamp(1.2rem, calc(2 * var(--site-scale-unit)), 2rem);
  --detail-grid-surface-border-width: clamp(0.3rem, calc(0.7 * var(--site-scale-unit)), 0.625rem);
  --detail-grid-surface-inner-radius: max(
    0px,
    calc(
      var(--detail-grid-surface-radius)
      - var(--detail-grid-surface-border-width)
    )
  );
  --detail-grid-surface-overhang-start: var(--detail-grid-surface-padding);
  --detail-grid-surface-overhang-end: var(--detail-grid-surface-padding);
  /*
   * Match the visible distance between the navigation surface and the first
   * detail surface. The navigation uses the compact project control height,
   * while its placement contract is based on the shared navigation height;
   * both values therefore belong in the physical edge-to-edge gap.
   */
  --detail-grid-surface-gap: calc(
    var(--site-navigation-height)
    - var(--route-navigation-control-height)
    + var(--site-navigation-content-gap)
    + var(--detail-navigation-grid-gap)
  );
}

:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail {
  --route-detail-title-entry-inline-offset: calc(
    var(--route-navigation-chapter-size)
    + var(--site-navigation-gap)
  );
  --route-navigation-elevation: 0;
  --route-navigation-trailing-utility-size: clamp(2.35rem, calc(3 * var(--site-scale-unit)), 2.8rem);
  --route-navigation-columns:
    var(--route-navigation-utility-size)
    var(--route-navigation-chapter-size)
    minmax(0, 1fr)
    var(--route-navigation-trailing-utility-size);

  /*
   * Grow the surface around the established navigation position. Compensate
   * its padding on both axes so the controls keep the accordion band's
   * original top and left edges.
   */
  inset-block-start: calc(
    var(--navigation-dock-offset) - var(--detail-navigation-box-padding)
  );
  inset-inline: auto;
  inset-inline-start: calc(
    var(--site-canvas-inline-offset) + var(--detail-navigation-box-inset)
  );
  gap: var(--site-navigation-gap);
  inline-size: calc(
    var(--site-canvas-inline-size) - 2 * var(--detail-navigation-box-inset)
  );
  padding-block: var(--detail-navigation-box-padding);
  padding-inline: var(--detail-navigation-surface-overreach);
  border: 0;
  border-radius: clamp(0.8rem, calc(1.25 * var(--site-scale-unit)), 1.15rem);
  background: transparent;
  box-shadow:
    0 0.3rem 0.55rem
      rgb(40 45 54 / calc(0.08 * var(--route-navigation-elevation))),
    0 0.75rem 1.35rem
      rgb(40 45 54 / calc(0.2 * var(--route-navigation-elevation))),
    0 1.1rem 2.2rem
      rgb(40 45 54 / calc(0.1 * var(--route-navigation-elevation))),
    inset 0 1px 0
      rgb(255 255 255 / calc(0.72 * var(--route-navigation-elevation)));
}

:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail::before,
:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  transition: opacity 180ms var(--site-ease-out);
}

:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail::before {
  background: var(--site-surface);
  opacity: var(--route-navigation-elevation);
}

:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail::after {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.18), transparent 58%),
    var(--site-surface);
  box-shadow:
    6px 6px 12px var(--site-surface-shadow),
    -6px -6px 12px var(--site-surface-highlight);
  opacity: calc(1 - var(--route-navigation-elevation));
}

/*
 * Hidden chapter links must not retain their overview columns: implicit
 * columns would otherwise push the title and trailing utility slot into the
 * middle of the floating band.
 */
:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail
  .title-navigation__link--chapter {
  grid-column: 2;
}

:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail
  .route-navigation__entry-title {
  align-self: center;
  grid-column: 3;
  block-size: var(--route-navigation-control-height);
  padding-inline-start: 0;
}

:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail
  .route-navigation__entry-title-item.is-active {
  justify-content: center;
  overflow: visible;
  text-overflow: clip;
}

:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail
  .route-navigation__entry-title-context {
  inline-size: fit-content;
  margin-block-end: 0.12rem;
  padding: 0.1rem 0.42rem 0.12rem;
  border: 0;
  border-radius: 0.22rem;
  background: color-mix(in srgb, var(--route-accent-color) 88%, white);
  color: #fff;
  font-weight: var(--type-weight-regular);
}

:is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail
  .route-navigation__entry-title-subtitle {
  font-size: var(--type-size-route-context-title);
}

/* Use the established ZDE five-row geometry as the routed size reference. */
:is(
  .route-document--detail .detail-grid-deck,
  .route-document--home .title-overview-grid-deck
) {
  --detail-grid-layout-canvas-block-size: var(--site-readability-canvas-block-size);
  --detail-navigation-content-start: calc(
    var(--detail-navigation-surface-start)
    + var(--detail-grid-surface-block-padding)
  );
  /*
   * Grid height and scroll clearance are separate concerns. Every section
   * keeps the established menu-to-grid gap below its rows, while the deck
   * additionally compensates for the surface's negative block-end margin and
   * the fixed lower cinema edge. The visible surface edge therefore retains
   * the same perceived gap on every grid height instead of disappearing
   * behind the gradient on taller sections.
   */
  --detail-grid-viewport-gap: calc(
    var(--site-navigation-content-gap)
    + var(--detail-navigation-grid-gap)
  );
  --detail-grid-five-row-block-size: calc(
    var(--detail-grid-layout-canvas-block-size)
    - var(--detail-navigation-content-start)
    - var(--detail-grid-viewport-gap)
  );
  --detail-grid-reference-row-block-size: calc(
    (
      var(--detail-grid-five-row-block-size)
      - (var(--detail-grid-gap) * 4)
    ) * 0.2
  );
}

.route-document--detail .detail-grid-deck {
  --detail-grid-block-end: calc(
    var(--detail-grid-viewport-gap)
    + var(--route-cinema-edge-size)
    + var(--detail-grid-surface-block-padding)
  );
  --detail-grid-block-start: var(--detail-navigation-content-start);

  z-index: 1;
}

.route-document--detail .detail-grid-section {
  --detail-grid-authored-block-size: var(--detail-grid-five-row-block-size);

  block-size: var(--detail-grid-five-row-block-size);
  min-block-size: var(--detail-grid-five-row-block-size);
}

/*
 * Desktop detail grids use one width-driven geometry contract from their
 * capped reference size down to the tablet boundary. Sections may grow only
 * on the block axis; authored columns, rows and compact layouts stay isolated.
 */
@media (width > 75rem) {
  .route-document--detail:not(.route-document--legal) .detail-grid-deck {
    --detail-grid-layout-canvas-block-size: var(--site-canvas-block-size);
  }

  .route-document--detail:not(.route-document--legal)
    .detail-grid-section.is-detail-desktop-height-fitted {
    block-size: max(
      var(--detail-grid-authored-block-size),
      var(--detail-grid-desktop-block-size)
    );
    min-block-size: max(
      var(--detail-grid-authored-block-size),
      var(--detail-grid-desktop-block-size)
    );
  }

  /* Keep each painted surface live while skipping only its offscreen tiles. */
  .route-document--detail:not(.route-document--legal)
    .detail-grid-section.is-detail-desktop-height-fitted.is-detail-desktop-content-deferred
    > .detail-grid {
    content-visibility: auto;
  }
}

/* Preserve the ZDE five-row pitch when a section adds a sixth row and gap. */
:is(
  .route-document--detail,
  .route-document--home
) .detail-grid-section--six-rows {
  --detail-grid-authored-block-size: calc(
    var(--detail-grid-five-row-block-size)
    + var(--detail-grid-reference-row-block-size)
    + var(--detail-grid-gap)
  );
  block-size: calc(
    var(--detail-grid-five-row-block-size)
    + var(--detail-grid-reference-row-block-size)
    + var(--detail-grid-gap)
  );
  min-block-size: calc(
    var(--detail-grid-five-row-block-size)
    + var(--detail-grid-reference-row-block-size)
    + var(--detail-grid-gap)
  );
}

/* Extend by two rows and gaps without changing the five-row reference pitch. */
:is(
  .route-document--detail,
  .route-document--home
) .detail-grid-section--seven-rows {
  --detail-grid-authored-block-size: calc(
    var(--detail-grid-five-row-block-size)
    + (2 * var(--detail-grid-reference-row-block-size))
    + (2 * var(--detail-grid-gap))
  );
  block-size: calc(
    var(--detail-grid-five-row-block-size)
    + (2 * var(--detail-grid-reference-row-block-size))
    + (2 * var(--detail-grid-gap))
  );
  min-block-size: calc(
    var(--detail-grid-five-row-block-size)
    + (2 * var(--detail-grid-reference-row-block-size))
    + (2 * var(--detail-grid-gap))
  );
}

/*
 * The overview profile extension lives outside the authored seven-row grid.
 * Keep that grid stable while its section grows by the exact space occupied
 * by the toggle row and the measured extension. The translated lower tiles
 * then end at the section edge instead of overlapping the following sections.
 */
.route-document--home
  .title-overview-grid-section.detail-grid-section--seven-rows {
  block-size: calc(
    var(--detail-grid-authored-block-size)
    + var(--title-profile-toggle-layout-size)
    + var(--title-profile-extension-block-size)
    + var(--title-overview-profile-following-shift)
  );
  min-block-size: calc(
    var(--detail-grid-authored-block-size)
    + var(--title-profile-toggle-layout-size)
    + var(--title-profile-extension-block-size)
    + var(--title-overview-profile-following-shift)
  );
}

.route-document--home
  .title-overview-grid-section
  > .title-overview-grid {
  block-size: var(--detail-grid-authored-block-size);
  min-block-size: var(--detail-grid-authored-block-size);
}

/*
 * The scroll surface remains one continuous document for native scrolling,
 * focus and pull navigation. It is intentionally visually neutral: each
 * thematic section paints its own surface below.
 */
.route-document--detail .detail-grid-surface {
  position: relative;
  z-index: 0;
  display: flow-root;
  margin-block: calc(-1 * var(--detail-grid-surface-block-padding));
  margin-inline-start: calc(-1 * var(--detail-grid-surface-overhang-start));
  margin-inline-end: calc(-1 * var(--detail-grid-surface-overhang-end));
  padding-block-start: var(--detail-grid-surface-block-padding);
  padding-block-end: var(--detail-grid-surface-block-padding);
  padding-inline-start: var(--detail-grid-surface-overhang-start);
  padding-inline-end: var(--detail-grid-surface-overhang-end);
}

.route-document--detail .detail-grid-surface > .detail-grid-section {
  isolation: isolate;
  z-index: 1;
  box-sizing: content-box;
  padding-block-end: var(--detail-grid-section-extension, 0px);
  transition: --detail-grid-section-extension var(--detail-grid-expansion-duration)
    var(--site-ease-out);
}

/*
 * A section's declared block size continues to describe the grid itself.
 * Painting the symmetric surface as an independent layer preserves every
 * established tile dimension while keeping future row additions in normal
 * document flow.
 */
.route-document--detail:not(.route-document--legal)
  .detail-grid-surface > .detail-grid-section::before {
  position: absolute;
  z-index: 0;
  inset-block-start: calc(-1 * var(--detail-grid-surface-block-padding));
  inset-block-end: calc(-1 * var(--detail-grid-surface-block-padding));
  inset-inline-start: calc(-1 * var(--detail-grid-surface-overhang-start));
  inset-inline-end: calc(-1 * var(--detail-grid-surface-overhang-end));
  border:
    var(--detail-grid-surface-border-width)
    solid
    var(--detail-grid-surface-border-color);
  border-radius: var(--detail-grid-surface-radius);
  background-color: var(--detail-grid-surface-color);
  box-shadow:
    2px 6px 28px 0 rgb(59 7 100 / 0.3),
    inset 0 0 4px 2px rgb(10 12 16 / 0.1);
  content: "";
  pointer-events: none;
}

.route-document--detail:not(.route-document--legal)
  .detail-grid-surface > .detail-grid-section > .detail-grid {
  position: relative;
  z-index: 1;
  clip-path: inset(
    calc(
      var(--detail-grid-surface-border-width)
      - var(--detail-grid-surface-block-padding)
    )
    calc(
      var(--detail-grid-surface-border-width)
      - var(--detail-grid-surface-overhang-end)
    )
    calc(
      var(--detail-grid-surface-border-width)
      - var(--detail-grid-surface-block-padding)
      - var(--detail-grid-section-extension, 0px)
    )
    calc(
      var(--detail-grid-surface-border-width)
      - var(--detail-grid-surface-overhang-start)
    )
    round var(--detail-grid-surface-inner-radius)
  );
}

/*
 * Section margins include both neighbouring surface insets. What remains
 * visible between their painted edges is exactly the established gap between
 * the navigation band and the first surface.
 */
.route-document--detail:not(.route-document--legal)
  .detail-grid-section + .detail-grid-section {
  margin-block-start: calc(
    var(--detail-grid-surface-gap)
    + (2 * var(--detail-grid-surface-block-padding))
  );
}

.route-document .route-navigation.is-route-detail
  .title-navigation__link.is-active {
  grid-column: 2;
  animation: none;
  transform: none;
}

.route-document.is-route-detail-navigation-entry
  .route-navigation.is-route-detail
  .title-navigation__link.is-active {
  animation: none;
}

.route-document.is-route-detail-navigation-exit
  .route-navigation
  .title-navigation__link.is-active,
.route-document.is-route-detail-navigation-stable
  .route-navigation.is-route-detail
  .title-navigation__link.is-active {
  animation: none;
}

/*
 * Entering a detail from its accordion is one continuous navigation scene:
 * inactive chapter buttons fade on the source document while the active
 * button assumes its final detail position before Flask loads the route.
 */
.route-document--chapter.is-route-detail-entry-leaving
  .route-navigation
  .title-navigation__link:not(.is-active) {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition:
    opacity 320ms ease,
    transform 420ms var(--site-ease-out);
}

.route-document--chapter.is-route-detail-entry-leaving
  .route-navigation
  .title-navigation__link.is-active {
  grid-column: 2;
  transform: none;
  transition: none;
}

/*
 * Detail-to-detail documents keep the navigation button docked, while the
 * two-line title composition follows the direction of the view change.
 */
.route-document .route-navigation__entry-title-item.is-active {
  transition:
    opacity 240ms ease,
    translate 300ms var(--site-ease-out);
}

.route-document.is-route-detail-title-leaving.is-route-leaving--forward
  .route-navigation__entry-title-item.is-active {
  opacity: 0;
  translate: 0 -0.55rem;
}

.route-document.is-route-detail-title-leaving.is-route-leaving--backward
  .route-navigation__entry-title-item.is-active {
  opacity: 0;
  translate: 0 0.55rem;
}

/*
 * Every routed entry into a detail view reveals both destination surfaces.
 * This deliberately works independently of the route transition mode and of
 * whether a navigation button moves on the same timeline.
 */
@keyframes route-detail-navigation-surface-enter-before {
  from {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.985);
  }

  to {
    opacity: var(--route-navigation-elevation);
    transform: none;
  }
}

@keyframes route-detail-navigation-surface-enter-after {
  from {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.985);
  }

  to {
    opacity: calc(1 - var(--route-navigation-elevation));
    transform: none;
  }
}

@keyframes route-detail-grid-surface-enter {
  from {
    border-color: transparent;
    background-color: transparent;
    box-shadow:
      2px 6px 28px 0 rgb(59 7 100 / 0),
      inset 0 0 4px 2px rgb(10 12 16 / 0);
  }

  to {
    border-color: var(--detail-grid-surface-border-color);
    background-color: var(--detail-grid-surface-color);
    box-shadow:
      2px 6px 28px 0 rgb(59 7 100 / 0.3),
      inset 0 0 4px 2px rgb(10 12 16 / 0.1);
  }
}

@keyframes route-detail-title-enter {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(
      calc(0px - var(--route-detail-title-entry-inline-offset))
    );
  }

  35% {
    opacity: 1;
  }

  to {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

/*
 * The transition record is read in the document head, before CSS can paint
 * the destination. Instantiate the same paused keyframes at that point, then
 * let the route module release them without maintaining duplicate start rules.
 */
html.has-route-detail-entry
  :is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail::before,
:is(.route-document--detail, .route-document--timeline).is-route-entering
  .route-navigation.is-route-detail::before {
  animation: route-detail-navigation-surface-enter-before
    var(--route-detail-surface-entry-duration)
    var(--site-ease-out) both paused;
  transform-origin: left center;
}

html.has-route-detail-entry
  :is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail::after,
:is(.route-document--detail, .route-document--timeline).is-route-entering
  .route-navigation.is-route-detail::after {
  animation: route-detail-navigation-surface-enter-after
    var(--route-detail-surface-entry-duration)
    var(--site-ease-out) both paused;
  transform-origin: left center;
}

:is(.route-document--detail, .route-document--timeline).is-route-entering.is-route-entering-active
  .route-navigation.is-route-detail::before,
:is(.route-document--detail, .route-document--timeline).is-route-entering.is-route-entering-active
  .route-navigation.is-route-detail::after {
  animation-play-state: running;
}

html.has-route-detail-entry
  .route-document--detail:not(.route-document--legal)
  .detail-grid-surface > .detail-grid-section::before,
.route-document--detail:not(.route-document--legal).is-route-entering
  .detail-grid-surface > .detail-grid-section::before {
  animation: route-detail-grid-surface-enter
    var(--route-detail-surface-entry-duration)
    var(--site-ease-out) both paused;
}

.route-document--detail:not(.route-document--legal).is-route-entering.is-route-entering-active
  .detail-grid-surface > .detail-grid-section::before {
  animation-play-state: running;
}

html.has-route-detail-title-arrival
  :is(.route-document--detail, .route-document--timeline)
  .route-navigation.is-route-detail
  .route-navigation__entry-title,
:is(.route-document--detail, .route-document--timeline).is-route-entering.is-route-detail-navigation-entry
  .route-navigation.is-route-detail
  .route-navigation__entry-title {
  animation: route-detail-title-enter
    var(--route-detail-title-entry-duration)
    var(--site-ease-out) both paused;
}

:is(.route-document--detail, .route-document--timeline).is-route-entering.is-route-detail-navigation-entry.is-route-detail-title-ready
  .route-navigation.is-route-detail
  .route-navigation__entry-title {
  animation-play-state: running;
}

.route-document.is-route-entering.is-route-detail-navigation-stable
  .route-navigation__entry-title-item.is-active {
  opacity: 0;
  transition:
    opacity 440ms ease,
    translate 560ms var(--site-ease-out);
}

.route-document.is-route-entering--forward.is-route-detail-navigation-stable
  .route-navigation__entry-title-item.is-active {
  translate: 0 0.65rem;
}

.route-document.is-route-entering--backward.is-route-detail-navigation-stable
  .route-navigation__entry-title-item.is-active {
  translate: 0 -0.65rem;
}

.route-document.is-route-entering-active.is-route-detail-navigation-stable
  .route-navigation__entry-title-item.is-active {
  opacity: 1;
  translate: 0 0;
}

.route-document .route-navigation.is-route-detail
  .title-navigation__link.is-active:hover,
.route-document .route-navigation.is-route-detail
  .title-navigation__link.is-active:focus-visible {
  transform: none;
}

.route-document-controls {
  display: none;
}

.route-pull-indicator {
  position: fixed;
  z-index: 19;
  inset-inline-start: 50%;
  inset-block-start: var(--route-pull-center, 50%);
  display: flex;
  align-items: center;
  gap: 0.72rem;
  max-inline-size: min(28rem, calc(100vw - 2rem));
  padding: 0.58rem 1rem 0.62rem 0.78rem;
  border: 1px solid rgb(255 255 255 / 0.38);
  border-radius: 999px;
  background: rgb(15 15 16 / 0.9);
  box-shadow:
    0 0.8rem 2.4rem rgb(0 0 0 / 0.24),
    inset 0 1px 0 rgb(255 255 255 / 0.2);
  color: #fff;
  opacity: var(--route-pull-opacity, 0);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--route-pull-scale, 0.9));
  transition:
    opacity 180ms ease,
    transform 220ms var(--site-ease-out),
    background-color 180ms ease;
}

.route-pull-indicator:not(.is-visible) {
  visibility: hidden;
}

.route-pull-indicator.is-ready {
  background: rgb(0 0 0 / 0.98);
  box-shadow:
    0 1rem 3rem rgb(0 0 0 / 0.3),
    0 0 0 0.14rem rgb(255 255 255 / 0.7),
    inset 0 1px 0 rgb(255 255 255 / 0.28);
}

.route-pull-indicator__arrow {
  position: relative;
  flex: 0 0 auto;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 50%;
}

.route-pull-indicator__arrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 0.42rem;
  block-size: 0.42rem;
  border-block-start: 1.5px solid currentColor;
  border-inline-start: 1.5px solid currentColor;
  transform: translate(-50%, -35%) rotate(45deg);
  transition: transform 180ms var(--site-ease-out);
}

.route-pull-indicator[data-direction="next"] .route-pull-indicator__arrow::before {
  transform: translate(-50%, -65%) rotate(225deg);
}

.route-pull-indicator.is-ready .route-pull-indicator__arrow::before {
  transform: translate(-50%, -55%) rotate(45deg) scale(1.18);
}

.route-pull-indicator[data-direction="next"].is-ready .route-pull-indicator__arrow::before {
  transform: translate(-50%, -45%) rotate(225deg) scale(1.18);
}

.route-pull-indicator__copy {
  display: grid;
  min-inline-size: 0;
  line-height: 1.05;
}

.route-pull-indicator__copy small {
  color: rgb(255 255 255 / 0.64);
  font-size: var(--type-size-route-pull-kicker);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.route-pull-indicator__copy strong {
  overflow: hidden;
  font-size: var(--type-size-route-pull-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Routed scene transitions
 *
 * Flask owns the documents and URLs. This presentation layer animates the
 * existing design-system elements while navigation moves between documents,
 * without introducing a second visual implementation.
 */

.route-document.is-route-leaving #content {
  opacity: 0;
}

.route-document.is-route-chapter-transition .route-navigation {
  opacity: 0;
}

.route-document.is-route-leaving--forward #content {
  transform: translateY(-0.45rem);
}

.route-document.is-route-leaving--backward #content {
  transform: translateY(0.45rem);
}

.route-document.is-route-entering #content {
  opacity: 0;
}

/*
 * A routed Timeline entry is known in the document head. Keep its content out
 * of the first paint until the route module has installed the normal entry
 * classes; from that point onward the existing transition owns visibility.
 */
html.has-route-timeline-entry
  .route-document--timeline:not(.is-route-entering)
  #content {
  opacity: 0;
}

.route-document.is-route-entry--chapter .route-navigation {
  opacity: 0;
}

.route-document.is-route-entering--forward #content {
  transform: translateY(0.55rem);
}

.route-document.is-route-entering--backward #content {
  transform: translateY(-0.55rem);
}

.route-document.is-route-entering-active .route-navigation,
.route-document.is-route-entering-active #content {
  opacity: 1;
  transform: translateY(0);
}

/* Detail documents leave their entrance motion to the individual tile reveal. */
.route-document--detail.is-route-entry--document #content {
  opacity: 1;
  transform: none;
}

/*
 * Keep routed detail content out of the first paint. The server already
 * selects the correct view; JavaScript exposes it only after the local tile
 * reveal state has been initialized.
 */
html.has-js
  .route-document--detail:not(.is-route-content-ready)
  [data-route-detail]
  .detail-grid-section {
  visibility: hidden;
  pointer-events: none;
}

.route-document--chapter.is-route-entering .chapter-accordion {
  transform: translateX(calc(-1 * var(--overview-switch-distance)));
}

.route-document--chapter.is-route-entering .chapter-timeline-preview {
  transform: translateX(var(--overview-switch-distance));
}

.route-document--chapter.is-route-entering .chapter-accordion,
.route-document--chapter.is-route-entering .chapter-timeline-preview {
  opacity: 0;
  transition:
    opacity 520ms ease,
    transform 680ms var(--overview-switch-ease);
}

.route-document--chapter.is-route-entering-active .chapter-accordion,
.route-document--chapter.is-route-entering-active .chapter-timeline-preview {
  opacity: 1;
  transform: translateX(0);
}

.route-document.is-route-chapter-transition #content {
  transition:
    opacity 520ms ease,
    transform 620ms var(--overview-switch-ease);
}

.route-document.is-route-chapter-transition.is-route-leaving--forward #content {
  transform: translateX(calc(-1 * var(--overview-switch-distance)));
}

.route-document.is-route-chapter-transition.is-route-leaving--backward #content {
  transform: translateX(var(--overview-switch-distance));
}

.route-transition-overlay.overview-switch-overlay {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding:
    calc(var(--site-chrome-edge-offset) + var(--site-navigation-height))
    var(--site-page-inline-padding)
    var(--site-chrome-edge-offset);
  background: var(--site-canvas-background);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.route-document.is-route-chapter-overlay-visible
  .route-transition-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease;
}

.route-document.is-route-chapter-overlay-ready
  .route-transition-overlay
  .overview-switch-overlay__title-row {
  opacity: 1;
}

.route-document.is-route-chapter-overlay-ready
  .route-transition-overlay
  .overview-switch-overlay__polaroids::before {
  opacity: 1;
  transform: translate(-50%, -50%) scaleX(1);
}

.route-document.is-route-chapter-overlay-ready
  .route-transition-overlay
  .overview-switch-overlay__group.is-active
  .overview-switch-overlay__polaroid {
  animation: overlay-polaroid-enter 860ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
  animation-delay: var(--polaroid-enter-delay);
}

@keyframes overlay-polaroid-enter {
  from {
    opacity: 0;
    transform:
      translate(
        var(--polaroid-enter-x),
        calc(var(--polaroid-offset-y) + clamp(0.6rem, calc(1.5 * var(--site-scale-unit)), 1.4rem))
      )
      rotate(calc(var(--polaroid-rotation) - 6deg))
      scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(var(--polaroid-offset-y)) rotate(var(--polaroid-rotation));
  }
}

/*
 * The title remains a self-contained animated scene, but it no longer needs
 * three viewport heights merely to encode its progress.
 */
.route-document--home .page-section--title {
  min-block-size: var(--site-document-block-size);
  block-size: var(--site-document-block-size);
}

.route-document--home .title-hero {
  position: relative;
  block-size: var(--site-document-block-size);
  min-block-size: var(--site-document-block-size);
}

/*
 * The title controller owns the settled contact state through inline styles.
 * Once route exit begins, this scene rule deliberately takes ownership of
 * every content layer, including the navigation. That keeps the menu band,
 * profile borders, contact fields, portrait and title elements on one fade.
 * Their settled transforms stay untouched so the complete scene disappears
 * in place instead of drifting before the route changes.
 */
.route-document--home.is-title-contact-state.is-route-contact-scene-leaving
  .title-hero > * {
  visibility: hidden;
  opacity: 0 !important;
  transition:
    opacity var(--route-contact-scene-exit-duration) ease,
    visibility 0s linear var(--route-contact-scene-exit-duration);
}

@media (max-width: 85rem) {
  /*
   * Overview and accordion routes adopt the complete navigation surface when
   * leaving the wide desktop corridor. Detail and timeline routes already own
   * the same surface through their persistent route contract above.
   */
  :is(
    .route-document--home .title-navigation.title-navigation--source,
    .route-document--chapter .route-navigation
  ) {
    --route-navigation-elevation: 0;

    inset-block-start: calc(
      var(--navigation-dock-offset) - var(--detail-navigation-box-padding)
    );
    inset-inline: auto;
    inset-inline-start: calc(
      var(--site-canvas-inline-offset) + var(--detail-navigation-box-inset)
    );
    inline-size: calc(
      var(--site-canvas-inline-size) - 2 * var(--detail-navigation-box-inset)
    );
    padding-block: var(--detail-navigation-box-padding);
    padding-inline: var(--detail-navigation-surface-overreach);
    border: 0;
    border-radius: clamp(0.8rem, calc(1.25 * var(--site-scale-unit)), 1.15rem);
    background: transparent;
    box-shadow:
      0 0.3rem 0.55rem
        rgb(40 45 54 / calc(0.08 * var(--route-navigation-elevation))),
      0 0.75rem 1.35rem
        rgb(40 45 54 / calc(0.2 * var(--route-navigation-elevation))),
      0 1.1rem 2.2rem
        rgb(40 45 54 / calc(0.1 * var(--route-navigation-elevation))),
      inset 0 1px 0
        rgb(255 255 255 / calc(0.72 * var(--route-navigation-elevation)));
  }

  :is(
    .route-document--home .title-navigation.title-navigation--source,
    .route-document--chapter .route-navigation
  )::before,
  :is(
    .route-document--home .title-navigation.title-navigation--source,
    .route-document--chapter .route-navigation
  )::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
  }

  :is(
    .route-document--home .title-navigation.title-navigation--source,
    .route-document--chapter .route-navigation
  )::before {
    background: var(--site-surface);
    opacity: var(--route-navigation-elevation);
  }

  :is(
    .route-document--home .title-navigation.title-navigation--source,
    .route-document--chapter .route-navigation
  )::after {
    visibility: visible;
    background:
      linear-gradient(145deg, rgb(255 255 255 / 0.18), transparent 58%),
      var(--site-surface);
    box-shadow:
      6px 6px 12px var(--site-surface-shadow),
      -6px -6px 12px var(--site-surface-highlight);
    opacity: calc(1 - var(--route-navigation-elevation));
  }
}

@media (max-width: 75rem) {
  .route-document .route-navigation {
    translate: 0 0;
  }

  .route-document.is-route-navigation-hidden .route-navigation {
    translate: 0 var(--site-navigation-concealed-offset);
    pointer-events: none;
  }

  /*
   * The overview switches its primary grid to a content-owned vertical flow.
   * This route-level contract intentionally follows detail-grid.css in the
   * cascade, so the generic full-height section geometry cannot clip or
   * overlap the secondary overview sections.
   */
  .route-document--home
    .title-overview-grid-section.detail-grid-section--seven-rows,
  .route-document--home
    .title-overview-grid-section
    > .title-overview-grid {
    block-size: auto;
    min-block-size: 0;
  }

  /* HM00306 occupies the five right-hand columns across two rows. */
  .route-document--home .title-overview-timeline-copy {
    --detail-tile-column: 4;
    --detail-tile-columns: 5;
    --detail-tile-row: 1;
    --detail-tile-rows: 2;
  }

  /* The compact context owns the released lock column after authentication. */
  .route-document.is-protected-content-unlocked
    .route-navigation {
    --route-navigation-columns:
      var(--route-navigation-utility-size)
      minmax(0, 1fr);
  }

  :is(
    .route-document--home,
    .route-document--chapter,
    .route-document--detail,
    .route-document--timeline
  ) {
    --detail-navigation-box-inset: calc(
      var(--site-page-inline-padding)
      - var(--detail-navigation-surface-overreach)
    );
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail {
    --route-navigation-trailing-utility-size: var(--route-navigation-control-height);
    --route-navigation-columns:
      var(--route-navigation-utility-size)
      minmax(0, 1fr)
      var(--route-navigation-trailing-utility-size);
  }

  .route-document--detail .detail-grid-section,
  .route-document--detail .detail-grid-section > .detail-grid {
    block-size: auto;
    min-block-size: 0;
  }
}

@media (46rem < width <= 75rem) {
  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail {
    --route-detail-title-entry-inline-offset: calc(
      var(--route-navigation-detail-chapter-size-reference)
      + var(--site-navigation-gap)
    );
    --route-navigation-columns:
      var(--route-navigation-utility-size)
      var(--route-navigation-detail-chapter-size-reference)
      minmax(0, 1fr)
      var(--route-navigation-trailing-utility-size);
  }

  :is(.route-document--detail, .route-document--timeline).is-protected-content-unlocked
    .route-navigation.is-route-detail {
    --route-navigation-columns:
      var(--route-navigation-utility-size)
      var(--route-navigation-detail-chapter-size-reference)
      minmax(0, 1fr);
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__compact-context {
    display: none;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .title-navigation__link--chapter.is-active {
    display: flex;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__entry-title {
    display: flex;
    min-inline-size: 0;
    padding-inline: 0 clamp(0.45rem, calc(0.8 * var(--site-scale-unit)), 0.8rem);
    font-size: var(--type-size-navigation-entry-title-reference);
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__entry-title-item.is-active {
    min-inline-size: 0;
    overflow: hidden;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__entry-title-context {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__entry-title-subtitle {
    max-inline-size: 100%;
    overflow: hidden;
    font-size: var(--type-size-route-context-title);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Give the notice board a distinct handoff to the explanatory content. */
  .route-document--home .title-overview-secondary-section {
    margin-block-start: calc(4 * var(--detail-grid-gap));
  }

}

@media (max-width: 46rem) {
  .route-document--home .title-overview-secondary-section {
    margin-block: calc(3 * var(--detail-grid-gap));
  }

  .route-document:is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail {
    --route-detail-title-entry-inline-offset: calc(
      var(--route-navigation-utility-size)
      + var(--site-navigation-gap)
    );
    --site-navigation-gap: 1.083rem;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail {
    --route-navigation-columns:
      var(--route-navigation-utility-size)
      minmax(0, 1fr);
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__compact-context {
    display: none;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .title-navigation__link--chapter.is-active {
    display: none;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__entry-title {
    grid-column: 2;
    display: flex;
    min-inline-size: 0;
    padding-inline: 0;
    font-size: var(--type-size-navigation-entry-title-tablet);
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__entry-title-item.is-active {
    min-inline-size: 0;
    overflow: hidden;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    :is(
      .route-navigation__entry-title-context,
      .route-navigation__entry-title-subtitle
    ) {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail
    .route-navigation__entry-title-subtitle {
    font-size: var(--type-size-route-context-title-tablet);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-pull-indicator,
  .route-scroll-deck > [data-route-scroll-surface],
  :is(.route-document--detail, .route-document--timeline)
    .route-navigation.is-route-detail::after {
    transition: none;
  }

  .route-document--detail.is-route-entering
    .route-navigation.is-route-detail::before,
  .route-document--detail.is-route-entering
    .route-navigation.is-route-detail::after,
  .route-document--detail:not(.route-document--legal).is-route-entering
    .detail-grid-surface > .detail-grid-section::before,
  .route-document--detail.is-route-entering
    .route-navigation__entry-title {
    animation: none;
  }

  .route-document *,
  .route-transition-overlay {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}
}