/* Load after pasture.css. Script order stays pasture-demo.js then pasture.js, both defer, once each.
   Required: [data-reader] .ps-motion-stage [data-scene]
   [data-section-label] [data-card-position] [data-focus-label] [data-cut-count] [data-progress-fill]
   Optional: [data-keyboard] [data-cap] [data-tour-toggle] [data-depth-dots] .ps-progress-track
   [data-layout] [data-title-mode] [data-demo-chrome] [data-demo-size] [data-download="sample"] */

.ps-motion-stage { touch-action: pan-y; }

.ps .ps-motion-sentence.ps-motion-table-wrap {
  display: block;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  background-image: linear-gradient(transparent 46%, var(--paper-red) 46% 58%, transparent 58%);
}

.ps-motion-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 max(15px, calc(var(--scene-font) * .86))/1.35 var(--reading-font);
  letter-spacing: 0;
  text-align: left;
}

.ps-motion-table th {
  font: 400 .78em/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

.ps-motion-table th,
.ps-motion-table td {
  padding: .28em .4em .32em 0;
  border-bottom: 1px solid var(--paper-line);
  vertical-align: top;
}

@media (max-width: 599px) {
  .ps-hero-motion .ps-motion-stage { height: clamp(188px, 48vw, 214px); }
  .ps-hero-motion .ps-motion-reader[data-compact="true"] .ps-motion-card { padding: 22px 8%; }
  .ps .ps-motion-reader[data-compact="true"] .ps-motion-text {
    font-size: max(17px, calc(var(--scene-font) * var(--reading-scale, 1)));
    line-height: 1.5;
  }
  .ps-hero-motion .ps-motion-reader[data-compact="true"][data-layout="coach"] .ps-motion-card.is-neighbor { display: none; }
  .ps-motion-reader[data-compact="true"] .ps-card-edge-label { font-size: 9px; letter-spacing: .08em; }
}

@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .ps-hero-motion .ps-motion-stage { height: min(300px, 72svh); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-motion-reader .ps-motion-card,
  .ps-motion-reader .ps-motion-sentence,
  .ps-motion-reader .ps-progress-track i,
  .ps-motion-reader .ps-card-edge-label {
    animation: none !important;
    transition: none !important;
  }
}

.ps-motion-reader[data-motion="reduce"] .ps-motion-card,
.ps-motion-reader[data-motion="reduce"] .ps-motion-sentence,
.ps-motion-reader[data-motion="reduce"] .ps-progress-track i {
  animation: none !important;
  transition: none !important;
}