/*
 * 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.
 */

/*
 * The logo mark. Drawn as a background, not a pair of <img> tags: the old
 * dark:hidden / dark:block pair downloaded BOTH 480px theme variants on every
 * page (~23KB of a 100-140KB page) because a display:none <img> still fetches.
 * A background image is fetched only when its rule matches, so a page loads
 * exactly one variant, and html.dark (the head script resolves the manual
 * toggle and prefers-color-scheme into that class) picks which. Flipping the
 * theme later fetches the other one on demand. -webkit-image-set is the
 * widely supported spelling (Chrome, Firefox 90+, every Safari); each density
 * is a lossless cut of the 480px master at 1x/2x/3x the largest rendered size.
 */
.logo-mark {
  display: inline-block;
  flex: none;
  background: -webkit-image-set(url("/assets/blacklogo-48-6794ad65.webp") 1x, url("/assets/blacklogo-96-63f7c8ae.webp") 2x, url("/assets/blacklogo-144-c9908e31.webp") 3x) center / contain no-repeat;
}

.dark .logo-mark {
  background-image: -webkit-image-set(url("/assets/whitelogo-48-fb514844.webp") 1x, url("/assets/whitelogo-96-34391737.webp") 2x, url("/assets/whitelogo-144-4e51db68.webp") 3x);
}