/* Method-page bespoke styles for The Color of Time.
   Two rule sets live here: the references grid (tag column + prose, aligned across languages)
   and the flagship "substrate coupling" 3D depth diagram, where the pigment layer and the
   substrate layer physically separate in space while section 6 is un-settled, and assemble into
   the measured composite as the section's inherited --stage-progress reaches 1.
   Everything else on the page rides the shared tokens/effects in motion.css. */

:root {
  /* Widest tag across all five languages is "Implementation"/"Implementación" (~104px at
     9px mono + letter-spacing); 138px leaves headroom without measuring at render time. */
  --ref-tag-col: 138px;
}

/* Each reference row: a fixed tag column (right-aligned, so pill edges line up down the list)
   beside the flexible citation prose. Collapses to a single column on narrow viewports, where
   right-aligning a lone pill above left-aligned prose reads as mis-registered rather than tidy. */
.ref-row {
  display: grid;
  grid-template-columns: var(--ref-tag-col, 138px) 1fr;
  gap: 4px 16px;
  align-items: start;
}
.ref-tag { justify-self: end; }

@media (max-width: 560px) {
  .ref-row { grid-template-columns: 1fr; }
  .ref-tag { justify-self: start; }
}

/* One appendix reference card (A-E, spread across the three chapter pages that carry
   them): sized to its formulas/tables but centered in the column, never wider than the
   viewport (width:fit-content alone let wide formula cards force page-level horizontal
   scroll on phones). The dark variant is card E's assumptions panel. */
.method-appendix-card {
  background: #F7F1E3;
  border: 1px solid rgba(34, 29, 23, .1);
  border-radius:24px;
  corner-shape: squircle;
  padding: clamp(18px, 2.5vw, 28px);
  margin: 0 auto 16px;
  width: fit-content;
  min-width: min(100%, 720px);
  max-width: 100%;
}
.method-appendix-card.dark {
  background: #1B1712;
  color: #EDE4D2;
  border: none;
  padding: clamp(20px, 2.5vw, 30px);
  margin: 0 auto;
}

/* Contents-hub §-coverage stamp: replaces home's pigment chips inside .contents-motif.
   Language-neutral (§ numbers are stable across the split), so it never needs i18n. */
.method-sec-tag {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .05em;
  white-space: nowrap;
  color: rgba(34, 29, 23, .62);
  background: rgba(247, 241, 227, .75);
  border: 1px solid rgba(34, 29, 23, .2);
  border-radius:999px;
  corner-shape: squircle;
  padding: 5px 12px;
}
.contents-row:hover .method-sec-tag, .contents-row:focus-visible .method-sec-tag {
  border-color: rgba(200, 69, 59, .45);
  color: #C8453B;
}

.substrate-diagram {
  flex: 1 1 260px;
  min-width: 260px;
  align-self: center;
}

/* Base layout (no JS mounted, or reduced motion): a plain, legible vertical stack. */
.substrate-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.sub-layer {
  width: min(300px, 100%);
  background: var(--color-card);
  border: 1px solid rgba(34, 29, 23, .1);
  border-radius:19px;
  corner-shape: squircle;
  padding: 14px 17px;
}
.sub-result {
  background: var(--color-card-dark);
  border-color: rgba(237, 228, 210, .12);
}
.sub-layer-tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9a8b73;
}
.sub-pigment   .sub-layer-tag { color: var(--color-accent); }
.sub-substrate .sub-layer-tag { color: #9a7a28; }
.sub-result    .sub-layer-tag { color: #9C8F79; }
.sub-layer-name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  margin-top: 2px;
  color: var(--color-ink);
}
.sub-result .sub-layer-name { color: var(--color-bg); }

/* Motion layout (JS mounted → root has .js-ready): the three layers collapse into one centered
   grid cell viewed through a shared perspective, then ride the inherited --stage-progress —
   0 = exploded apart in depth (pigment forward/up, substrate back/down, composite faint),
   1 = assembled into a tidy pigment-on-substrate cross-section with the composite reading in. */
.js-ready .substrate-stage {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  height: clamp(290px, 34vw, 344px);
  perspective: 860px;
  perspective-origin: 50% 40%;
}
.js-ready .substrate-stage > .sub-layer {
  grid-area: 1 / 1;
  box-shadow: 0
    calc(12px + (1 - var(--stage-progress, 0)) * 24px)
    calc(26px + (1 - var(--stage-progress, 0)) * 30px)
    -20px rgba(34, 29, 23, .55);
  transition:
    transform var(--motion-dur-stage) var(--motion-ease-presence),
    opacity var(--motion-dur-stage) var(--motion-ease-presence),
    box-shadow var(--motion-dur-stage) var(--motion-ease-presence);
  will-change: transform, opacity;
}
.js-ready .sub-pigment {
  transform:
    translateX(calc((1 - var(--stage-progress, 0)) * -30px))
    translateY(calc(-32px + (1 - var(--stage-progress, 0)) * -58px))
    translateZ(calc(18px + (1 - var(--stage-progress, 0)) * 118px))
    rotateX(calc((1 - var(--stage-progress, 0)) * 17deg));
}
.js-ready .sub-substrate {
  transform:
    translateX(calc((1 - var(--stage-progress, 0)) * 30px))
    translateY(calc(32px + (1 - var(--stage-progress, 0)) * 60px))
    translateZ(calc(-10px + (1 - var(--stage-progress, 0)) * -104px))
    rotateX(calc((1 - var(--stage-progress, 0)) * -13deg));
}
.js-ready .sub-result {
  transform:
    translateY(calc(98px + (1 - var(--stage-progress, 0)) * 22px))
    translateZ(calc(-4px + (1 - var(--stage-progress, 0)) * -26px));
  opacity: calc(.1 + var(--stage-progress, 0) * .9);
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .substrate-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    perspective: none;
  }
  .js-ready .substrate-stage > .sub-layer {
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: none !important;
  }
}