export function Legend() {
  return (
    <div style={{
      display: "flex",
      alignItems: "center",
      gap: 16,
      fontSize: "0.72rem",
      color: "var(--color-text-muted)",
      flexShrink: 0,
    }}>
      <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
        <span style={{
          display: "inline-block", width: 28, height: 14, borderRadius: 3,
          background: "var(--color-open-bg)", border: "1px solid var(--color-open-border)",
        }} />
        Open
      </span>
      <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
        <span style={{
          display: "inline-block", width: 28, height: 14, borderRadius: 3,
          background: "var(--color-ph-bg)", border: "1px solid var(--color-ph-border)",
        }} />
        Passholder
      </span>
      <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ color: "var(--color-text-dim)" }}>·</span>
        <span style={{ color: "var(--color-text-dim)" }}>Closed</span>
        <span style={{ color: "var(--color-border)" }}>·</span>
        <span style={{ color: "var(--color-text-dim)" }}>— no data</span>
      </span>
    </div>
  );
}