/* The badge beside the wordmark, once it is wearing a mark rather than a letter.

   The mark brings its own rounded square and its own colours, so the badge stops being a
   teal tile with a glyph in it and becomes a frame: no background, no padding, and square,
   because every mark is drawn on a square and a 38x41 box would letterbox it. The width
   still comes from .brand-mark in style.css, including that rule's responsive and
   collapsed-sidebar sizes, so the mark follows the sidebar without restating any of it. */
.brand-mark.has-logo{background:none;padding:0;font-size:0;height:auto;aspect-ratio:1;
  border-radius:12px;overflow:hidden}
.brand-mark.has-logo>svg,.brand-mark.has-logo>img{width:100%;height:100%;display:block}
/* An uploaded picture is square already, having been cropped in the browser; contain
   keeps a picture that is not square whole rather than cutting its edges off. */
.brand-mark.has-logo>img{object-fit:contain}
@media(max-width:650px){.brand-mark.has-logo{border-radius:9px}}

/* An uploaded picture is drawn on transparency, and a mark that carries its art in
   near-white -- as the TrueMarch favicon does -- disappears against a light page while
   reading perfectly against a dark one. Giving the picture its own dark backdrop in light
   mode shows the mark exactly as its designer drew it. A CSS filter would make it visible
   too, but invert() also rotates every hue, which turns a gold arrow blue and a brand's
   colours into something its owner never approved.

   Light is the default here, so the backdrop is the default and dark mode clears it, which
   is the shape theme.css already uses. Only >img is touched: a built-in SVG mark brings its
   own colours and needs no help. */
.brand-mark.has-logo>img{background:#0a0a0a}
:root[data-theme="dark"] .brand-mark.has-logo>img{background:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-mark.has-logo>img{background:none}
}