/* Brand logo tile (lib/brand-logos.php ofo_brand_logo_html(), the Visibility
   bar chart draws the same on canvas). Logos are made for a white page, so the
   tile stays white in Dark too; a letter tile when no logo is stored.

   @author Sander Tamaela
   @created 2026-11-07
   @modified 2026-11-07 */

.ofo-blogo {
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid var(--tl-e5e7eb, #e5e7eb);
    background: #ffffff; /* theme-keep: logos are drawn for a white background */
    object-fit: contain;
    padding: 1px;
    vertical-align: middle;
}
.ofo-blogo--letter::before { content: attr(data-letter); }
.ofo-blogo--letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-f3f4f6, #f3f4f6);
    color: var(--tc-6b7280, #6b7280);
    font-weight: 700;
    line-height: 1;
    padding: 0;
}

/* Logo tile + brand name on one line (ofoBrandWithLogo() / ofo_brand_with_logo()). */
.ofo-bname { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; max-width: 100%; }
.ofo-bname > :last-child { overflow: hidden; text-overflow: ellipsis; }

/* Own brand logo(s) before the page title (js/brand-logo.js titleLogos()):
   36 px tiles, a second and third overlap the previous one, then "+n". */
.ofo-title-logos { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 12px; position: relative; top: -2px; }
.ofo-title-logos .ofo-blogo { width: 36px; height: 36px; border-radius: 8px; padding: 3px; }
.ofo-title-logos .ofo-blogo + .ofo-blogo { margin-left: -10px; box-shadow: -2px 0 0 0 var(--tb-ffffff, #ffffff); }
.ofo-title-logos-more { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--tc-6b7280, #6b7280); }