/* Oct 10 (the brain contract): "What Dottpace now learns from X" — pages/lintegrations.js brainPanel; a tool's own events in Changes (pages/lchanges.js) */
.brn{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-12);background:var(--bg);min-width:0}
.brn-hd{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}
.brn-hd svg{color:var(--fg-3);flex:none;margin-top:2px}
.brn-site{color:var(--fg-3)}
.brn-dl{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:6px 16px;margin:0;font-size:var(--t-co);line-height:var(--lh-co)}
.brn-r{display:contents}
.brn-r dt{color:var(--fg-3);margin:0}
.brn-r dd{margin:0;color:var(--fg-2);min-width:0;overflow-wrap:anywhere}
.brn-pgs{display:inline-flex;flex-wrap:wrap;gap:4px 12px}
.brn-pg.is-text{color:var(--fg-2)}
.brn-mute{color:var(--fg-3)}
.brn-out,.brn-wait{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.brn-wait{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:var(--r-8);background:color-mix(in srgb,var(--c-orange) 9%,var(--bg))}
.brn-wait svg{flex:none;margin-top:2px;color:var(--c-orange)}
.cl-tool{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cl-tool svg,.cl-tool img{flex:none}
@media (max-width:560px){.brn-dl{grid-template-columns:minmax(0,1fr);gap:2px 0}.brn-r dd{margin-bottom:6px}}
.brn-hd b{min-width:0}
.brn-hd .brn-site{min-width:0}