/* ==========================================================================
   Title Center — styles shipped on every page (tiny on purpose).
   Only the site-wide badge skin lives here; the hall and admin pages inject
   their own sheet when they boot.

   Every badge is hard capped: an uploaded image can be 2000px wide and a
   pasted HTML block can be any size at all, and neither may push the page
   around. Widths are capped at 160px, heights at 17px inline (24px on the
   hall), and overflow is clipped as a last resort.
   ========================================================================== */

/* the injection slot needs a node to hold on to; it must never be visible,
   whatever the theme does with [hidden] or with bare <i> elements */
.rctc-anchor {
    display: none !important;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* The theme around a nickname often sizes every image it wraps — the bento
   profile header does `.rcbu-badges :is(img, svg) { width:18px; height:18px }`,
   which squashed a 104x28 animated title into a square. Inside our own skin we
   therefore restate the box and mean it; `!important` is deliberate, and scoped
   to `.rctc-skin` so the hall's own `.lg` sizing is untouched. */
.rctc-skin .rctc-b-img {
    width: auto !important;
    height: 17px !important;
    max-height: 17px !important;
    max-width: 160px !important;
    object-fit: contain !important;
}
.rctc-skin .rctc-b-svg svg,
.rctc-skin .rctc-b-html img,
.rctc-skin .rctc-b-html svg,
.rctc-skin .rctc-b-html video,
.rctc-skin .rctc-b-html canvas {
    width: auto !important;
    height: 17px !important;
    max-height: 17px !important;
    max-width: 160px !important;
    object-fit: contain !important;
}
.rctc-skin .rctc-b-html > * { line-height: 1 !important; }

/* The product renders a text title as a small blue pill. Once we recognise
   the name we take the pill apart and let the badge draw itself. */
.ls-user-title.rctc-skin {
    display: inline-flex;
    align-items: center;
    vertical-align: -3px;
    padding: 0;
    height: auto;
    line-height: 1;
    border-radius: 0;
    font-weight: 400;
    background: none;
    color: inherit;
    box-shadow: none;
    max-width: 100%;
    overflow: hidden;
}

.rctc-b {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 17px;
    max-height: 17px;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(135deg, #6ea8fe 0%, #3c81f4 100%);
    color: #fff;
}

.rctc-b-img {
    height: 17px;
    max-height: 17px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}
.rctc-b-svg { display: inline-flex; align-items: center; height: 17px; max-height: 17px; }
.rctc-b-svg svg { height: 17px; max-height: 17px; width: auto; max-width: 160px; display: block; }
.rctc-b-html {
    display: inline-flex;
    align-items: center;
    height: 17px;
    max-height: 17px;
    max-width: 160px;
    overflow: hidden;
}
.rctc-b-html img,
.rctc-b-html svg,
.rctc-b-html video,
.rctc-b-html canvas {
    height: 17px;
    max-height: 17px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.rctc-b-html > * { line-height: 1; }

/* the hall page needs a little more room than the inline badge */
.rctc-b.lg { height: 24px; max-height: 24px; padding: 0 10px; border-radius: 6px; font-size: 13px; }
.rctc-b-win.lg { height: 26px; max-height: 26px; }
.rctc-b-img.lg,
.rctc-b-html.lg,
.rctc-b-svg.lg { height: 24px; max-height: 24px; }
.rctc-b-img.lg,
.rctc-b-html.lg img,
.rctc-b-html.lg svg,
.rctc-b-svg.lg svg { height: 24px; max-height: 24px; max-width: 100%; object-fit: contain; }

/* The xhs-style mobile profile hero parks every badge in a meta row under the
   bio; core.js moves the worn title up next to the nickname. On the cover it
   must not push the name around, so its width is capped against the viewport. */
.powell-xhs-profile-name-row > .ls-user-title {
    flex: 0 0 auto;
    max-width: 52vw;
}