/* Download graphs — used only on graphs.php, so it gets its own <link> there instead of being
   @import'd into style.css (that would ship it to every page for one page's benefit). */
.dl-chart-wrap { position: relative; margin-bottom: 0.75rem; }
.dl-chart { display: block; width: 100%; height: auto; }
.dl-tip { display: none; position: absolute; pointer-events: none; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.45rem 0.7rem; box-shadow: var(--shadow-md); font-size: 0.82rem; z-index: 10; min-width: 130px; }
.dl-tip-date { font-weight: 600; margin-bottom: 0.25rem; }
.dl-tip-row { display: flex; align-items: center; gap: 0.35rem; }
.dl-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dl-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.75rem; }
.dl-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; }
.dl-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dl-remove { color: var(--clr-text-muted); text-decoration: none; font-size: 1rem; line-height: 1; }
.dl-remove:hover { color: var(--clr-danger); }
.dl-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.dl-add-form { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dl-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.875rem; }
.dl-suggestions-label { color: var(--clr-text-muted); }
.dl-suggestion { background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.2rem 0.5rem; text-decoration: none; }
.dl-suggestion:hover { border-color: var(--clr-link); }
.dl-empty { color: var(--clr-text-muted); margin: 1.5rem 0; }
.dl-range-bar { display: flex; gap: 2px; margin-bottom: 0.5rem; }
.dl-range-btn { padding: 0.2rem 0.55rem; font-size: 0.8rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); text-decoration: none; color: var(--clr-text-muted); background: var(--clr-surface); }
.dl-range-btn:hover { border-color: var(--clr-link); color: var(--clr-text); }
.dl-range-btn.active { background: var(--clr-link); border-color: var(--clr-link); color: var(--clr-on-link); font-weight: 600; }
.dl-range-sep { width: 1px; background: var(--clr-border); margin: 2px 4px; align-self: stretch; display: inline-block; }