/*
 * Material Symbols Outlined, self-hosted.
 *
 * Served from our own origin so a customer's network, an ad blocker or a Google
 * outage cannot leave raw icon names ("check_circle") on the page. The file is
 * a subset holding only the glyphs the app uses, at weight 400, optical size 24,
 * with the FILL axis variable (0..1). That is why it is 14 KB, not 1.1 MB.
 *
 * ADDING AN ICON: a name missing from the subset renders as raw text. Rebuild
 * the font (see web/fonts/README.md) whenever a new icon name is used.
 *
 * font-display: block holds the icon invisible while it loads instead of
 * flashing the raw name first.
 */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
}

/*
 * The base rule Google's stylesheet used to ship for this class. The app relies
 * on it: many icons set no size of their own and inherit the 24px, and without
 * line-height: 1 and inline-block they sit in a taller, differently-sized box.
 * Dropping the Google stylesheet dropped these, which is what shrank the nav
 * icons to the body's 16px.
 */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*
 * Last resort. icon_guard.js adds .icons-failed to <html> if the font could not
 * be loaded, and collapsing the icons is better than showing their names.
 */
.icons-failed .material-symbols-outlined {
  font-size: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}