.editorial-page .pg-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  margin: 20px 0;
}

.editorial-page .pg-fields label {
  display: grid;
  flex: 1 1 150px;
  gap: 6px;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.editorial-page .pg-fields input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ed-line);
  border-radius: 10px;
  background: var(--kinetic-bg);
  color: var(--kinetic-text);
  font: inherit;
}

.editorial-page .pg-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.editorial-page .pg-metrics > div {
  display: grid;
  gap: 5px;
  padding: 14px 0;
  border-block: 1px solid var(--ed-line);
}

.editorial-page .pg-metrics span {
  color: var(--ed-muted);
  font-size: 0.78rem;
}

.editorial-page .pg-metrics strong {
  color: var(--kinetic-text);
  font-size: 1.25rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.editorial-page .ed-content .pg-bars {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.editorial-page .ed-content .pg-bars li {
  padding: 0;
  margin: 0 0 10px;
}

.editorial-page .pg-bar-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
}

.editorial-page .pg-track {
  display: block;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--kinetic-surface-high);
}

.editorial-page .pg-bar {
  display: block;
  height: 100%;
  background: var(--kinetic-primary);
  transform-origin: left;
  animation: pg-fill 0.4s ease-out both;
}

.editorial-page .pg-bar.pg-below {
  background: var(--ed-muted);
}

.editorial-page .pg-unit {
  font-size: 0.8rem;
  color: var(--ed-muted);
}

.editorial-page .ed-figure.ed-figure-phone img {
  width: min(100%, 390px);
}

html:not(.pg-interactive) .pg-interactive-controls {
  display: none;
}

@keyframes pg-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (width <= 600px) {
  .editorial-page .pg-metrics {
    gap: 10px;
  }

  .editorial-page .pg-metrics > div {
    display: flex;
    flex-direction: column;
  }

  .editorial-page .pg-metrics span {
    line-height: 1.5;
  }

  .editorial-page .pg-metrics strong {
    margin-top: auto;
    font-size: 1.05rem;
  }
}