/* R17.1 — user-requested icon-only media selection. Load LAST.
   These are the exact same modes, events and SVGs; labels remain in aria/title.
   44px targets are retained. Recovered width belongs to media, not blank chrome. */
:root {
  --wp-mode-target: 44px;
  --wp-mode-icon: 20px;
  --wp-mode-gap: 2px;
  --wp-mode-pad: 1px;
  --wp-feed-header: 50px;
}
.media-selector.media-selector--icons,
.app-stage[data-layout="mobile"][data-page="today"] .topbar .media-selector.media-selector--icons {
  display: inline-flex;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  gap: var(--wp-mode-gap);
  padding: var(--wp-mode-pad);
  border-radius: 17px;
  align-items: center;
}
.media-selector.media-selector--icons > button,
.app-stage[data-layout="mobile"][data-page="today"] .topbar .media-selector.media-selector--icons > button {
  flex: 0 0 var(--wp-mode-target);
  width: var(--wp-mode-target);
  min-width: var(--wp-mode-target);
  height: var(--wp-mode-target);
  min-height: var(--wp-mode-target);
  padding: 0;
  gap: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
}
.media-selector.media-selector--icons > button > svg {
  width: var(--wp-mode-icon);
  height: var(--wp-mode-icon);
  pointer-events: none;
}
.app-stage[data-page="today"] .topbar,
.app-stage[data-layout="mobile"][data-page="today"] .topbar {
  height: var(--wp-feed-header);
}
.app-stage[data-layout="mobile"][data-page="today"] .topbar {
  padding-block: 1px;
}
.app-stage[data-layout="mobile"] .scene-top { top: 54px; }
/* Do not stretch the selector to fill the former label space in any surface. */
.media-selector--icons.media-selector-top { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .media-selector--icons button { transition: none; }
}