/* A compact porcelain key; each colored toggle identifies its graph layer. */
#connection-legend {
  position:absolute;z-index:11;bottom:92px;left:20px;
  width:184px;border-radius:18px;background:linear-gradient(145deg,#f1f4f6,#e2e7eb);
  box-shadow:var(--neu-raised);color:var(--ink);pointer-events:auto;
}
#connection-legend details[open] {padding-bottom:6px}
#connection-legend summary {
  display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:38px;
  padding:0 14px;font-size:11px;font-weight:600;list-style:none;cursor:pointer;border-radius:18px;
}
#connection-legend summary::-webkit-details-marker {display:none}
#connection-legend summary:focus-visible {outline:2px solid #62717c;outline-offset:4px}
#connection-legend summary svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .2s}
#connection-legend details[open] summary svg {transform:rotate(180deg)}
#connection-legend-items {
  margin:0 6px;padding:4px;border-radius:13px;background:var(--neu-surface);box-shadow:var(--neu-inset);
}
.connection-legend-row {
  position:relative;display:grid;grid-template-columns:1fr 26px;align-items:center;gap:4px;
  /* 16px switch + 12px separation (previously 20px + 24px). */
  min-height:28px;padding:0 8px;border-radius:10px;font-size:11px;cursor:pointer;
}
.connection-legend-row:hover {background:#ffffff45}
.connection-legend-row:has(input:focus-visible) {outline:2px solid #62717c;outline-offset:-1px}
.connection-legend-row input {position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.connection-switch {
  width:26px;height:16px;border-radius:10px;background:var(--neu-surface);box-shadow:var(--neu-inset);
  position:relative;pointer-events:none;
}
.connection-switch:before {
  content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;
  background:linear-gradient(145deg,#fff,#e2e7eb);
  box-shadow:1px 1px 3px #aebbc5,-1px -1px 2px #ffffffc9,inset .5px .5px 1px #fff;
  transition:transform .16s;
}
.connection-switch:after {
  content:"";position:absolute;left:6px;top:6px;width:4px;height:4px;border-radius:50%;
  background:#b6c2cb;box-shadow:inset 0 .5px 1px #8fa0ac55;
  transition:transform .16s,background-color .16s,box-shadow .16s;
}
.connection-legend-row input:checked+.connection-switch:before,
.connection-legend-row input:checked+.connection-switch:after {transform:translateX(10px)}
.connection-legend-row input:checked+.connection-switch:after {
  background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--connection-color) 55%,white),var(--connection-color) 65%);
  filter:blur(.25px);
  box-shadow:0 0 2px color-mix(in srgb,var(--connection-color) 65%,transparent),0 0 4px 1px color-mix(in srgb,var(--connection-color) 30%,transparent);
}
.app[data-view=gallery] #connection-legend,.app.filters-open #connection-legend {display:none}
/* Keep the mid-screen Collection tab above the card on short desktop windows. */
@media (min-width:951px) and (max-height:680px) {
  .app:has(#connection-legend details[open]) .space-selection-header [data-space-back] {
    top:calc(100dvh - var(--footer-height) - 318px);
  }
}
/* On touch screens the key starts collapsed above the bottom search/control area. */
@media (max-width:800px), (max-width:950px) and (max-height:500px) {
  #connection-legend {left:max(14px,env(safe-area-inset-left));bottom:142px;width:184px;max-width:calc(100vw - 28px)}
  #connection-legend summary {min-height:44px}
  .app:has(#space-viewport[data-focused=true]:not([hidden])) #connection-legend {bottom:80px}
  .app:has(#space-viewport[data-lineage]:not([data-lineage=""]):not([hidden])) #connection-legend {bottom:210px}
  .app[data-view=timeline] #connection-legend {bottom:180px}
}
@media (max-width:950px) and (max-height:500px) {
  #connection-legend {bottom:80px;width:196px}
  #connection-legend details[open] {max-height:calc(100dvh - var(--footer-height) - 150px);overflow-y:auto;overscroll-behavior:contain}
  .app:has(#space-viewport[data-lineage]:not([data-lineage=""]):not([hidden])) #connection-legend {bottom:80px;width:132px}
  .app:has(#space-viewport[data-lineage]:not([data-lineage=""]):not([hidden])) .connection-legend-row {grid-template-columns:1fr 26px;font-size:10px;padding:0 4px;gap:4px}
  .app[data-view=timeline] #connection-legend {bottom:110px}
}
/* Keep the compact visuals, with comfortable independent touch targets. */
@media (pointer:coarse) {
  .connection-legend-row {min-height:44px}
}
/* All flat graph modes match the 3D canvas's idle 50% connection opacity. */
.edge:not(.active):not(.dim):not(:hover),
.timeline-layout .edge:not(.active):not(.dim):not(:hover) {opacity:.5}
@media (prefers-reduced-motion:reduce) {
  #connection-legend summary svg,.connection-switch:before,.connection-switch:after {transition:none}
}