/* Small labels: status pills, chips, tags, status icon tiles and system logo tiles. */

/* Pills say a state. Without a tone they are neutral; a tone tints them. */
.pill {
  --tone: var(--ink-2);
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--panel-3); color: var(--tone);
  font-size: var(--fs-2xs); font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.pill:is(.ok, .warn, .bad, .info) { background: color-mix(in srgb, var(--tone) 12%, transparent); }
.pill.ok { --tone: var(--ok); }
.pill.warn { --tone: var(--warn); }
.pill.bad { --tone: var(--bad); }
.pill.info { --tone: var(--brand-text); }
.pill.mute { --tone: var(--ink-3); }
.pill.sm { padding: 1px 7px; font-size: 10px; }
.pill .led { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill svg { width: 12px; height: 12px; }

/* Chips and tags name a thing: a record type, a direction, a source. */
.chip, .tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  background: var(--panel-3); color: var(--ink-2);
  font-size: var(--fs-2xs); font-weight: 500; white-space: nowrap;
}
.chip.muted { color: var(--ink-4); }

/* A square icon in the colour of its status, used by notifications and the event log. */
.nico {
  --tone: var(--ink-3);
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone);
}
.nico svg { width: 15px; height: 15px; }
.nico.ok { --tone: var(--ok); }
.nico.warn { --tone: var(--warn); }
.nico.bad { --tone: var(--bad); }
.nico.info { --tone: var(--brand-text); }

/* ---------- System logos ----------
   The wordmarks are full colour and only read on white, so each sits on its own white tile in both themes. */
.brandmark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 116px; max-width: 100%; height: 30px; padding: 0 10px; overflow: hidden;
  border: 1px solid var(--paper-line); border-radius: var(--r-m); background: var(--paper);
  color: var(--paper-ink); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.brandmark img { display: block; width: auto; height: auto; max-width: 100%; max-height: 68%; object-fit: contain; }
/* A round logo without a wordmark (flagged "mark" in systems.js) uses the full height, or it reads as a dot. */
.brandmark.is-mark img { max-height: 94%; }
.brandmark.xs { width: 96px; height: 22px; padding: 0 7px; font-size: 10.5px; }
.brandmark.sm { width: 110px; height: 26px; padding: 0 8px; font-size: 11.5px; }
.brandmark.lg { width: 150px; height: 36px; padding: 0 12px; font-size: var(--fs-m); }
.brandmark.bare { width: auto; padding: 0; border-color: transparent; background: transparent; }
.brandmark.is-text { letter-spacing: -.01em; }

.logo-pair { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }