/* Real brand logos in their own colours (owner, 2026-11-01: "the real Facebook,
   Instagram and WhatsApp icons, in real colours"; he picked SVGL, svgl.app).
   Every `<i class="ti ti-brand-…">` on every page draws the logo file in place of
   the Tabler font glyph, so no component has to change and a `color` set on it
   no longer matters. Loaded after Tabler's own stylesheet wherever Tabler is
   loaded (tests/t-brand-logos.mjs). Every logo must read in BOTH themes (owner,
   2026-11-01): OpenAI's logo is black, so dark mode gets SVGL's white one.
   Shopify is not in Tabler at all (the dashboard used to borrow Shopee's bag
   for it): `ti-brand-shopify` draws only from here. */
.ti.ti-brand-facebook::before,
.ti.ti-brand-instagram::before,
.ti.ti-brand-whatsapp::before,
.ti.ti-brand-messenger::before,
.ti.ti-brand-google::before,
.ti.ti-brand-meta::before,
.ti.ti-brand-wordpress::before,
.ti.ti-brand-shopify::before,
.ti.ti-brand-openai::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: center / contain no-repeat;
}
.ti.ti-brand-facebook::before  { background-image: url("/logos/facebook.svg"); }
.ti.ti-brand-instagram::before { background-image: url("/logos/instagram.svg"); }
.ti.ti-brand-whatsapp::before  { background-image: url("/logos/whatsapp.svg"); }
.ti.ti-brand-messenger::before { background-image: url("/logos/messenger.svg"); }
.ti.ti-brand-google::before    { background-image: url("/logos/google.svg"); }
.ti.ti-brand-meta::before      { background-image: url("/logos/meta.svg"); }
.ti.ti-brand-wordpress::before { background-image: url("/logos/wordpress.svg"); }
.ti.ti-brand-shopify::before   { background-image: url("/logos/shopify.svg"); }
.ti.ti-brand-openai::before    { background-image: url("/logos/openai.svg"); }
/* Dark: the theme switch (data-theme on <html>), or the system setting where no switch has spoken. */
[data-theme="dark"] .ti.ti-brand-openai::before { background-image: url("/logos/openai-dark.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ti.ti-brand-openai::before { background-image: url("/logos/openai-dark.svg"); }
}
/* On a maroon fill (the chosen tab of a Segmented control) the black logo would
   vanish in light mode too: the white one there, in every theme. */
.seg-item[aria-current="true"] .ti.ti-brand-openai::before { background-image: url("/logos/openai-dark.svg"); }