/* Article refinement layer for the execution-gap research note. */
.article-page {
  --article-panel-inset: clamp(var(--uk-space-20), 3vw, var(--uk-space-32));
  --article-row-inset-x: clamp(var(--uk-space-16), 2.6vw, var(--uk-space-24));
  --article-row-inset-y: var(--uk-space-16);
  --article-focus-rise: var(--uk-space-8);
}

.article-page .finding-list,
.article-page .principle-grid {
  background: var(--md3-color-surface-container-lowest);
  border: var(--uk-space-2) solid var(--article-line-soft);
  border-radius: var(--article-radius);
  box-shadow: var(--article-surface-shadow);
  overflow: clip;
}

.article-page .finding-list {
  border-top-color: var(--article-ink);
}

.article-page .evidence-row {
  margin-inline: var(--uk-space-0);
}

.article-page .finding-list article {
  padding: var(--article-row-inset-y) var(--article-row-inset-x);
}

.article-page .principle-grid article,
.article-page .principle-grid article:nth-child(even) {
  padding: var(--uk-space-24) var(--article-row-inset-x);
}

.article-page.is-ready .article-section.will-reveal {
  --reveal-y: var(--uk-space-0);
  opacity: var(--uk-opacity-0);
  transform: none;
  transition: opacity var(--article-motion-line) var(--md3-motion-easing-standard);
  transition-delay: var(--reveal-delay);
  will-change: opacity;
}

.article-page.is-ready .article-section.will-reveal.is-visible {
  opacity: var(--uk-opacity-100);
  transform: none;
  will-change: auto;
}

.article-page.is-ready .motion-depth.is-depth-tracking {
  backface-visibility: hidden;
  contain: layout paint style;
}

.article-page.is-scroll-active .motion-depth.is-depth-tracking {
  transition:
    opacity var(--article-motion-line) var(--md3-motion-easing-standard),
    transform var(--md3-motion-duration-short1) var(--md3-motion-easing-standard),
    box-shadow var(--article-motion-state) var(--md3-motion-easing-standard);
  will-change: transform;
}

.article-page.is-scroll-settled .motion-depth.is-depth-tracking {
  transition:
    opacity var(--article-motion-line) var(--md3-motion-easing-standard),
    transform var(--article-motion-stack) var(--md3-motion-easing-decelerate),
    box-shadow var(--article-motion-stack) var(--md3-motion-easing-decelerate);
  will-change: auto;
}

/* Metric values count up on reveal (see site.js). Tabular figures keep every
   digit the same advance width, so a value climbing 0 -> 88 holds its position
   instead of wobbling frame to frame. The bar-row values are already mono. */
.article-page .evidence-row__metric,
.article-page .bar-row__value,
.article-page .variance-row__value,
.article-page .denominator-row strong,
.article-page .task-row strong,
.article-page .failure-row strong,
.article-page .metric-card strong {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .article-page {
    --article-panel-inset: var(--uk-space-20);
    --article-row-inset-x: var(--uk-space-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-page.is-ready .article-section.will-reveal,
  .article-page.is-ready .article-section.will-reveal.is-visible,
  .article-page.is-ready .motion-depth.is-depth-tracking,
  .article-page.is-scroll-active .motion-depth.is-depth-tracking,
  .article-page.is-scroll-settled .motion-depth.is-depth-tracking {
    transition: none;
    transform: none;
    will-change: auto;
  }
}