/* Company marks next to company names (pipeline/logos.py): the company's logo on a
   light chip, so dark logos stay visible in every theme, else its ticker on a color.
   Sizes: .lg in table rows, .lg-c in card lists, .lg-l in a company page's header. */
.lg { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; height: 24px; padding: 0 4px; border-radius: 6px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.13); vertical-align: middle; line-height: 1; }
.lg img { display: block; max-width: none; }
.lg-c { height: 20px; padding: 0 3px; border-radius: 5px; }
.lg-l { height: 46px; padding: 0 8px; border-radius: 12px; }
:root[data-theme="dark"] .lg, :root[data-theme="black"] .lg { border-color: rgba(255, 255, 255, 0.16); }

/* ticker badge: white mono letters on a color picked by a hash of the ticker */
.lg.lgb { min-width: 34px; padding: 0 5px; border: 0; color: #fff; font: 700 10px/1 var(--mono); letter-spacing: 0.01em; white-space: nowrap; }
.lg.lgb.lg-c { min-width: 28px; padding: 0 4px; font-size: 9px; }
.lg.lgb.lg-l { min-width: 46px; padding: 0 10px; font-size: 14px; }
.lgb.b0 { background: #1f5fbf; } .lgb.b1 { background: #1d7a43; } .lgb.b2 { background: #b4502b; } .lgb.b3 { background: #6a4fc0; }
.lgb.b4 { background: #0e7a85; } .lgb.b5 { background: #a03a6c; } .lgb.b6 { background: #7a6528; } .lgb.b7 { background: #4a5260; }
:root[data-theme="dark"] .lgb, :root[data-theme="black"] .lgb { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* the mark and a name side by side; a long name wraps beside the mark */
.lgn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; vertical-align: middle; }
.lgn > a, .lgn > span:not(.lg) { min-width: 0; }

@media (max-width: 640px) {
  /* phones: wide wordmarks narrower, so the names keep their room */
  .lgn .lg:not(.lg-l) img { max-width: 40px; height: auto; }
  .lgn { gap: 6px; }
}