/* The brand pill (public/js/brand-pill.js): one small brand label for the whole
   site. Tokens only from app.css. Fixed height and a fixed logo box, so a logo
   loading later never moves a line; the initial sits under the logo and shows
   when there is none. Shorter than a body line box, so it also works in text. */
.brand-pill{display:inline-flex;align-items:center;gap:5px;height:22px;max-width:min(100%,28ch);padding:0 8px 0 3px;margin:-3px 1px;
  vertical-align:baseline;border-radius:var(--r-pill);background:var(--violet-soft);color:var(--violet);
  border:1px solid color-mix(in srgb,var(--violet) 26%,transparent);font-size:13.5px;font-weight:650;line-height:20px;
  text-decoration:none;white-space:nowrap;overflow:hidden;box-sizing:border-box;flex:none}
.brand-pill:hover{background:color-mix(in srgb,var(--violet) 22%,var(--pane));color:var(--ink);text-decoration:none}
.brand-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The name, not the logo, gives the pill its baseline, so in running text the name sits exactly on the line. */
.brand-pill-name{overflow:hidden;text-overflow:ellipsis;min-width:0;align-self:baseline}
.brand-pill-logo{position:relative;flex:none;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;overflow:hidden;
  background:var(--pane);color:var(--ink-2);font-size:10px;font-weight:700;line-height:1}
.brand-pill-logo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:var(--pane)}
/* In a row of other chips (lists, meta lines) the pill sits on the row, not on a text baseline. */
.brand-pill.is-chip{vertical-align:middle;margin:0}
/* In running text the pill must never make its line taller than the lines
   around it: the negative block margins cancel its extra height in the line box. */