/*
 * Shared visual contracts
 *
 * These values are the single source of truth for geometry, surfaces and
 * motion shared by the overview, routed chapters, timeline and details.
 * Component styles consume these tokens but must not redeclare them.
 */

@layer contracts, application, debug;

@layer contracts {
:root {
  /*
   * Width classes are layout capabilities, not device detection. The shared
   * desktop scale reaches its floor at 85rem without changing detail-grid
   * structure. Compact layout begins at 75rem and the single-column
   * smartphone layout at 46rem. Viewport height only changes the visible or
   * scrollable area.
   */
  --site-desktop-min-scale-unit: 0.85rem;
  --site-reference-block-ratio: 0.646412;
  --site-scale-unit: clamp(
    var(--site-desktop-min-scale-unit),
    1vw,
    1.08rem
  );
  --site-block-unit: calc(
    var(--site-reference-block-ratio) * var(--site-scale-unit)
  );
  /*
   * Dense desktop compositions gain up to 10% block-axis breathing room near
   * the 1360px mode boundary. Inline geometry and compact layouts remain
   * fully width-driven.
  */
  --site-readability-scale-unit: max(
    var(--site-scale-unit),
    calc(1.1 * var(--site-desktop-min-scale-unit))
  );
  --site-canvas-inline-size: calc(100 * var(--site-scale-unit));
  --site-canvas-inline-offset: max(
    0px,
    calc((100vw - var(--site-canvas-inline-size)) / 2)
  );
  --site-canvas-block-size: calc(100 * var(--site-block-unit));
  --site-readability-canvas-block-size: calc(
    100
    * var(--site-reference-block-ratio)
    * var(--site-readability-scale-unit)
  );
  --site-readability-block-reserve: calc(
    var(--site-readability-canvas-block-size)
    - var(--site-canvas-block-size)
  );
  --site-viewport-block-size: 100svh;
  --site-document-block-size: max(
    var(--site-viewport-block-size),
    var(--site-canvas-block-size)
  );
  --site-navigation-height: clamp(
    3.25rem,
    calc(4.1667 * var(--site-scale-unit)),
    4.5rem
  );
  --site-chrome-edge-offset: clamp(
    2.25rem,
    calc(5 * var(--site-block-unit)),
    4rem
  );
  --site-floating-action-size: 2.7rem;
  --site-page-inline-padding: clamp(
    4rem,
    calc(7 * var(--site-scale-unit)),
    9rem
  );
  --site-content-inline-padding: var(--site-page-inline-padding);
  --site-composition-max-inline-size: 100rem;
  --site-navigation-inline-overhang: clamp(
    1.444rem,
    calc(1.8519 * var(--site-scale-unit)),
    2rem
  );
  --site-navigation-inline-inset: calc(
    var(--site-page-inline-padding)
    - var(--site-navigation-inline-overhang)
  );
  --site-navigation-content-gap: clamp(
    0.65rem,
    calc(1.5 * var(--site-block-unit)),
    1.25rem
  );
  --site-navigation-auto-hide-duration: 420ms;
  --site-navigation-concealed-offset: calc(
    -2 * var(--site-navigation-height)
  );
  --site-layer-navigation: 20;
  --site-surface: #e8e8e8;
  --site-surface-shadow: #c5c5c5;
  --site-surface-highlight: #fff;
  --site-paper-dot-color: rgb(164 168 173 / 0.48);
  --site-paper-dot-spacing: clamp(
    1.15rem,
    calc(1.45 * var(--site-scale-unit)),
    1.55rem
  );
  --timeline-path-stroke-width: clamp(
    0.765rem,
    calc(1.215 * var(--site-scale-unit)),
    1.17rem
  );
  --title-overview-timeline-path-stroke-width: clamp(
    0.85rem,
    calc(1.35 * var(--site-scale-unit)),
    1.3rem
  );
  --site-canvas-background:
    radial-gradient(
      circle,
      var(--site-paper-dot-color) 0 1px,
      transparent 1.2px
    )
    center top / var(--site-paper-dot-spacing) var(--site-paper-dot-spacing)
    repeat,
    var(--site-surface);
  --site-ink: #111;
  --site-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --site-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --route-document-visibility-duration: 220ms;
  --route-contact-scene-exit-duration: 360ms;
  --detail-grid-block-start: clamp(
    0.95rem,
    calc(2.35 * var(--site-block-unit)),
    1.85rem
  );
  --detail-grid-block-end: clamp(
    2.15rem,
    calc(5.4 * var(--site-block-unit)),
    4rem
  );
  --detail-grid-expansion-duration: 420ms;
  --detail-grid-gap: clamp(
    0.85rem,
    calc(1.45 * var(--site-scale-unit)),
    1.5rem
  );
  --title-overview-scroll-distance: 72px;
  /*
   * Preserve the 16-inch desktop baseline while letting the square accordion
   * yield space to its companion content throughout the desktop corridor.
   * Both formerly independent viewport branches now consume the common scale
   * unit, so viewport-height changes cannot distort the accordion proportions.
   */
  --chapter-overview-block-size: clamp(
    26rem,
    calc(
      min(
        calc(68 * var(--site-block-unit)),
        calc(20 * var(--site-scale-unit) + 19.4rem)
      )
      + (0.75 * var(--site-readability-block-reserve))
    ),
    41rem
  );
  --route-navigation-dock-offset: var(--site-chrome-edge-offset);
  --site-cinema-edge-size: clamp(
    3.5rem,
    calc(var(--route-navigation-dock-offset) + 2rem),
    7rem
  );
}

@media (max-width: 85rem) {
  :root {
    /* Keep derived geometry independent from each consumer's containing block. */
    --site-canvas-inline-size: 100vw;
    --site-canvas-inline-offset: 0px;
  }
}

@media (max-width: 75rem) {
  :root {
    --site-navigation-height: 4.25rem;
    --site-chrome-edge-offset: clamp(1.25rem, 3.5svh, 2rem);
    --site-floating-action-size: 2.95rem;
    --site-page-inline-padding: clamp(2rem, 4vi, 3rem);
    --site-content-inline-padding: calc(
      var(--site-page-inline-padding)
      + var(--site-navigation-inline-overhang)
    );
    --site-navigation-content-gap: clamp(0.65rem, 1.5svh, 1rem);
  }

  [data-layout-optional~="tablet"] {
    display: none !important;
  }
}

@media (max-width: 46rem) {
  :root {
    --site-navigation-height: 3.75rem;
    --site-chrome-edge-offset: 0.75rem;
    --site-floating-action-size: 2.75rem;
    --site-page-inline-padding: 1rem;
    --site-content-inline-padding: var(--site-page-inline-padding);
    --site-navigation-content-gap: 0.75rem;
    --detail-grid-block-start: 0.75rem;
    --detail-grid-block-end: 2rem;
    --detail-grid-gap: 1rem;
  }
}
}