.progression__controls { --progression-css: 1; }



.progression[data-progression="interactive"] { position: relative; }
[data-progression="interactive"][data-progression-stage],
[data-progression="interactive"] [data-progression-stage] { display: grid; gap: 0; }

[data-progression="interactive"] .progression__frame {
  grid-row: 1;
  grid-column: 1;
  align-self: start;
  list-style: none;               
  opacity: 0;
  visibility: hidden;
}


[data-progression="interactive"] .progression__frame[data-current] {
  opacity: 1;
  visibility: visible;
}



[data-progression="interactive"] .progression__frame img {
  max-height: min(70svh, 34rem);
  width: auto;
  max-width: 100%;
  margin-inline: 0;
}

.progression__controls {
  grid-row: 2;                    
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: 1.25rem;
}


.progression__btn {
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border: 1px solid #666d66;      
  border-radius: .4rem;
  background: transparent;
  color: #f2efe9;
  font: inherit;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
}

.progression__btn:hover { border-color: #7c9885; color: #7c9885; }


.progression__btn:focus-visible,
.progression__scrub:focus-visible,
.progression[data-progression="interactive"]:focus-visible {
  outline: 3px solid #c9a227;
  outline-offset: 3px;
}


.progression__btn[disabled] { opacity: .55; cursor: default; border-color: #2c302c; }
.progression__btn[disabled]:hover { border-color: #2c302c; color: #f2efe9; }


.progression__scrub {
  flex: 1 1 8rem;
  min-width: 6rem;
  max-width: 22rem;
  height: 2.75rem;
  accent-color: #7c9885;
  cursor: pointer;
}

.progression__status {
  flex: 0 0 auto;
  margin: 0;
  color: #a9a49a;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;   
}


.progression__note {
  flex: 1 0 100%;
  margin: 0;
  color: #a9a49a;
  font-size: .85rem;
}

.progression__note:empty { display: none; }


@media (prefers-reduced-motion: no-preference) {
  [data-progression="interactive"] .progression__frame {
    transition: opacity .45s ease, visibility .45s;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-progression="interactive"] .progression__frame {
    transition: none;
    animation: none;
  }
}