/* RAMIX polish: layout fixes + motion. Loaded last on account and public pages. */

/* ---------- Fixes ---------- */

/* Dashboard: grid columns sized by content made the mobile page ~2x wider than the screen. */
.dashboard-primary,
.dashboard-secondary > * ,
.dashboard-card {
    min-width: 0;
}
.dashboard-primary {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 760px) {
    .dashboard-secondary {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Releases list: fixed column minimums pushed the action buttons outside the card. */
.release-catalog-row {
    /* The status column only needs its badge; the freed width goes to the release title. */
    grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) max-content 84px;
    column-gap: 16px;
}
@media (max-width: 1120px) {
    .release-catalog-row {
        grid-template-columns: 58px minmax(0, 1.4fr) minmax(0, 1fr) max-content 84px;
    }
}
@media (max-width: 768px) {
    .release-catalog-row {
        grid-template-columns: 56px minmax(0, 1fr) max-content;
    }
}
.release-catalog-row .status-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Chart axis labels were cut to "1…" — let them show in full, centred under the bar. */
.chart-label {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    max-width: none;
}

/* Public header: the 260px actions column was narrower than RU/EN + two buttons,
   so the language switch covered the last menu item. */
.header-inner {
    grid-template-columns: 180px minmax(0, 1fr) auto;
    column-gap: 24px;
}
@media (max-width: 1180px) {
    .header-inner { grid-template-columns: 120px minmax(0, 1fr) auto; }
    .desktop-nav { gap: 22px; }
}


/* ---------- Motion ---------- */

@keyframes ramix-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes ramix-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes ramix-spin {
    to { transform: rotate(360deg); }
}
@keyframes ramix-shine {
    from { transform: translateX(-120%) skewX(-20deg); }
    to { transform: translateX(220%) skewX(-20deg); }
}

@media (prefers-reduced-motion: no-preference) {
    /* Account: cards rise in one after another on page load. */
    .account-main .stat-card,
    .account-main .dashboard-card,
    .account-main .side-card,
    .account-main .release-count-card,
    .account-main .release-catalog-row,
    .account-main .flow-card,
    .account-main .promo-row,
    .account-main .stats-kpi {
        animation: ramix-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--ramix-i, 0) * 45ms);
    }

    /* Chart bars grow from the baseline. */
    .listens-chart .chart-bar {
        transform-origin: bottom;
        animation: ramix-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--ramix-bar, 0) * 14ms);
    }

    /* Release covers: gentle lift and zoom on hover. */
    .release-card img,
    .catalog-cover img {
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .release-card:hover img,
    .release-catalog-row:hover .catalog-cover img {
        transform: scale(1.06);
    }
    .stat-card {
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .stat-card:hover {
        transform: translateY(-3px);
        border-color: rgba(227, 123, 71, 0.45);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(227, 123, 71, 0.12);
    }

    /* Primary buttons: a light sweep on hover. */
    .button-primary,
    .button-hero,
    .flow-button-primary,
    .sidebar-create {
        position: relative;
        overflow: hidden;
    }
    .button-primary::before,
    .button-hero::before,
    .flow-button-primary::before,
    .sidebar-create::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 40%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
        transform: translateX(-120%) skewX(-20deg);
        pointer-events: none;
    }
    .button-primary:hover::before,
    .button-hero:hover::before,
    .flow-button-primary:hover::before,
    .sidebar-create:hover::before {
        animation: ramix-shine 0.75s ease;
    }

    /* Home: the hero disc slowly spins like a record. */
    .hero-disk img {
        animation: ramix-spin 38s linear infinite;
    }

    /* Home: sections fade up as they scroll into view (class toggled by ramix-motion.js). */
    .js-reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--ramix-i, 0) * 70ms);
    }
    .js-reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Settings: the username field (with a hint below) sat higher than its neighbours. */
.settings-grid { align-items: start; }

/* Balance history: status badges had no colour for these states. */
.balance-operation-list .status-completed { color: #3ddc84; background: rgba(61, 220, 132, 0.12); }
.balance-operation-list .status-processing,
.balance-operation-list .status-pending { color: #f3b23c; background: rgba(243, 178, 60, 0.12); }
.balance-operation-list .status-cancelled,
.balance-operation-list .status-rejected { color: #ef5350; background: rgba(239, 83, 80, 0.12); }

/* Releases list: keep meta labels on one line. */
.catalog-meta dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Landing header: under html{zoom:1.25} the four nav links, language switch and two buttons
   no longer fit below ~1100px of screen width (they wrapped and overlapped), so the burger
   menu takes over from there instead of only below 760px. */
.header-inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; }
.desktop-nav { gap: clamp(18px, 2.4vw, 44px); }
.desktop-nav a { white-space: nowrap; }
@media (max-width: 1180px) {
    .site-header .header-inner { grid-template-columns: 1fr auto; }
    .desktop-nav, .header-actions { display: none; }
    .menu-toggle {
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        justify-self: end;
        gap: 5px;
        cursor: pointer;
    }
    .menu-toggle span { width: 21px; height: 2px; background: var(--accent); transition: transform .25s ease, opacity .25s ease; }
    .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .mobile-menu {
        position: fixed;
        z-index: 49;
        inset: var(--header-height) 0 0;
        padding: 36px 24px;
        display: grid;
        align-content: space-between;
        background: rgba(5, 5, 5, .985);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
    }
    .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
    .mobile-menu nav { display: grid; }
    .mobile-menu nav a { padding: 17px 0; border-bottom: 1px solid #1c1c1c; font-size: 17px; font-weight: 700; text-transform: uppercase; }
    .mobile-menu-actions { display: grid; gap: 10px; }
    .mobile-menu-actions .button { width: 100%; }
}

/* Apple-style press feedback: buttons answer on press, not on release. */
.button, .account-button, .admin-button, button[type="submit"] {
    transition-property: transform, background-color, border-color, color, box-shadow, opacity;
}
.button:active, .account-button:active, .admin-button:active, button[type="submit"]:not(:disabled):active {
    transform: scale(.97);
    transition-duration: .1s;
}

/* Numbers that line up in columns or count up should not jitter. */
.stat-card strong, .topbar-balance, .catalog-meta dd, .analytics-kpi strong, table td, .release-meta code {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .button:active, .account-button:active, .admin-button:active, button[type="submit"]:active { transform: none; }
}

/* Unread replies counter on the sidebar "Support" link */
.sidebar-link .sidebar-badge {
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent, #e37b47);
    color: #fff;
    font-size: calc(10px * var(--type-scale, 1));
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}