/* ==========================================================================
   P5B layout shell - the per-section hybrid (doc 13 §1, plan T2/B2a).

   The page skeleton is normal document flow. Legacy pixel-tuned sections
   (hero; comparison→CTA→footer tail) render inside per-section "window"
   wrappers that show a slice of the original 1440px Figma canvas:
   the slice keeps its original absolute coordinates from styles.css and is
   shifted up by --win-top canvas px, scaled by --scale. New sections
   (Shift, Problem, Index chapter) are native flow siblings - no transform
   ancestors, so position:sticky/fixed behave.

   styles.css stays read-only: each slice keeps the class `figma-frame`
   so every legacy selector still applies; the canvas-level geometry of
   .figma-frame is overridden here (position/height/transform/overflow).
   ========================================================================== */

:root { --scale: 1; }

html, body { background: #fff; }

/* styles.css guards horizontal overflow with overflow-x:hidden, which turns
   body into a scroll container and silently kills position:sticky (the Index
   chapter's stage). clip was tried, but some engines treat root clip+visible
   as fully scroll-locked. v3 contains every horizontal-overflow source at the
   section level (.sheet-sec/.section-canvas/.sticky-header all overflow:
   hidden), so the ROOT needs no guard at all - visible creates no scroll
   container, sticky engages, and script.js clamps any residual drift. */
html, body { overflow-x: visible !important; }

/* The old page painted its full-bleed grey/black bands as BODY background
   layers at scaled canvas offsets (styles.css body rule). In the hybrid the
   document is no longer one canvas, so body-level painting is retired; the
   tail's bands come from the legacy rect elements re-enabled inside the
   slice (geometry untouched in styles.css), and the new flow sections paint
   their own worlds. */
@media (min-width: 901px) {
  body { background-image: none !important; }
  .figma-slice .rect-gradient-consult { display: block; }
}

main.flow {
  position: relative;
  width: 100%;
  background: #fff;
  /* no bottom padding: the CTA is the terminal screen with no footer. */
}

/* The updated hero sits BELOW the 84px header (not behind it). On desktop the
   header is position:fixed, so main gets matching top clearance = 84 × scale. */
@media (min-width: 901px) {
  main.flow { padding-top: calc(84 * var(--u)); }
}

/* --- the window wrapper ------------------------------------------------ */

.section-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* height set by script.js: var(--win-h) * var(--scale) */
}

.section-canvas > .canvas-1440 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  margin-left: -720px;
  transform-origin: top center;
  transform: scale(var(--scale)) translateY(calc(var(--win-top, 0) * -1px));
}

/* The slice: original canvas coordinate frame, geometry overrides only.
   (Legacy `.figma-frame` canvas styles - absolute, 1440x5940+, scaled -
   are replaced by the wrapper mechanism above.) */
.section-canvas > .canvas-1440 > .figma-slice.figma-frame {
  position: relative;
  top: auto;
  left: auto;
  width: 1440px;
  height: calc(var(--win-top, 0) * 1px + var(--win-h, 0) * 1px);
  transform: none;
  overflow: visible;
  background: transparent;
}

/* --- window constants (canvas units) ------------------------------------
   Desktop values measured against output/p5b-refs/boxes-1440.json
   (canvas 1440x5940): hero text 47-668, arch bottom ~1180; why 4217+601;
   consult 5189+446; footer 5902+20. */

#win-hero { --win-top: 0;    --win-h: 1235; }
#win-tail { --win-top: 4140; --win-h: 1800; }

/* Flow slots for the new sections (filled in T3/T4) */
.flow-slot { position: relative; width: 100%; }

/* --- mobile/tablet portrait (≤900px): the legacy mobile layout FLOWS (styles.css resets
   positions to static/relative), so no windowing - slices are plain flow
   containers and heights are content-driven. -------------------------------- */

@media (max-width: 900px) {
  .section-canvas { overflow: visible; height: auto !important; }
  /* canvas-coordinate probe markers would stretch the flowing mobile slice */
  .figma-slice .dark-marker-consult { display: none; }
  .section-canvas > .canvas-1440 {
    position: relative;
    left: auto;
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  .section-canvas > .canvas-1440 > .figma-slice.figma-frame {
    width: 100%;
    height: auto;
  }
}

/* --- T6 (B2e): unified nav - the standout proof pill ---------------------- */

/* Both navs are flex rows inside fixed-width absolute containers; widen the
   boxes so the 4th item fits, keeping the right edge where it was. */
.hero-section > nav { width: 660px; left: 658px; }
.sticky-nav { width: 660px; left: 658px; }

.nav-index-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px 7px;
  border: 1px solid #b5b3ad;
  border-radius: 999px;
  color: #000;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.nav-index-pill .pill-dot {
  position: relative !important; /* survives universal-absolute rules in either header context */
  width: 9px;
  height: 9px;
  background: currentColor;
  flex: 0 0 auto;
}

.nav-index-pill:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* hero nav variant lives inside the canvas flex row */
.hero-section > nav .nav-index-pill { position: relative; left: auto; top: auto; }

/* over dark chapters the sticky header inverts */
.sticky-header.is-over-dark .nav-index-pill {
  color: #f2f0ec;
  border-color: rgba(242, 240, 236, 0.55);
}
.sticky-header.is-over-dark .nav-index-pill:hover {
  background: #f2f0ec;
  color: #000;
  border-color: #f2f0ec;
}

/* --- T6: inline concept links (doc 13 §6) --------------------------------- */

.concept-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.45);
  padding-bottom: 1px;
  transition: border-color 160ms ease, color 160ms ease;
}
.concept-link:hover { border-bottom-color: #000; }

/* dark-world variant (Index chapter) */
.index-chapter .concept-link,
[data-ix-prelude] .concept-link { border-bottom-color: rgba(242, 240, 236, 0.45); }
.index-chapter .concept-link:hover,
[data-ix-prelude] .concept-link:hover { border-bottom-color: #e8dcc0; color: #fff; }

/* inside a canvas slice the universal absolute rule must not lift inline
   anchors out of their text flow */
.figma-slice .concept-link { position: static; }
.figma-slice .footer-links, .figma-slice .footer-links a { position: static; }

/* --- T6: footer links row -------------------------------------------------- */

.footer-links { color: #5f5f5f; }
.footer-links a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.4);
  padding-bottom: 1px;
}
.footer-links a:hover { border-bottom-color: #000; }

/* --- header-tone probe markers ------------------------------------------
   Invisible spans marking dark zones; script.js checks their live rects.
   The tail's dark band (consult gradient into footer) in canvas coords. */
/* Only the invisible PROBE markers hide; real dark sections also carry
   [data-dark] and must render. */
.dark-marker-consult[data-dark] { pointer-events: none; visibility: hidden; }
.figma-slice .dark-marker-consult {
  position: absolute;
  top: 5060px;
  left: 0;
  width: 100%;
  height: 880px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}