/* AI chip with "Varför?" (P-122). The gradient dot is only used as the AI marker. */
.ai-chip{display:inline-flex;align-items:center;gap:var(--s-2);height:26px;padding:0 var(--s-1) 0 var(--s-2);border-radius:var(--r-pill);background:var(--surface3);font-size:var(--fs-xs);font-weight:500;color:var(--ink2);max-width:100%}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--ai);box-shadow:0 0 8px var(--acc);flex:none}
.ai-why{height:20px;padding:0 var(--s-2);border:0;border-radius:var(--r-pill);background:var(--acc-soft);color:var(--acc-ink);font-size:var(--fs-xs);font-weight:600;cursor:pointer}
.ai-why:hover{box-shadow:inset 0 0 0 1px var(--acc-line)}
.ai-box{margin-top:var(--s-2);padding:var(--s-3);border-radius:var(--r-md);background:var(--surface2);box-shadow:inset 0 0 0 1px var(--edge);font-size:var(--fs-sm);color:var(--ink2)}
.ai-box dl{margin:0 0 var(--s-2);display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s-1) var(--s-3)}
.ai-box dt{font:500 10.5px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-top:2px}
.ai-box dd{margin:0;overflow-wrap:anywhere}
.ai-box p{margin:0}
.insp-match{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-1);font-size:var(--fs-sm)}
.insp-match li{display:flex;gap:var(--s-2);align-items:center}
.insp-match li.ok svg{color:var(--acc-ink)}.insp-match li.no svg{color:var(--red)}