Use a more specific namespace

wiki/src/donate.html

@@ -493,9 +493,9 @@ permitted by law.</strong></p>
 
 <!-- Spreadsheet in fundraising.git:tools:expenses-chart.ods -->
 
-<figure>
+<figure class="chart">
   <!-- Adapted from https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 -->
-  <div class="figure-content">
+  <div class="chart-content">
     <svg width="75%" height="75%" viewBox="0 0 64 64">
       <!-- stroke-dashoffset = 100 - sum(lengths of preceding segments) + offset of 1st segment -->
       <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#5da5da" stroke-width="32" stroke-dasharray="22 78" stroke-dashoffset="25" aria-labelledby=""></circle>
@@ -508,8 +508,8 @@ permitted by law.</strong></p>
     </svg>
   </div>
 
-  <figcaption class="figure-key">
-    <ul class="figure-key-list">
+  <figcaption class="chart-key">
+    <ul class="chart-key-list">
       <li id="key-blue"><div class="key-dot"></div><div class="key-label">Release management & code maintenance</div><div class="key-percent">(22%)</div></li>
       <li id="key-orange"><div class="key-dot"></div><div class="key-label">Administration, fundraising & management</div><div class="key-percent">(22%)</div></li>
       <li id="key-green"><div class="key-dot"></div><div class="key-label">New features</div><div class="key-percent">(21%)</div></li>
@@ -535,9 +535,9 @@ permitted by law.</strong></p>
 
 <!-- Spreadsheet in fundraising.git:tools:income-chart.ods -->
 
-<figure>
+<figure class="chart">
   <!-- Adapted from https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 -->
-  <div class="figure-content">
+  <div class="chart-content">
     <svg width="75%" height="75%" viewBox="0 0 64 64">
       <!-- stroke-dashoffset = 100 - sum(lengths of preceding segments) + offset of 1st segment -->
       <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#5da5da" stroke-width="32" stroke-dasharray="36 64" stroke-dashoffset="25" aria-labelledby=""></circle>
@@ -547,8 +547,8 @@ permitted by law.</strong></p>
     </svg>
   </div>
 
-  <figcaption class="figure-key">
-    <ul class="figure-key-list">
+  <figcaption class="chart-key">
+    <ul class="chart-key-list">
       <li id="key-blue"><div class="key-dot"></div><div class="key-label">Passionate people like you</div><div class="key-percent">(36%)</div></li>
       <li id="key-orange"><div class="key-dot"></div><div class="key-label">Foundations & NGOs</div><div class="key-percent">(30%)</div><br/>like Mozilla or the Handshake Foundation</li>
       <li id="key-green"><div class="key-dot"></div><div class="key-label">Entities related to the US government</div><div class="key-percent">(25%)</div><br/>like the Open Technology Fund or the ISC Project</li>

wiki/src/local.css

@@ -1401,36 +1401,36 @@ div#highlight p {
 
 /* Chart */
 
-figure {
+figure.chart {
   display: flex !important;
   flex-direction: column;
 }
 @media (min-width: 640px) {
-  figure {
+  figure.chart {
     flex-direction: row;
   }
 }
-.figure-content,
-.figure-key {
+.chart-content,
+.chart-key {
   flex: 1;
   padding-left: 15px;
   padding-right: 15px;
   align-self: center;
 }
-.figure-content svg {
+.chart-content svg {
   height: auto;
 }
-.figure-key-list {
+.chart-key-list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.figure-key-list li {
+.chart-key-list li {
   margin: 0 0 8px;
   padding: 0;
   font-size: 14px;
 }
-.figure-key-list li div {
+.chart-key-list li div {
   display: inline-block;
 }
 .key-dot {