/* Product pages: layout on top of @recurz/ui (ui/tokens.css, base.css, components.css).
   Colours, type and components come from the design system; this file only places them.
   The animations sit on dark stages in the scenes' own deep petrol. */

:root {
  /* What scenes.css and scenes.js expect, mapped to the design system's faces. */
  --serif: var(--rz-font-display);
  --sans: var(--rz-font-body);
  --mono: var(--rz-font-mono);
  --on-deep: #e9edf0;
  --on-deep-soft: #8b96a1;
  --aqua: #77c0b7;
  --orange: #f25c2d;
  --pp-deep: #121518;
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; }
figure { margin: 0; }

.pp-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--rz-space-24); }

.pp-header { position: sticky; top: 0; z-index: 10; }
.pp-header .rz-header__right .rz-nav__link { margin-right: var(--rz-space-4); }

/* ---------- Dark stages: hero and the second animation ---------- */
.pp-stage { background: var(--pp-deep); color: var(--rz-ink); border-bottom: 1px solid var(--rz-line); }
.pp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--rz-space-48); padding-block: var(--rz-space-64); }
.pp-hero--wide { grid-template-columns: minmax(0, 1fr); gap: var(--rz-space-32); }
.pp-hero--wide .pp-hero__copy { max-width: 60ch; }
.pp-hero__copy { display: grid; gap: var(--rz-space-16); align-content: start; }
.pp-name { display: block; height: clamp(3.25rem, 7vw, 5rem); width: auto; color: var(--rz-ink); margin-bottom: var(--rz-space-8); }
.pp-kicker { font: var(--rz-text-label); letter-spacing: var(--rz-text-label-tracking); text-transform: uppercase; color: var(--rz-link); }
.pp-lead { font: 400 1.125rem/1.6 var(--rz-font-body); color: var(--rz-muted); max-width: 46ch; }
.pp-hero--wide .pp-lead { max-width: 60ch; }
.pp-actions { margin-top: var(--rz-space-8); }
.pp-art { display: block; width: 100%; height: auto; overflow: visible; }
.pp-art--wide { max-height: 62svh; }
.pp-band { border-top: 1px solid var(--rz-line); }
.pp-section + .pp-band { margin-top: var(--rz-space-64); }
.pp-band__title { font: var(--rz-text-display); letter-spacing: var(--rz-text-display-tracking); }

/* Status: chrome only; a live product is a filled dot, partial a ring, not started dashed. */
.pp-status { display: inline-flex; align-items: center; gap: var(--rz-space-6); padding: 2px var(--rz-space-10); border: 1px solid var(--rz-line-strong); border-radius: var(--rz-radius-pill); font: 500 var(--rz-text-label-size)/1.5 var(--rz-font-body); color: var(--rz-ink); white-space: nowrap; }
.pp-status > span, .pp-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; display: inline-block; }
.pp-status--live > span, .pp-dot--live { background: var(--rz-accent); }
.pp-status--partial > span, .pp-dot--built { border: 2px solid var(--rz-accent); }
.pp-status--planned { border-style: dashed; color: var(--rz-muted); }
.pp-status--planned > span, .pp-dot--planned { border: 1.5px dashed var(--rz-muted); }

/* ---------- Light sections ---------- */
.pp-section { display: grid; gap: var(--rz-space-16); padding-block: var(--rz-space-64) 0; }
.pp-section > h2 { max-width: 34ch; }
.pp-points, .pp-evidence, .pp-grid { display: grid; gap: var(--rz-space-16); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: var(--rz-space-8); }
.pp-owns { margin-top: var(--rz-space-4); }
.pp-screen { max-width: 880px; gap: var(--rz-space-14); padding: var(--rz-space-16) var(--rz-space-20) var(--rz-space-20); box-shadow: 0 1px 0 var(--rz-line), 0 18px 40px -28px rgba(18, 21, 24, .45); }
.pp-evidence .rz-figure { font-size: var(--rz-text-title-size); }
.pp-evidence h3 { font: var(--rz-text-heading); }

/* Rows of agents, branches or call sites. */
.pp-fleet { display: grid; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-lg); background: var(--rz-raised); overflow: hidden; }
.pp-fleet > div { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); align-items: center; gap: var(--rz-space-6) var(--rz-space-14); padding: var(--rz-space-10) var(--rz-space-12); border-top: 1px solid var(--rz-line); }
.pp-fleet > div:first-child { border-top: 0; }
.pp-fleet .rz-mix { grid-column: 1 / -1; }
/* Label, strip, badge. */
.pp-strips { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--rz-space-10) var(--rz-space-12); }

/* Where it fits. */
.pp-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--rz-space-16); }
.pp-flow__self { display: flex; align-items: center; gap: var(--rz-space-10); font: var(--rz-text-title); color: var(--rz-muted); }
.pp-flow__self b { color: var(--rz-ink); font-weight: 600; }
.pp-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rz-space-10); }
.pp-links li { display: grid; gap: 2px; }

.pp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--rz-space-16); }
.pp-list { margin: 0; padding-left: 1.1em; display: grid; gap: var(--rz-space-6); font: var(--rz-text-small); }
.pp-missing { border-style: dashed; background: transparent; }
.pp-missing .pp-list { color: var(--rz-muted); }

.pp-api td:first-child { width: 4.5rem; color: var(--rz-muted); }
.pp-api td:last-child { width: 2rem; text-align: center; vertical-align: middle; }

.pp-next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rz-space-16); padding-block: var(--rz-space-64); }
.pp-next a { text-decoration: none; color: var(--rz-ink); gap: var(--rz-space-4); }
.pp-next a:last-child { text-align: right; }
.pp-next a:hover { border-color: var(--rz-line-strong); background: var(--rz-raised); }

/* Index tiles. */
.pp-tile { text-decoration: none; color: var(--rz-ink); gap: var(--rz-space-8); transition: border-color var(--rz-motion-base) var(--rz-motion-ease), background-color var(--rz-motion-base) var(--rz-motion-ease); }
.pp-tile:hover { border-color: var(--rz-line-strong); background: var(--rz-raised); }
.pp-tile__name { display: flex; align-items: baseline; gap: var(--rz-space-10); }
main > .pp-section:last-child { padding-bottom: var(--rz-space-64); }

.pp-foot { margin-top: auto; border-top: 1px solid var(--rz-line); background: var(--rz-surface); padding-block: var(--rz-space-24); font: var(--rz-text-small); }
.pp-foot .rz-row { gap: var(--rz-space-8) var(--rz-space-20); }
.pp-foot a { color: var(--rz-muted); text-decoration: none; }
.pp-foot a:hover { color: var(--rz-ink); }
.pp-foot__mark { color: var(--rz-ink) !important; }

/* Reveal: sections rise in once, when they enter. */
.js .pp-section, .js .pp-hero__copy > * { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--rz-motion-ease), transform 700ms var(--rz-motion-ease); }
.js .pp-section.in, .js .in > .pp-hero__copy > * { opacity: 1; transform: none; }
.js .in > .pp-hero__copy > :nth-child(2) { transition-delay: 80ms; }
.js .in > .pp-hero__copy > :nth-child(3) { transition-delay: 160ms; }
.js .in > .pp-hero__copy > :nth-child(n+4) { transition-delay: 240ms; }

@media (max-width: 900px) {
  .pp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--rz-space-24); padding-block: var(--rz-space-40); }
  .pp-flow { grid-template-columns: minmax(0, 1fr); }
  .pp-flow__self { justify-content: center; }
  .pp-flow__self span { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .pp-wrap { padding-inline: var(--rz-space-16); }
  .pp-section { padding-top: var(--rz-space-48); }
  .pp-header .rz-header__right .rz-nav__link { display: none; }
  .pp-fleet > div { grid-template-columns: minmax(0, 1fr); }
  .pp-strips { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-strips > .rz-interval { grid-column: 1 / -1; grid-row: auto; }
  /* Endpoints: method and path on one line, what it does under them. */
  .pp-api tr { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 1.5rem; padding: var(--rz-space-8) var(--rz-space-12); border-bottom: 1px solid var(--rz-line); }
  .pp-api tr:last-child { border-bottom: 0; }
  .pp-api td { padding: 0; border: 0; width: auto !important; }
  .pp-api td:nth-child(3) { grid-column: 2; grid-row: 2; color: var(--rz-muted); }
  .pp-api td:last-child { grid-column: 3; grid-row: 1; }
  .pp-next { grid-template-columns: 1fr; }
  .pp-next a:last-child { text-align: left; }
  /* The 640-wide figures keep readable type by scrolling sideways in their own box. */
  .pp-hero--wide .pp-hero__art { overflow-x: auto; scrollbar-width: thin; }
  .pp-art--wide { width: 600px; max-width: none; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .pp-section, .js .pp-hero__copy > * { opacity: 1; transform: none; }
}