:root {
  --control-radius: 999px;
  --control-border: 1px solid rgb(255 255 255 / 10%);
  --circular-control-size: 44px;
  --circular-control-icon-size: 24px;
}

/* Shared control chrome for both the feed and standalone show viewer.
   Keep each control's existing fill, size, and layout. */
:root body :is(
  .open-app-pill,
  .circular-button,
  .home-primary-button, .home-back-button, .home-nav-app, .nav-app-link,
  .home-welcome-header > button, .home-tour-header > button,
  .home-mobile-menu, .viewer-mobile-menu,
  .home-sidebar-heading > button, .viewer-sidebar-heading > button,
  .home-feed-action, .action-rail button,
  .home-feed-controls button, .home-feed-pager button, .episode-navigation button,
  .home-narrative-controls button, .home-narrative-controls a,
  .narrative-controls button, .narrative-controls a,
  .home-continuation-narrative button, .continuation-narrative button,
  .home-back-to-now, .back-to-now, .home-feed-retry,
  .home-show-detail-close, .home-show-detail-hero button,
  .home-contributors-sheet > header button, .panel-header button,
  .detail-hero-copy > a, .player-back,
  .share-button, .copy-button, .readonly-composer, .unavailable-shell a,
  .home-show-detail-stats, .detail-stats,
  .home-contributor-summary > :first-child, .narrative-contributor-avatar,
  .series-flying-comment-avatar, .comment-avatar,
  .home-show-detail-avatar, .creator-row img, .creator-placeholder,
  .home-contributor-row-header > :first-child, .contributor-row-avatar,
  .home-contributor-row-play, .contributor-row-play,
  .home-community-comments img, .continuation-author img,
  .home-show-detail-cast figure img, .detail-cast img
):not(.reference-token) {
  border: var(--control-border);
  border-radius: var(--control-radius);
  box-shadow: none;
  text-shadow: none;
}

:root body button.circular-button {
  box-sizing: border-box;
  width: var(--circular-control-size);
  height: var(--circular-control-size);
  min-width: var(--circular-control-size);
  min-height: var(--circular-control-size);
  padding: 9px;
  flex: none;
  line-height: 0;
  cursor: pointer;
}

:root body button.circular-button > svg {
  display: block;
  width: var(--circular-control-icon-size);
  height: var(--circular-control-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 800px) {
  :root .details-panel-open .panel-header {
    top: calc(env(safe-area-inset-top) + 14px);
    right: 18px;
    left: 18px;
  }
  :root .home-show-detail-close {
    top: calc(env(safe-area-inset-top) + 14px);
    right: 18px;
  }
}