/* ===== css/fixes.css — defect fixes + platform upgrades (group 'fixes') =====
   Every rule is scoped under html.f-<feature id>: with a fix switched off the page is exactly style.css.
   Anything that animates is also gated by html.cx-motion (core swaps it for cx-reduced).
   Sections: Layout (a-unclip-scrollable-layout) · Focus (a-focus-visible-and-names) · Mixer popover
   (a-eq-panel-popover) · Native sliders (a-accessible-eq-sliders) · Social tooltip (p-anchor-tooltips) ·
   Motion button (g-motion-toggle) · Lite tier (g-lite-tier).
   z-index: the shared tooltip lives inside the card (30); the mixer panel is a native popover (top layer). */

/* ===== Layout: scroll instead of clip, real sizes instead of scale(1.08) (a-unclip-scrollable-layout) ===== */
html.f-a-unclip-scrollable-layout {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;                     /* a short desktop window shows that it scrolls */
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

/* nothing scrolls under the full-screen splash (m-enter-splash) */
html.f-a-unclip-scrollable-layout.mx-splash-open {
    overflow: hidden;
}

html.f-a-unclip-scrollable-layout body {
    overflow: visible;
    min-height: 100vh;
    min-height: 100svh;
    justify-content: flex-start;               /* centring now comes from the auto margins below */
}

/* centred when it fits, top-aligned and scrolling when it does not.
   667 px = a 635 px card + 2 × 16 px padding: the same visual width as 588 px × scale(1.08) */
html.f-a-unclip-scrollable-layout .main-container {
    transform: none;
    margin-block: auto;
    max-width: 667px;
}

html.f-a-unclip-scrollable-layout :is(.profile-card, .music-player) {
    max-width: 100%;
}

/* the player can always scroll clear of the fixed mute / mixer buttons */
@media (max-width: 900px) {
    html.f-a-unclip-scrollable-layout .main-container {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* short screens: in-app browsers with their toolbars, landscape phones, small laptop windows */
@media (max-height: 700px) {
    html.f-a-unclip-scrollable-layout .main-container { gap: 8px; }
    html.f-a-unclip-scrollable-layout .divider-line { margin-block: 10px; }
    html.f-a-unclip-scrollable-layout .name-section { margin-top: 12px; }
    html.f-a-unclip-scrollable-layout .bio-section { margin-top: 8px; }
    html.f-a-unclip-scrollable-layout .social-links { margin-top: 4px; padding-bottom: 16px; }
}

@media (max-height: 560px) {
    html.f-a-unclip-scrollable-layout .main-container { padding-top: 8px; }
    html.f-a-unclip-scrollable-layout .divider-line { margin-block: 8px; }
    html.f-a-unclip-scrollable-layout .name-section { margin-top: 8px; }
    html.f-a-unclip-scrollable-layout .username { margin-top: 2px; }
    html.f-a-unclip-scrollable-layout .bio-section { margin-top: 6px; }
    html.f-a-unclip-scrollable-layout .social-links { margin-top: 2px; padding-bottom: 12px; }
    html.f-a-unclip-scrollable-layout .player-inner { padding-block: 10px; }
}

/* Fluid card: banner, avatar and name follow the card's width (cqi) and the screen's height (svh).
   Without cqi / svh the px sizes of style.css stay, so nothing collapses. */
@supports (width: 1cqi) and (height: 1svh) {
    /* the floor max(…, 18.8cqi) keeps the motto of the 3:1 banner readable on wide, short cards */
    html.f-a-unclip-scrollable-layout .profile-card {
        container-type: inline-size;
        --fx-banner-h: clamp(max(96px, 18.8cqi), min(60px + 27.9cqi, 27svh), 240px);
        --fx-avatar: clamp(64px, min(30px + 13.9cqi, 15svh), 120px);
    }

    html.f-a-unclip-scrollable-layout .banner-section { height: var(--fx-banner-h); }
    html.f-a-unclip-scrollable-layout .avatar-wrapper { top: var(--fx-banner-h); }

    html.f-a-unclip-scrollable-layout .avatar-container {
        width: var(--fx-avatar);
        height: var(--fx-avatar);
    }

    html.f-a-unclip-scrollable-layout .profile-content { padding-top: calc(var(--fx-avatar) / 2 + 8px); }
    html.f-a-unclip-scrollable-layout .display-name { font-size: clamp(20px, 12px + 2.2cqi, 26px); }

    @media (max-height: 560px) {
        html.f-a-unclip-scrollable-layout .profile-card {
            --fx-banner-h: clamp(max(88px, 18.8cqi), min(60px + 27.9cqi, 22svh), 240px);
            --fx-avatar: clamp(60px, min(30px + 13.9cqi, 13svh), 120px);
        }
    }
}

/* ===== Focus: one shared ring for every control (a-focus-visible-and-names) ===== */
/* Zero-specificity :where() so a module's own designed ring (the brand-tinted social chips, the glass dock)
   still wins; everything else gets the white ring with an accent halo. Keyboard only (:focus-visible). */
html.f-a-focus-visible-and-names :where(#site) :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"], .mx-scrub)):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(0, 51, 255, 0.45), 0 0 18px 3px rgba(0, 51, 255, 0.65);
}

/* a rounded ring on the bare player buttons (the vinyl player keeps its round ones) */
html.f-a-focus-visible-and-names :where(#site .control-btn:focus-visible) {
    border-radius: 8px;
}

/* the tooltip shows on keyboard focus too (p-anchor-tooltips, when on, brings its own) */
html.f-a-focus-visible-and-names #site .social-link:focus-visible .tooltip {
    opacity: 1;
}

/* the progress scrubber (m-progress-scrub) is a 26 px tall invisible target: the ring goes on the bar */
html.f-a-focus-visible-and-names #progressBar:has(> .mx-scrub:focus-visible) {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 51, 255, 0.55);
}

/* the theme's accent in both halos where color-mix() exists (written apart: a color-mix(var(…)) declaration
   right after the plain one would win the cascade and leave old engines with no halo at all) */
@supports (color: color-mix(in srgb, red, blue)) {
    html.f-a-focus-visible-and-names :where(#site) :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"], .mx-scrub)):focus-visible {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 18px 3px color-mix(in srgb, var(--accent) 65%, transparent);
    }

    html.f-a-focus-visible-and-names #progressBar:has(> .mx-scrub:focus-visible) {
        box-shadow: 0 0 0 2px #fff, 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent);
    }
}

@supports not selector(:has(*)) {
    html.f-a-focus-visible-and-names #site .mx-scrub:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 0;
        border-radius: 999px;
    }
}

/* Windows high contrast drops background colours: keep the bar fills and handles visible */
@media (forced-colors: active) {
    html.f-a-focus-visible-and-names :is(.progress, .progress-handle, .eq-slider-fill, .eq-slider-handle) {
        forced-color-adjust: none;
        background: CanvasText;
    }
}

/* ===== Mixer popover: click only, Esc, tap outside (a-eq-panel-popover) ===== */
/* Native popover: the panel is in the top layer, fixed just above the mixer button. fixes.js measures the
   button (--fx-eq-r / --fx-eq-b = its top-right corner); the gap matches the dock style around it. */
html.f-a-eq-panel-popover #eqPanel {
    --fx-eq-gap: 15px;                         /* style.css: 55 px above the 40 px button */
    --fx-eq-dx: 0px;
}

html.f-a-eq-panel-popover.f-v-glass-dock-controls #eqPanel {
    --fx-eq-gap: 18px;                         /* the glass dock: aligned with the capsule's edge */
    --fx-eq-dx: 4px;
}

html.f-a-eq-panel-popover #eqPanel[popover] {
    position: fixed;
    inset: auto calc(var(--fx-eq-r, 20px) - var(--fx-eq-dx)) calc(var(--fx-eq-b, 60px) + var(--fx-eq-gap)) auto;
    margin: 0;
    overflow: visible;                         /* the browser's popover default would clip the focus rings */
    color: #fff;
}

html.f-a-eq-panel-popover #eqPanel:popover-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* a soft fade in and out (m-eq-panel-spring, when on, brings its own spring instead); the first
   declaration is the fallback for engines that cannot transition display */
html.cx-motion.f-a-eq-panel-popover:not(.f-m-eq-panel-spring) #eqPanel[popover] {
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}

html.cx-motion.f-a-eq-panel-popover:not(.f-m-eq-panel-spring) #eqPanel:popover-open {
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}

@starting-style {
    html.cx-motion.f-a-eq-panel-popover:not(.f-m-eq-panel-spring) #eqPanel:popover-open {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* a hover never opens the panel or keeps it open (iOS 16 without popovers; and it lets the native popover
   fade out while the pointer is still on the button that closed it) */
html.f-a-eq-panel-popover .mixer-wrapper:hover .equalizer-panel:not(.active) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

/* the open state on the button itself (the glass dock has its own wash) */
html.f-a-eq-panel-popover #mixerBtn[aria-expanded="true"] {
    background: rgba(40, 40, 44, 0.96);
    border-color: rgba(255, 255, 255, 0.42);
}

/* ===== Native sliders (a-accessible-eq-sliders) ===== */
html.f-a-accessible-eq-sliders .eq-slider-track,
html.f-a-accessible-eq-sliders .eq-header .fx-eq-off {
    display: none;
}

html.f-a-accessible-eq-sliders .fx-eq-col {
    position: relative;
    display: block;
    flex: none;
    width: 16px;
    height: 100%;
}

html.f-a-accessible-eq-sliders .fx-eq-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    writing-mode: vertical-lr;
    direction: rtl;                            /* the minimum at the bottom */
    width: 16px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    /* the fill: from the bottom up to the thumb's centre */
    background: linear-gradient(to top, #fff calc(8px + (100% - 16px) * var(--f, 1)), rgba(255, 255, 255, 0.15) 0) center / 10px 100% no-repeat;
    cursor: pointer;
    touch-action: none;                        /* a finger drag moves the slider, not the page */
    -webkit-tap-highlight-color: transparent;
}

/* engines without vertical form controls (Safari < 17.4, Chrome < 124): a horizontal range, rotated */
html.f-a-accessible-eq-sliders .fx-eq-rot .fx-eq-range {
    position: absolute;
    left: 50%;
    top: 50%;
    writing-mode: horizontal-tb;
    direction: ltr;
    width: 110px;                              /* = the height of .eq-sliders */
    height: 16px;
    transform: translate(-50%, -50%) rotate(-90deg);
    background: linear-gradient(to right, #fff calc(8px + (100% - 16px) * var(--f, 1)), rgba(255, 255, 255, 0.15) 0) center / 100% 10px no-repeat;
}

html.f-a-accessible-eq-sliders .fx-eq-range::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
}

html.f-a-accessible-eq-sliders .fx-eq-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    cursor: grab;
}

html.f-a-accessible-eq-sliders .fx-eq-range::-moz-range-track {
    background: transparent;
    border: 0;
}

html.f-a-accessible-eq-sliders .fx-eq-range::-moz-range-progress {
    background: transparent;
}

html.f-a-accessible-eq-sliders .fx-eq-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    cursor: grab;
}

html.f-a-accessible-eq-sliders .fx-eq-range:focus:not(:focus-visible) {
    outline: none;
}

html.f-a-accessible-eq-sliders .fx-eq-range:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* with the glass dock (v-glass-dock-controls) the sliders wear its accent fill and haloed handle */
html.f-a-accessible-eq-sliders.f-v-glass-dock-controls .fx-eq-range {
    background: linear-gradient(to top, var(--accent, #0033ff), var(--vx-ice, #dbe6ff) calc(8px + (100% - 16px) * var(--f, 1)), rgba(255, 255, 255, 0.12) 0) center / 8px 100% no-repeat;
}

html.f-a-accessible-eq-sliders.f-v-glass-dock-controls .fx-eq-rot .fx-eq-range {
    background: linear-gradient(to right, var(--accent, #0033ff), var(--vx-ice, #dbe6ff) calc(8px + (100% - 16px) * var(--f, 1)), rgba(255, 255, 255, 0.12) 0) center / 100% 8px no-repeat;
}

html.f-a-accessible-eq-sliders.f-v-glass-dock-controls .fx-eq-range::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--vx-halo, rgba(0, 51, 255, 0.45)), 0 0 12px var(--vx-accent-400, #7d9bff);
}

html.f-a-accessible-eq-sliders.f-v-glass-dock-controls .fx-eq-range::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--vx-halo, rgba(0, 51, 255, 0.45)), 0 0 12px var(--vx-accent-400, #7d9bff);
}

/* with the springy panel (m-eq-panel-spring) the thumb grows while it is held, like the div handles did */
html.cx-motion.f-a-accessible-eq-sliders.f-m-eq-panel-spring .fx-eq-range::-webkit-slider-thumb {
    transition: transform 0.3s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
}

html.f-a-accessible-eq-sliders.f-m-eq-panel-spring .fx-eq-range:active::-webkit-slider-thumb {
    transform: scale(1.25);
}

html.f-a-accessible-eq-sliders.f-m-eq-panel-spring .fx-eq-range:active::-moz-range-thumb {
    transform: scale(1.25);
}

/* Windows high contrast: the system's own slider */
@media (forced-colors: active) {
    html.f-a-accessible-eq-sliders .fx-eq-range {
        -webkit-appearance: auto;
        appearance: auto;
        background: none;
    }
}

/* ===== Social tooltip: one anchored tooltip, on keyboard focus and real hover (p-anchor-tooltips) ===== */
html.f-p-anchor-tooltips #site .social-link .tooltip {
    display: none;
}

html.f-p-anchor-tooltips .fx-tip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 30;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    font: 500 12px/1.3 'Inter', system-ui, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: 0 4px;
    transition: opacity 0.15s ease, translate 0.15s ease;
}

html.f-p-anchor-tooltips .fx-tip.is-on {
    opacity: 1;
    translate: 0 0;
}

/* with the brand chips (v-brand-hover-socials) the tooltip wears the same glass */
html.f-p-anchor-tooltips.f-v-brand-hover-socials .fx-tip {
    padding: 5px 9px;
    border: 1px solid var(--vx-stroke, transparent);
    border-radius: 8px;
    background: var(--vx-glass-strong, rgba(0, 0, 0, 0.82));
}

html.cx-reduced.f-p-anchor-tooltips .fx-tip {
    transition: none;
    translate: none;
}

/* CSS anchor positioning (Chrome 125+, Safari 26, Firefox 147): centred above the link, shifted at the
   card's edges or flipped below; fixes.js places it itself everywhere else (.fx-tip-js) */
@supports (position-area: top) and (position-try-fallbacks: flip-block) {
    html.f-p-anchor-tooltips .fx-tip:not(.fx-tip-js) {
        left: auto;
        top: auto;
        margin: 0 4px 8px;
        position-anchor: --fx-tip;
        position-area: top;
        position-try-fallbacks: top span-right, top span-left, flip-block;
    }
}

/* ===== Motion button: «Animasiyalar» in the mixer (g-motion-toggle) ===== */
html.f-g-motion-toggle .equalizer-panel {
    width: 104px;                              /* room for the label in az / en / tr */
}

html.f-g-motion-toggle .fx-motion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    margin-top: 12px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font: 600 10px/1.1 'Inter', system-ui, sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* the state: a lit dot when animations are on; a hollow dot and struck-through label when off */
html.f-g-motion-toggle .fx-motion::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}

html.f-g-motion-toggle .fx-motion[aria-pressed="false"] {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: line-through;
}

html.f-g-motion-toggle .fx-motion[aria-pressed="false"]::before {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

@media (hover: hover) {
    html.f-g-motion-toggle .fx-motion:hover {
        background: rgba(255, 255, 255, 0.13);
    }
}

html.f-g-motion-toggle .fx-motion:focus:not(:focus-visible) {
    outline: none;
}

html.f-g-motion-toggle .fx-motion:focus-visible {
    outline: 2px solid #9fb4ff;
    outline-offset: 2px;
}

/* ===== Lite tier: weak phones (g-lite-tier; html.lite + html.f-g-lite-tier, both set automatically) ===== */
/* no backdrop blur left anywhere in the page: every module also brings its own solid lite surfaces */
html.f-g-lite-tier #site *,
html.f-g-lite-tier #site *::before,
html.f-g-lite-tier #site *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* a meteor already in flight when the tier switches on goes at once (motion.js launches none on lite) */
html.f-g-lite-tier [data-concept-owner="m-shooting-stars"] {
    display: none !important;
}