/* CLEARLi — platform logo (all sizes, day/night crossfade) */

.clearli-logo {
    position: relative;
    aspect-ratio: 538 / 137;
    margin: 0 auto;
    padding: 0;
    line-height: 0;
    background: transparent;
}

.clearli-logo--xs  { width: min(100%, 120px); }
.clearli-logo--sm  { width: min(100%, 160px); }
.clearli-logo--md  { width: min(100%, 220px); }
.clearli-logo--lg  { width: min(100%, 288px); }
.clearli-logo--xl  { width: min(100%, 320px); }

.clearli-logo__link {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 538 / 137;
    text-decoration: none;
}

.elite-userbar__brand .clearli-logo,
.elite-userbar__brand .clearli-logo--xs {
    margin: 0;
}

.boost-logo-wrap--page .clearli-logo,
.boost-logo-wrap--page .clearli-logo--sm {
    margin: 0;
    flex-shrink: 0;
}

.boost-logo-wrap--page {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.boost-logo-wrap--inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.practice-m-chrome__logo .clearli-logo--sm {
    margin: 0 auto;
    width: min(100%, 120px);
}

.boost-register > .clearli-logo--lg {
    margin-bottom: 8px;
}

.clearli-logo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: none;
    box-shadow: none;
    filter: none;
    opacity: 1;
    transition: opacity var(--clearli-theme-duration, 320ms) var(--clearli-theme-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}

.clearli-logo__img--dark {
    opacity: 0;
    pointer-events: none;
}

[data-theme="dark"] .clearli-logo__img--light {
    opacity: 0;
}

[data-theme="dark"] .clearli-logo__img--dark {
    opacity: 1;
}

/* Legacy alias — home macro uses clearli-logo--lg */
.home-clearli-logo,
.clearli-logo.clearli-logo--lg {
    margin-bottom: 18px;
}

@media (max-width: 480px) {
    .clearli-logo--lg,
    .home-clearli-logo {
        width: min(100%, 248px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clearli-logo__img {
        transition: none;
    }
}

/* ── App mark (squircle) — header / favicon family ── */

.clearli-mark {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}

.clearli-mark--header {
    width: 36px;
    height: 36px;
}

.clearli-mark--sm {
    width: 44px;
    height: 44px;
}

.clearli-mark__link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.clearli-mark__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 22%;
    transition: opacity var(--clearli-theme-duration, 320ms) var(--clearli-theme-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}

.clearli-mark__img--dark {
    opacity: 0;
    pointer-events: none;
}

[data-theme="dark"] .clearli-mark__img--light {
    opacity: 0;
}

[data-theme="dark"] .clearli-mark__img--dark {
    opacity: 1;
}

.elite-userbar__brand .clearli-mark--header {
    margin: 0;
}

.elite-userbar--platform .elite-userbar__brand,
.elite-userbar--app .elite-userbar__brand {
    min-width: 36px;
}

.practice-m-chrome__logo .clearli-mark--sm {
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .clearli-mark__img {
        transition: none;
    }
}