*{box-sizing:border-box}
html,body{margin:0;background:var(--listen-page)}
body,input,select,textarea,button{font-family:var(--listen-font)}
body{color:var(--listen-text);font-size:16px;line-height:1.45}
a{color:var(--listen-blue);text-decoration:none}a:hover{text-decoration:underline}
img,video{max-width:100%}.wrap{width:min(980px,calc(100% - 32px));margin:0 auto}
.listen-topbar{width:100%;height:48px;background:var(--listen-blue);color:#fff;position:relative;z-index:20;overflow:visible}
.listen-topbar-inner{position:relative;display:flex;align-items:stretch;min-height:48px;padding-left:82px}
.listen-topbar-logo-link{position:absolute;left:0;top:0;display:block;width:64px;height:64px;line-height:0;z-index:30}
.listen-topbar-logo{display:block;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));transition:transform .16s ease}
.listen-topbar-logo-link:hover .listen-topbar-logo,.listen-topbar-logo-link:focus .listen-topbar-logo{transform:translateY(-1px) rotate(-1deg)}
.listen-topbar-menu{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;width:100%;min-width:0}
.listen-topbar-menu a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 7px;color:#fff;font-size:.84rem;text-align:center;text-decoration:none;white-space:nowrap}
.listen-topbar-menu a:hover,.listen-topbar-menu a:focus{background:var(--listen-blue-dark);color:#fff;text-decoration:none}
.main{padding:24px 0 42px}.site-footer{border-top:1px solid var(--listen-border);padding:17px 0;color:var(--listen-muted);font-size:.9rem}.footer-grid{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.home-intro,.easy-steps{max-width:860px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--listen-border)}
.title-with-lick{display:flex;align-items:baseline;gap:9px 15px;flex-wrap:wrap}.title-with-lick h1,.title-with-lick h2{margin:0;font-weight:400;color:#333}
.welcome-banner{margin:4px 0 10px}.welcome-banner h1{font-size:2rem;letter-spacing:-.02em}.welcome-banner p{margin:0;flex:1 1 390px;font-size:1.15rem;color:var(--listen-muted)}
.listen-promise{margin:6px 0 0;color:var(--listen-muted)}.easy-steps h2{font-size:1.45rem}.simple-steps{margin:13px 0 17px}.simple-steps p{margin:6px 0;font-size:1.03rem}
input,select,textarea,button{font:inherit}input,select,textarea{width:100%;border:1px solid var(--listen-border);border-radius:4px;padding:8px 9px;background:#fff;color:var(--listen-text)}
button,.button{display:inline-block;width:auto;border:1px solid var(--listen-border);border-radius:4px;padding:7px 11px;background:#fff;color:#000;cursor:pointer;text-decoration:none}button:hover,.button:hover{border-color:#555;background:#fff;text-decoration:none}button:disabled{cursor:not-allowed;opacity:.45}.primary-action{padding:9px 14px;font-weight:600}.text-button{border:0;padding:0;background:transparent;color:var(--listen-blue)}.text-button:hover{border:0;background:transparent;text-decoration:underline}
.form-page{max-width:650px}.form{display:grid;gap:14px;margin:18px 0}.simple-form label,.filters label{display:grid;gap:5px}.field-help,.muted{color:var(--listen-muted);font-size:.92rem}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:15px 0}.filters label{color:var(--listen-muted);font-size:.9rem}.directory{width:100%;border-collapse:collapse;margin-top:16px;font-size:.96rem}.directory th,.directory td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--listen-border)}.directory th{color:var(--listen-muted);background:rgba(255,255,255,.65)}.artist-link,.track-title{font-weight:700}.empty-state{border-top:1px solid var(--listen-border);border-bottom:1px solid var(--listen-border);padding:24px 0;color:var(--listen-muted)}
.lick-toggle{border:0;padding:0;background:transparent;color:var(--listen-blue);font-size:.78rem;font-weight:400;text-align:left}.lick-toggle:hover{border:0;background:transparent;text-decoration:underline}.lick-panel{max-width:470px;margin:7px 0 14px;border-left:2px solid var(--listen-border);padding:4px 0 8px 12px}.lick-panel[hidden]{display:none!important}.lick-panel video{display:block;width:min(100%,450px);aspect-ratio:1/1;margin:0 0 8px;background:#111}.lick-close{border:0;padding:0;background:transparent;color:var(--listen-blue);font-size:.9rem}
.song-source-section{margin:4px 0 3px}.song-source-buttons{display:flex;gap:9px;flex-wrap:wrap}.song-source-buttons button{min-width:138px}.visually-hidden-file{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}.chosen-song-name{margin:7px 0 0;color:var(--listen-muted);font-size:.9rem}.record-song-box{margin:8px 0 2px;border:1px solid var(--listen-border);border-radius:4px;padding:13px;background:rgba(255,255,255,.55)}.record-song-box[hidden]{display:none!important}.record-song-box h2{margin:0 0 3px;font-size:1.15rem}.record-song-box p{margin:5px 0 10px}.recorder-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.recording-status{color:var(--listen-muted)}.recording-timer{font-size:1.65rem;font-variant-numeric:tabular-nums}.recording-preview{margin-top:14px;border-top:1px solid var(--listen-border);padding-top:12px}.recording-preview audio{display:block;width:100%;margin:8px 0 12px}.share-song-submit{font-weight:600}
.notice,.success-celebration{margin:16px 0;border:1px solid var(--listen-border);border-radius:4px;padding:10px 12px;background:rgba(255,255,255,.68)}.notice.error{border-color:#b94a48;background:#fff4f4;color:#7b2525}.success-celebration h2{margin-top:0}.important-note{margin:15px 0;border-top:1px solid var(--listen-border);border-bottom:1px solid var(--listen-border);padding:12px 0}
.back-link{margin:0 0 16px}.artist-header-block{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--listen-border);padding-bottom:16px;margin-bottom:22px}.artist-header-block h1{margin:0 0 5px;font-size:2rem}.artist-location,.artist-stats{margin:3px 0;color:var(--listen-muted)}.artist-actions{display:flex;gap:12px;flex-wrap:wrap}.music-section{margin:24px 0}.track-list{list-style:none;margin:0;padding:0}.compact-track-row{display:grid;grid-template-columns:190px minmax(160px,1fr) 120px 90px auto;gap:10px;align-items:center;border-bottom:1px solid var(--listen-border);padding:7px 0}.compact-track-row audio{width:190px;height:32px}.track-meta{color:var(--listen-muted);font-size:.9rem}.about-block,.share-reminder{border-top:1px solid var(--listen-border);padding-top:14px;margin-top:24px}.track-page{max-width:760px}.large-player{width:100%;margin:18px 0 8px}.hidden-label{display:inline-block;border:1px solid var(--listen-border);background:rgba(255,255,255,.65);padding:5px 8px;border-radius:4px;color:var(--listen-muted)}.honeypot{position:absolute;left:-9999px}
@media(max-width:800px){.compact-track-row{grid-template-columns:1fr}.compact-track-row audio{width:100%}}
@media(max-width:760px){.wrap.listen-topbar-inner{width:100%;padding-left:66px;padding-right:4px}.listen-topbar{height:42px}.listen-topbar-inner{min-height:42px}.listen-topbar-logo-link,.listen-topbar-logo{width:54px;height:54px}.listen-topbar-menu a{min-height:42px;padding:0 2px;font-size:.64rem;white-space:normal;line-height:1.05}.welcome-banner{display:grid;grid-template-columns:auto 1fr}.welcome-banner p{font-size:1rem}.title-with-lick{gap:5px 9px}}
@media(max-width:700px){.artist-header-block{display:block}.artist-actions{margin-top:10px}.song-source-buttons{display:grid;grid-template-columns:1fr 1fr}.song-source-buttons button{min-width:0;width:100%}.directory th:nth-child(3),.directory td:nth-child(3){display:none}}
@media(max-width:480px){.wrap.listen-topbar-inner{padding-left:59px}.listen-topbar-logo-link,.listen-topbar-logo{width:50px;height:50px}.listen-topbar-menu a{font-size:.58rem}.welcome-banner{grid-template-columns:1fr}.welcome-banner h1{font-size:1.72rem}.footer-grid{display:block}}

/* HOMEPAGE + SONG DIRECTORY UPDATE */
.welcome-line-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:4px 0 2px}
.welcome-line-row h1{margin:0;font-size:2rem;font-weight:400;letter-spacing:-.02em;color:#333}
.welcome-line-row p{margin:0;flex:1 1 390px;font-size:1.15rem;color:var(--listen-muted)}
.welcome-lick,.steps-lick{display:block;margin:4px 0 8px}
.home-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.home-directory-link{font-size:.94rem}
.directory-section h1{margin-bottom:4px;font-weight:400}
.directory-intro{margin-top:0;color:var(--listen-muted)}
@media(max-width:760px){.welcome-line-row{display:grid;grid-template-columns:auto 1fr;gap:6px 10px}.welcome-line-row p{font-size:1rem}}
@media(max-width:480px){.welcome-line-row{grid-template-columns:1fr}.welcome-line-row h1{font-size:1.72rem}}


/* Homepage three-step guide */
.home-steps {
    margin: 18px 0 22px;
    max-width: 760px;
}

.home-step {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: start;
    padding: 15px 0 17px;
    border-bottom: 1px solid var(--listen-border);
}

.home-step:first-child {
    border-top: 1px solid var(--listen-border);
}

.home-step-number {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--listen-blue);
}

.home-step-copy h3 {
    margin: 0 0 3px;
    font-size: 1.08rem;
    font-weight: 600;
}

.home-step-copy p {
    margin: 0;
    color: var(--listen-muted);
}

@media (max-width: 600px) {
    .home-step {
        grid-template-columns: 42px 1fr;
        gap: 10px;
    }

    .home-step-number {
        font-size: 1.7rem;
    }
}

/* Reusable Listen Lick video link */
.listen-lick {
    margin: 6px 0 12px;
}

.listen-lick-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--listen-blue);
    line-height: 1.2;
}

.listen-lick-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 19px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: var(--listen-blue);
    transition: transform .15s ease, background-color .15s ease;
}

.listen-lick-icon span {
    display: block;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #ffffff;
}

.listen-lick-trigger:hover .listen-lick-icon,
.listen-lick-trigger:focus .listen-lick-icon {
    background: var(--listen-blue-dark);
    transform: translateY(-1px);
}

.listen-lick-label {
    font-size: .82rem;
}

.listen-lick-time {
    color: var(--listen-muted);
    font-size: .78rem;
}

/* Create account page */
.register-page > h1 {
    margin-bottom: 0;
    font-weight: 400;
}

.account-form {
    max-width: 560px;
    gap: 21px;
}

.account-form label {
    gap: 3px;
}

.account-form .field-label {
    font-size: 1.03rem;
    font-weight: 600;
}

.account-form .field-help {
    margin-bottom: 4px;
}

.account-form .password-warning {
    margin-top: -2px;
    color: #555555;
    font-style: italic;
}


/* --------------------------------------------------
   RECORDING PREPARATION
-------------------------------------------------- */

.record-preparation-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px !important;
    margin: 12px 0 2px;
    color: var(--listen-muted);
    font-size: 0.92rem;
}

.record-preparation-option input {
    width: auto;
    margin: 0;
}

.record-preparation {
    display: grid;
    place-items: center;
    min-height: 96px;
    margin: 10px 0 2px;
}

.record-preparation[hidden] {
    display: none !important;
}

.record-preparation-ring {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg);
}

.record-preparation-track,
.record-preparation-progress {
    fill: none;
    stroke-width: 7;
}

.record-preparation-track {
    stroke: rgba(40, 95, 145, 0.16);
}

.record-preparation-progress {
    stroke: var(--listen-blue);
    stroke-linecap: round;
    stroke-dasharray: 188.5;
    stroke-dashoffset: 188.5;
}

.record-preparation.is-running .record-preparation-progress {
    animation: listen-record-preparation 4s linear forwards;
}

@keyframes listen-record-preparation {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .record-preparation.is-running .record-preparation-progress {
        animation-timing-function: steps(4, end);
    }
}

/* --------------------------------------------------
   LOGIN PAGE — CURRENT LISTEN LOOK
-------------------------------------------------- */

.login-page > h1 {
    margin-bottom: 0;
    font-weight: 400;
}

.login-page .listen-lick {
    margin-top: 7px;
    margin-bottom: 24px;
}

.login-page .account-form {
    margin-top: 18px;
}


/* --------------------------------------------------
   LISTEN LICKS — TOUCH-FRIENDLY WATCHED STATE
-------------------------------------------------- */

.listen-lick-trigger {
    min-height: 44px;
    padding: 4px 0;
    text-decoration: none;
}

.listen-lick-icon {
    width: 34px;
    height: 24px;
    border-radius: 7px;
}

.listen-lick-icon::after {
    content: "";
    display: none;
    width: 11px;
    height: 6px;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: rotate(-45deg) translateY(-1px);
}

.listen-lick.is-watched .listen-lick-icon span {
    display: none;
}

.listen-lick.is-watched .listen-lick-icon::after {
    display: block;
}

.listen-lick.is-watched .listen-lick-label::after {
    content: " Watched";
    margin-left: 5px;
    color: var(--listen-muted);
    font-size: .72rem;
    font-weight: 400;
}

.listen-lick-trigger.is-open .listen-lick-icon {
    background: var(--listen-blue-dark);
}

@media (hover: hover) and (pointer: fine) {
    .listen-lick-trigger:hover .listen-lick-icon,
    .listen-lick-trigger:focus .listen-lick-icon {
        background: var(--listen-blue-dark);
        transform: translateY(-1px);
    }
}

@media (hover: none) {
    .listen-lick-trigger:hover .listen-lick-icon {
        transform: none;
    }
}


/* --------------------------------------------------
   RESPONSIVE PHONE AND TABLET HEADER
-------------------------------------------------- */

.listen-mobile-menu-button {
    display: none;
}

@media (max-width: 820px) {
    .listen-topbar {
        height: 58px;
    }

    .wrap.listen-topbar-inner {
        width: 100%;
        min-height: 58px;
        padding: 0 14px 0 112px;
        align-items: center;
    }

    .listen-topbar-logo-link {
        left: 12px;
        top: 0;
        width: 92px;
        height: 72px;
    }

    .listen-topbar-logo {
        width: 92px;
        height: 72px;
        object-fit: contain;
        object-position: left top;
    }

    .listen-mobile-menu-button {
        display: flex;
        width: 46px;
        height: 46px;
        margin-left: auto;
        padding: 10px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }

    .listen-mobile-menu-button span {
        display: block;
        width: 25px;
        height: 2px;
        border-radius: 2px;
        background: #ffffff;
        transition: transform .18s ease, opacity .18s ease;
    }

    .listen-mobile-menu-button.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .listen-mobile-menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .listen-mobile-menu-button.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .listen-topbar-menu {
        display: none;
        position: absolute;
        top: 58px;
        left: 0;
        width: 100%;
        padding: 11px 16px 14px 112px;
        background: var(--listen-blue);
        border-top: 1px solid rgba(255,255,255,.2);
        box-shadow: 0 5px 12px rgba(0,0,0,.16);
    }

    .listen-topbar-menu.is-open {
        display: block;
    }

    .listen-topbar-menu a {
        display: block;
        min-height: 44px;
        padding: 12px 8px;
        border-bottom: 1px solid rgba(255,255,255,.18);
        color: #ffffff;
        font-size: 1rem;
        line-height: 1.2;
        text-align: left;
        white-space: normal;
    }

    .listen-topbar-menu a:last-child {
        border-bottom: 0;
    }

    .main {
        padding-top: 34px;
    }
}

@media (max-width: 480px) {
    .wrap.listen-topbar-inner {
        padding-left: 102px;
        padding-right: 8px;
    }

    .listen-topbar-logo-link,
    .listen-topbar-logo {
        width: 84px;
        height: 68px;
    }

    .listen-topbar-menu {
        padding-left: 102px;
        padding-right: 12px;
    }
}

/* LISTEN SHARE */
.listen-share{margin:8px 0}.listen-share-button,.listen-share-actions button,.listen-share-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border:1px solid #bbb;border-radius:6px;background:#fff;color:#111;font:inherit;text-decoration:none;cursor:pointer}.listen-share-panel{max-width:520px;margin-top:10px;padding:16px;border:1px solid #d6d6d6;border-radius:8px;background:#fff}.listen-share-panel[hidden]{display:none!important}.listen-share-heading{margin-bottom:8px}.listen-share-animation{display:block;width:min(240px,100%);height:auto;margin:4px 0 12px}.listen-share-actions{display:flex;flex-wrap:wrap;gap:8px}.listen-share-result{min-height:1.2em;margin:8px 0 0;color:#666;font-size:.9rem}@media(max-width:760px){.listen-share-panel{max-width:none}.listen-share-actions>*{flex:1 1 calc(50% - 8px)}}


/* --------------------------------------------------
   TRACK / ARTIST ACTION LINKS
-------------------------------------------------- */

.track-page-actions,
.artist-actions,
.track-row .track-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.track-page-actions {
    margin: 12px 0;
}

.track-page-actions > a,
.track-page-actions > button,
.artist-actions > a,
.artist-actions > button,
.track-row .track-actions > a,
.track-row .track-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--listen-border);
    border-radius: 4px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    line-height: 1.2;
    text-decoration: none;
    vertical-align: middle;
}

.track-page-actions > a:hover,
.track-page-actions > button:hover,
.artist-actions > a:hover,
.artist-actions > button:hover,
.track-row .track-actions > a:hover,
.track-row .track-actions > button:hover {
    background: #ffffff;
    border-color: #555555;
    text-decoration: none;
}

.track-page-actions .text-button,
.artist-actions .text-button,
.track-row .track-actions .text-button {
    border: 1px solid var(--listen-border);
    padding: 6px 10px;
    color: #000000;
}

@media (max-width: 700px) {
    .track-page-actions,
    .artist-actions,
    .track-row .track-actions {
        gap: 7px;
    }

    .track-page-actions > a,
    .track-page-actions > button,
    .artist-actions > a,
    .artist-actions > button,
    .track-row .track-actions > a,
    .track-row .track-actions > button {
        min-height: 40px;
        padding: 7px 11px;
    }
}


/* --------------------------------------------------
   TRACK PAGE ACTION BAR — FINAL ALIGNMENT FIX
-------------------------------------------------- */

.track-page .track-page-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 8px;
    margin: 14px 0;
}

.track-page .track-page-actions .listen-share {
    display: contents;
    margin: 0;
}

.track-page .track-page-actions .listen-share-button,
.track-page .track-page-actions .track-action-button {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 76px;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--listen-border, #bdbdb8) !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #000000 !important;
    font: inherit !important;
    line-height: 1 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

.track-page .track-page-actions .listen-share-button {
    appearance: none;
    -webkit-appearance: none;
}

.track-page .track-page-actions .track-action-button:hover,
.track-page .track-page-actions .track-action-button:focus,
.track-page .track-page-actions .listen-share-button:hover,
.track-page .track-page-actions .listen-share-button:focus {
    border-color: #555555 !important;
    background: #ffffff !important;
    color: #000000 !important;
    text-decoration: none !important;
}

.track-page .track-page-actions .listen-share-panel {
    flex-basis: 100%;
    width: 100%;
}

@media (max-width: 700px) {
    .track-page .track-page-actions {
        gap: 7px;
    }

    .track-page .track-page-actions .listen-share-button,
    .track-page .track-page-actions .track-action-button {
        min-width: 84px;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 14px !important;
    }
}




/* FOOTER SUPPORT */
.footer-support {
    margin-top: 3px;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--listen-muted, #777);
}

.footer-support a {
    color: inherit;
    text-decoration: underline;
}


/* FOOTER SUPPORT ALIGNMENT */
.site-footer .footer-support,
footer .footer-support {
    display: block;
    width: auto;
    margin: 3px 0 0 0;
    padding: 0;
    text-align: inherit;
    font-size: 0.72rem;
    line-height: 1.35;
    color: inherit;
}

.site-footer .footer-support a,
footer .footer-support a {
    color: inherit;
}


/* FOOTER LEFT COLUMN — VERSION + SUPPORT */
.footer-left {
    min-width: 0;
}

.footer-left .footer-support {
    margin: 3px 0 0;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: inherit;
    text-align: left;
}

.footer-left .footer-support a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .footer-left .footer-support {
        margin-top: 4px;
    }
}


/* CLEARER MOBILE NAVIGATION */
.mobile-directory-link {
    display: none;
}

.rights-confirmation {
    margin-top: 18px;
}

.rights-check-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.rights-check-line input {
    width: auto;
    margin-top: 3px;
    flex: 0 0 auto;
}

.rights-confirmation .field-help {
    display: block;
    margin: 5px 0 0 27px;
}

@media (max-width: 760px) {
    .mobile-directory-link {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        margin-right: 12px;
        font-size: 0.9rem;
        white-space: nowrap;
        text-decoration: none;
    }

    /* Directory is already permanently visible beside the menu button. */
    .site-nav a[href$="directory.php"] {
        display: none;
    }
}