/* Relay: one source, three destinations. Outlined lettering needs no font fetch. */
:root { --sf-logo-ink: #000000; --sf-logo-reverse: #DFDEDC; }
html body .sf-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  gap: 0;
  color: var(--sf-logo-ink) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}
html[data-theme="dark"] body .sf-brand,
html body:is(.inked, .inked-app, .inked-auth, .sf-dark) .sf-brand,
html body .sf-brand--reverse { color: var(--sf-logo-reverse) !important; }
html body .sf-brand svg.sf-brand-lockup {
  display: block;
  width: 195px;
  height: auto;
  max-width: 100%;
  flex: 0 1 auto;
  aspect-ratio: 234 / 48;
  overflow: visible;
  color: inherit !important;
}
/* Legacy auth rules color descendants; the referenced paths must inherit the chosen ink. */
html body .sf-brand svg.sf-brand-lockup * { color: inherit !important; }
/* Legacy dusk pages intentionally retain light paper footers in light mode. */
html:not([data-theme="dark"]) body.sf-dark footer .sf-brand { color: var(--sf-logo-ink) !important; }
html body .sf-brand-mark { border-radius: 0; box-shadow: none; }
html body .sf-brand-mark .sf-brand-symbol { display: block; width: 100%; height: 100%; border-radius: 0; color: inherit; }
html body a.sf-brand:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
/* Keep the existing publishing sidebar's narrow geometry. */
html body .sidebar > .sf-brand svg.sf-brand-lockup { width: 175.5px; }
@media (max-width: 1100px) and (min-width: 851px) {
  html body .sidebar > .sf-brand svg.sf-brand-lockup { width: 141.375px; }
}
@media (max-width: 600px) {
  html body .sf-brand svg.sf-brand-lockup { width: 175.5px; }
  /* Legal-page links and their existing theme switch must wrap, not crush the logo. */
  html body nav:has(> .nav-logo.sf-brand) { flex-wrap: wrap; gap: 12px; }
  html body nav > .nav-logo.sf-brand { min-width: 117px; }
  html body nav:has(> .nav-logo.sf-brand) > .nav-links { flex-wrap: wrap; gap: 12px; max-width: 100%; }
  html body nav:has(> .nav-logo.sf-brand) ~ .content :is(code, a) { overflow-wrap: anywhere; }
}
@media (forced-colors: active) {
  :root { --sf-logo-ink: CanvasText; --sf-logo-reverse: CanvasText; }
  html body a.sf-brand { --sf-logo-ink: LinkText; --sf-logo-reverse: LinkText; }
  html body a.sf-brand:focus-visible { outline-color: Highlight; }
}