/* These styles only touch the additional controls inside a marked media block. */
[data-hui-story-media] .hui-story-volume-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 16px 0 4px;
}

[data-hui-story-media] [data-hui-story-volume] {
  width: min(100%, 240px);
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: #7b4e35;
  cursor: pointer;
}

[data-hui-story-media] [data-hui-story-max] {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #b4a495;
  border-radius: 0;
  background: #faf7f2;
  color: #382f28;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}

[data-hui-story-media] [data-hui-story-max]:hover:not(:disabled) {
  background: #ece4d9;
}

[data-hui-story-media] [data-hui-story-volume]:focus-visible,
[data-hui-story-media] [data-hui-story-max]:focus-visible {
  outline: 2px solid #7b4e35;
  outline-offset: 3px;
}

[data-hui-story-media] [data-hui-story-volume]:disabled,
[data-hui-story-media] [data-hui-story-max]:disabled {
  opacity: .55;
  cursor: default;
}

[data-hui-story-media] [data-hui-story-status] {
  display: block;
  color: #554b42;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 480px) {
  [data-hui-story-media] .hui-story-volume-controls {
    gap: 8px 12px;
  }

  [data-hui-story-media] [data-hui-story-volume] {
    flex: 1 1 180px;
  }
}