/* LionStrata v2.9.163 — "LISTEN ON" / "WATCH ON" badges with the official Spotify and YouTube logos. ONE shared component per brand (assets/brand-badges.js builds it, audio.html uses the same markup).
   Logos are the ORIGINAL files in /assets/brand/ (never recolored, stretched, cropped, outlined or shadowed): only width and height attributes + the sizes below.
   Conservative rules applied (not verified against the official pages, see the PR body): the VISIBLE logo is at least 24px high; clear space around the logo at least the YouTube play-icon height (24px) /
   about one Spotify cap height (12px); the badge's own outline is the logo's single solid background and is not counted as "other content".
   Spotify: white full logo on dark, black full logo on light (the green logo only on pure black / pure white: none of our surfaces is). YouTube: full-colour (white wordmark) on dark, one-colour almost-black on light.
   No inline style, no new host (img-src 'self'). */
.ls-brand-badge{--bb-bg:#111418;--bb-line:#5A6573;--bb-ink:#F2F4F7;--bb-hover:#1C2127;display:inline-flex;align-items:center;gap:0;box-sizing:border-box;min-height:50px;padding:0 12px 0 16px;border:1px solid var(--bb-line);border-radius:999px;background:var(--bb-bg);color:var(--bb-ink);text-decoration:none;white-space:nowrap;flex:0 0 auto;max-width:100%;transition:background-color .15s ease,border-color .15s ease}
.ls-brand-badge.is-light{--bb-bg:#FFFFFF;--bb-line:#8A8F98;--bb-ink:#0A0A0B;--bb-hover:#F1F3F5}
.ls-brand-badge:hover{background:var(--bb-hover);border-color:var(--bb-ink)}
.ls-brand-badge:focus-visible{outline:3px solid #0A84FF;outline-offset:3px}
.ls-brand-badge.is-dark:focus-visible{outline-color:#FFFFFF}
.ls-brand-label{font-size:12px;line-height:1;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ls-brand-logo{display:block;flex:0 0 auto;max-width:none}
/* Spotify: logo 95 x 26, the visible logo is 25px high (the file has ~1px of margin), label -> logo 12px */
.ls-brand-spotify .ls-brand-logo{width:95px;height:26px;margin-left:11px}
/* YouTube full logo: 143 x 48, the visible logo is 24px high; the file carries ~17px of transparent margin on each side, so label -> logo is 7px + 17px = 24px of clear space */
.ls-brand-youtube{padding-right:7px}
.ls-brand-youtube .ls-brand-logo{width:143px;height:48px;margin-left:7px}
/* the YouTube icon rules (channel links, footer) live in assets/universal-header.css, which every page loads */
@media (max-width:420px){.ls-brand-badge{padding-left:12px}.ls-brand-label{letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.ls-brand-badge{transition:none}}
/* channel links in the Live card (plain state): the YouTube icon sits at the end of the row, 15px + the file's own margin from the text = 24px of clear space */
.h-play .ls-yt-icon{margin-left:auto}.h-play .h-play-text{margin-right:15px}
/* the badge keeps its own colours inside the player message and the card rows (they style plain links) */
a.ls-brand-badge,.pl-msg a.ls-brand-badge,.h-embedmeta a.ls-brand-badge{color:var(--bb-ink);text-decoration:none}
.pl-msg a.ls-brand-badge{margin-top:10px}