/* Paper figures polish */
.fig-wrap { margin: 24px 0 40px; }
.fig-title { margin-bottom: 10px; }
.chart     { width: 100%; height: 360px; position: relative; }

.legend {
  margin-top: 10px;           /* whitespace above legend */
  font-size: 14px;
  line-height: 1.2;
  max-width: 480px;           /* keep it compact */
}
.legend .dygraph-legend {     /* Dygraph injects here */
  padding: 6px 8px;
  border: 1px solid #d5e2d5;
  border-radius: 6px;
  background: #fff;
  display: inline-block;
}

.btn-row { margin-top: 10px; }
.btn-green {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #2e7d32;
  background: #3ca553;
  color: #fff; text-decoration: none; font-weight: 600;
  cursor: pointer;
}
.btn-green:hover { background: #2f944a; }


/* Keep legend inside, compact, no box */
.chart { position: relative; width: 100%; height: 360px; }

.chart .dygraph-legend {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;   /* remove rounded box */
  border: 0;
  box-shadow: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.2;
  max-width: 220px;          /* cap width so it doesn't dominate */
  white-space: normal;       /* allow wrapping if needed */
}
.chart .dygraph-legend {
  text-align: right;      /* right-align lines of legend text */
  max-width: 220px;       /* keep it compact (you already have this) */
}

.legend-note {
  margin-top: 8px;
  font-size: 0.95em;
  opacity: 0.9;
}
.chart-wrap {
  position: relative;
}

.chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;          /* big but not silly */
  font-weight: 600;
  color: #555;
  background: rgba(255,255,255,0.6); /* subtle veil over chart area */
  backdrop-filter: blur(1px);
  z-index: 2;
  transition: opacity 180ms ease-out;
}

.chart-loading.hidden {
  opacity: 0;
  pointer-events: none;
}