/* Pixelarticons is authored on a 24px grid. Preserve that grid in every control,
   including older button rules that reduced glyphs to 15, 17 or 18px. */
svg.ui-pixel-icon {
 box-sizing:content-box;
 width:24px!important;
 height:24px!important;
 min-width:24px;
 flex:0 0 24px;
 vertical-align:middle;
 image-rendering:pixelated;
}
/* Larger decorative glyphs keep their explicit integer-multiple dimensions. */
svg.ui-pixel-icon[width="48"] {width:48px!important;height:48px!important;min-width:48px;flex-basis:48px}
svg.ui-pixel-icon[width="72"] {width:72px!important;height:72px!important;min-width:72px;flex-basis:72px}
svg.ui-pixel-icon[width="96"] {width:96px!important;height:96px!important;min-width:96px;flex-basis:96px}

/* SVGs in controls do not share a text baseline. The glyph's original 24px
   canvas stays centered in its own box; sidebar navigation is left alone. */
:is(.primary,.secondary,.call-button,.text-button,.theme-toggle,.icon-button,.search-clear,.development-notice-dismiss) > svg.ui-pixel-icon,
.sa-select-arrow > svg.ui-pixel-icon,
.status-symbol > svg.ui-pixel-icon,
.log-gain > svg.ui-pixel-icon {
 display:block;
 align-self:center;
 margin:0;
}
.icon-button,
.search-clear:not([hidden]),
.development-notice-dismiss {
 display:inline-grid;
 place-items:center;
 padding:0;
 line-height:1;
 flex-shrink:0;
}
.icon-button {width:40px;height:40px;min-width:40px}
.log-gain {
 display:grid;
 place-items:center;
 width:32px;
 height:32px;
 min-width:32px;
 flex:0 0 32px;
 padding:0;
 line-height:1;
}
.sa-select-arrow {align-items:center;justify-content:center;line-height:0}

/* The mobile theme control previously left only 20px for a 24px glyph after
   its padding and borders. Give the icon a genuinely centered square. */
@media(max-width:760px) {
 .topbar .theme-toggle {
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  gap:0;
 }
}