/* edash-legend.css -- the one interactive legend (js/edash-legend.js).
   Chart kit cards, plain Chart.js charts and the Dashboard category list
   all use it. Only existing tokens: --ink, --muted, --primary, --border;
   type and radii from the roles in css/glass.css. No blur: a legend sits
   on the card next to a chart (scripts/check-no-glass-under-content.py). */

.edl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; }
.edl[hidden] { display: none; }
.edl-host-top > .edl { margin: 0 0 6px; }

.edl-item, .edl-all {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 9px;
  border: 1px solid transparent; border-radius: var(--r-chip); background: transparent;
  color: var(--ink); font: inherit; font-size: var(--type-legend-size); font-weight: var(--type-legend-weight);
  line-height: var(--type-legend-lh); cursor: pointer; text-align: left;
  transition: opacity .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.edl-item:hover, .edl-item.is-hot { background: color-mix(in srgb, var(--primary) 9%, transparent); border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.edl-item:focus-visible, .edl-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* hidden: dimmed and struck through */
.edl-item.is-off { color: var(--muted); opacity: .55; }
.edl-item.is-off .edl-label { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.edl-item.is-off .edl-sw { opacity: .45; }

/* while one entry is highlighted, the others fade like their series */
.is-hovering > .edl-item:not(.is-hot) { opacity: .45; }
.is-hovering > .edl-item.is-off:not(.is-hot) { opacity: .3; }

.edl-all { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.edl-all:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.edl-all[hidden] { display: none; }
.edl-all i { font-size: var(--type-axis-tick-size); }

/* swatches: a line stroke, a filled box, a dot */
.edl-sw { flex: none; display: inline-block; background: var(--edl-c, var(--muted)); }
.edl-sw-line { width: 14px; height: 3px; border-radius: var(--r-chip); }
.edl-sw-line.is-dash { background: repeating-linear-gradient(90deg, var(--edl-c, var(--muted)) 0 4px, transparent 4px 7px); }
.edl-sw-box { width: 10px; height: 10px; }
.edl-sw-dot { width: 10px; height: 10px; border-radius: var(--r-chip); }
.edl-label { min-width: 0; overflow-wrap: anywhere; }

/* chart kit card: the legend sits between the plot and the caption */
.ck-legend { margin-top: 4px; }

/* Dashboard category list (js/dashboard.js): each row is a legend
   button, bound inline so css/shell-glass.css's `.po-legend-list >
   .po-legend-row` glass still reaches it */
.po-legend-list > .edl-item.po-legend-row {
  width: 100%; min-height: 0; padding: 12px; gap: 12px; border-radius: var(--r-ctl);
  font-weight: inherit; color: inherit;
}
.po-legend-list > .edl-item.po-legend-row:hover,
.po-legend-list > .edl-item.po-legend-row.is-hot { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px; }
.po-legend-list > .edl-item.po-legend-row.is-off .po-legend-label,
.po-legend-list > .edl-item.po-legend-row.is-off .po-legend-count { text-decoration: line-through; }
.po-legend-list > .edl-all { align-self: flex-start; }

/* Dashboard mini map pins follow the category legend */
.po-pin-marker.is-edl-off { display: none; }
.po-pin-marker.is-edl-faded { opacity: .25; }

@media (max-width: 700px) {
  .edl-item, .edl-all { min-height: 32px; padding: 5px 10px; }
}