/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Material Symbols base rule.
 *
 * Icons are rendered as ligatures — <span class="material-symbols-outlined">rate_review</span>
 * — and the class that turns that word into a glyph lives only in Google's
 * remote stylesheet. On a cold cache the span is just the literal word in the
 * body font at full width, so the sidebar visibly rearranged itself while the
 * font was in flight: "rate_review" is 11 characters and shoved "Review Queue"
 * onto two lines, while shorter icon names shifted less. The distortion scaled
 * with the icon NAME, which is the fingerprint of this failure.
 *
 * Declaring the rule here (served from our own origin, already in the critical
 * path) reserves the glyph box before Google's CSS arrives, so nothing can move.
 *
 * display: inline-block is load-bearing, not decoration: a <span> is a
 * non-replaced inline element, and width/height/overflow are ignored on those.
 * Remove it and this whole rule silently stops working.
 */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  display: inline-block;
  width: 1em;       /* em, so the per-icon inline font-size in the views still applies */
  height: 1em;
  overflow: hidden; /* clip the ligature word until the font resolves it */
  /* An inline-block with overflow != visible takes its baseline from its bottom
     margin edge (CSS 2.1 §10.8.1) rather than its last line box, so the two
     lines above shift every icon in a baseline-aligned context. Today every
     text-adjacent icon sits in a flex container with items-center, where
     baseline is never consulted — this keeps the next non-flex caller working. */
  vertical-align: middle;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}