/* ============================================
   A4A Music Player - same light blue theme as
   the Arabic Cartoon player, three levels deep:
   singer -> album -> song
   ============================================ */

.a4a-music-page * {
    box-sizing: border-box;
}

.a4a-music-page {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color: #0a3a5c;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* ===== Outer frame ===== */
.a4a-music-page .outer-frame {
    /* Break out of the site's narrow content column so the player
       runs at 90% of the browser window. 45vw is half of 90vw. */
    width: 90vw;
    max-width: 90vw;
    margin: 14px 0;
    margin-left: calc(50% - 45vw);
    margin-right: calc(50% - 45vw);
    border: 3px solid #d33;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    padding: 12px;
    box-shadow: 0 10px 30px rgba(10, 58, 92, 0.18);
}

.a4a-music-page .intro {
    text-align: center;
    padding: 14px;
}
.a4a-music-page .intro h1 {
    color: #1a5680;
    margin: 0 0 8px;
    font-size: 1.6rem;
}
.a4a-music-page .intro p {
    color: #1a5680;
    font-size: 0.95rem;
    margin: 0;
}

/* ===== Gallery (index page) ===== */
.a4a-music-page .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    padding: 14px;
}

/* ===== Layout: singer rail + right pane ===== */
.a4a-music-page .layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 12px;
}

/* ===== Singer rail ===== */
.a4a-music-page .singer-index {
    border: 3px solid #2e8b3a;
    border-radius: 10px;
    background: #f5fbff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    max-height: 820px;
}
.a4a-music-page .singer-index h3 {
    text-align: center;
    background: #1a5680;
    color: #fff;
    padding: 6px;
    border-radius: 6px;
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.a4a-music-page .singer-search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #9ec9e3;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #0a3a5c;
    background: #fff;
    margin-bottom: 8px;
    -webkit-user-select: text;
    user-select: text;
}
.a4a-music-page .singer-search:focus {
    outline: 2px solid #1a5680;
    outline-offset: 1px;
}
.a4a-music-page .alpha-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 8px;
}
.a4a-music-page .alpha-bar button {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #fff;
    color: #1a5680;
    border: 1px solid #9ec9e3;
    border-radius: 4px;
    cursor: pointer;
}
.a4a-music-page .alpha-bar button:hover,
.a4a-music-page .alpha-bar button.active {
    background: #1a5680;
    color: #fff;
}
.a4a-music-page .singer-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: #1a5680 #cfe9ff;
}
.a4a-music-page .singer-scroll::-webkit-scrollbar { width: 10px; }
.a4a-music-page .singer-scroll::-webkit-scrollbar-track {
    background: #cfe9ff;
    border-radius: 6px;
}
.a4a-music-page .singer-scroll::-webkit-scrollbar-thumb {
    background: #1a5680;
    border-radius: 6px;
}
.a4a-music-page .rail-empty {
    text-align: center;
    font-size: 0.8rem;
    padding: 14px 6px;
    color: #1a5680;
}

/* ===== Singer card ===== */
.a4a-music-page .singer-card {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #9ec9e3;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 6px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: #0a3a5c;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.a4a-music-page .singer-card:hover {
    transform: translateY(-2px);
    border-color: #1a5680;
    box-shadow: 0 4px 10px rgba(26, 86, 128, 0.25);
}
.a4a-music-page .singer-card.active {
    border-color: #d33;
    background: #fff5f5;
}
.a4a-music-page .singer-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    pointer-events: none;
    background: #e6f2fb;
}
.a4a-music-page .gallery .singer-card img { height: 150px; }
.a4a-music-page .singer-card .initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    border-radius: 6px;
    background: linear-gradient(160deg, #7fc2e8, #1a5680);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.a4a-music-page .gallery .singer-card .initials { height: 150px; }
.a4a-music-page .singer-card .card-title {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}
.a4a-music-page .singer-card .card-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    opacity: 0.75;
}

/* ===== Right pane ===== */
.a4a-music-page .right-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.a4a-music-page .now-playing {
    background: #1a5680;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    font-size: 0.95rem;
}

/* ===== Player shell ===== */
.a4a-music-page .player-host {
    display: flex;
    justify-content: center;
    background: #eaf3fc;
    border: 3px solid #1f4dbb;
    border-radius: 10px;
    padding: 10px;
}
.a4a-music-page .player-host .jp-audio {
    width: 100%;
    max-width: 480px;
    border: none;
    background: transparent;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
.a4a-music-page .jp-playlist,
.a4a-music-page .jp-title {
    display: none !important;
}

/* ===== Album list ===== */
.a4a-music-page .album-wrap {
    border: 3px solid #1f4dbb;
    border-radius: 10px;
    background: #eaf3fc;
    padding: 10px;
}
.a4a-music-page .album-wrap > h3 {
    text-align: center;
    color: #1f4dbb;
    margin: 0 0 8px;
    font-size: 1rem;
}
.a4a-music-page .album {
    border: 1px solid #9ec9e3;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
    overflow: hidden;
}
.a4a-music-page .album-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: linear-gradient(180deg, #b5dcf3, #8fc3e3);
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: #0a3a5c;
    text-align: left;
}
.a4a-music-page .album-head:hover { background: #a6d3ec; }
.a4a-music-page .album.open .album-head {
    background: linear-gradient(180deg, #1a5680, #0d3d5e);
    color: #fff;
}
.a4a-music-page .album-head .caret {
    flex: 0 0 auto;
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.a4a-music-page .album.open .album-head .caret { transform: rotate(90deg); }
.a4a-music-page .album-head .album-name { flex: 1 1 auto; }
.a4a-music-page .album-head .album-count {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.8;
}
.a4a-music-page .album-body { display: none; padding: 8px; }
.a4a-music-page .album.open .album-body { display: block; }

.a4a-music-page .track-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}
.a4a-music-page .track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: linear-gradient(180deg, #3a3a55, #1f1f33);
    color: #fff;
    border: 2px solid #1f4dbb;
    border-radius: 6px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.a4a-music-page .track:hover {
    background: linear-gradient(180deg, #1f4dbb, #0d2c70);
    transform: scale(1.02);
}
.a4a-music-page .track.active {
    background: linear-gradient(180deg, #d33, #8b1a1a);
    border-color: #fff;
    box-shadow: 0 0 8px rgba(211, 51, 51, 0.7);
}
.a4a-music-page .track .num {
    flex: 0 0 auto;
    min-width: 20px;
    text-align: right;
    opacity: 0.75;
    font-size: 0.72rem;
}
.a4a-music-page .track .name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.a4a-music-page .load-error {
    color: #8b1a1a;
    background: #ffecec;
    border: 1px solid #d33;
    border-radius: 6px;
    padding: 10px 12px;
    text-align: center;
    font-size: 0.9rem;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .a4a-music-page .np-row { flex-direction: column; }
    .a4a-music-page .back-link { justify-content: center; padding: 8px 18px; }
    .a4a-music-page .outer-frame {
        width: auto;
        max-width: none;
        margin: 14px auto;
    }
    .a4a-music-page .layout { grid-template-columns: 1fr; }
    .a4a-music-page .singer-index { max-height: 340px; }
    .a4a-music-page .track-list { grid-template-columns: 1fr; }
}

/* Keyboard focus stays visible even with selection disabled */
.a4a-music-page button:focus-visible,
.a4a-music-page [tabindex]:focus-visible {
    outline: 3px solid #d33;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .a4a-music-page * {
        transition: none !important;
    }
}

.a4a-music-page a[data-href] { cursor: pointer; }
.a4a-music-page a,
.a4a-music-page .singer-card,
.a4a-music-page .track { -webkit-touch-callout: none; }

/* ============================================
   Index page - laid out like the old
   assyrian4all.net/songs listing, on white
   ============================================ */

.a4a-music-index {
    background: #fff;
    color: #000;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-weight: 700;
    padding: 14px 8px 26px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.a4a-music-index * { box-sizing: border-box; }
.a4a-music-index a { color: #000; text-decoration: none; }
.a4a-music-index a:hover { text-decoration: underline; }

/* Break out of the site's narrow content column so the listing
   runs at 90% of the browser window. The negative margins cancel
   the parent's width, and 45vw is half of 90vw. */
.a4a-music-index {
    width: 90vw;
    max-width: 90vw;
    margin-left: calc(50% - 45vw);
    margin-right: calc(50% - 45vw);
}

.a4a-music-index table {
    border-collapse: collapse;
    margin: 0 auto 14px;
}
.a4a-music-index .notice-table {
    width: 100%;
    border: 1px solid #000;
}
.a4a-music-index .totals-table,
.a4a-music-index .letter-table {
    width: 100%;
    border: 1px solid #000;
}
.a4a-music-index .notice-table th,
.a4a-music-index .totals-table th,
.a4a-music-index .totals-table td,
.a4a-music-index .letter-table th,
.a4a-music-index .letter-table td {
    border: 1px solid #000;
    padding: 6px 4px;
    text-align: center;
    vertical-align: top;
}

.a4a-music-index .notice-table th {
    color: #c00000;
    font-weight: 700;
    line-height: 1.6;
    padding: 12px 16px;
}

.a4a-music-index .alpha-nav {
    text-align: center;
    margin: 0 auto 12px;
    line-height: 2;
    font-size: 1.05rem;
}
.a4a-music-index .alpha-nav b { padding: 0 3px; }
.a4a-music-index .alpha-nav .off { color: #999; }

.a4a-music-index .totals-table td {
    font-weight: 700;
    font-size: 1.1rem;
}

.a4a-music-index .letter-head {
    background: #e6eef5;
    font-size: 1.2rem;
    letter-spacing: 2px;
}
.a4a-music-index .singer-name {
    width: 20%;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    background: #f4f8fb;
}
.a4a-music-index .singer-pic { width: 20%; }
.a4a-music-index .singer-pic img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border: 2px solid #000;
    background: #f0f4f8;
}
.a4a-music-index .singer-pic a:hover img { border-color: #c00000; }
.a4a-music-index .pic-meta {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
}

/* ===== Search on the index page ===== */
.a4a-music-index .search-row {
    width: 100%;
    margin: 0 auto 14px;
    text-align: center;
}
.a4a-music-index .index-search {
    width: 100%;
    max-width: 460px;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    background: #fff;
    border: 2px solid #000;
    border-radius: 6px;
    -webkit-user-select: text;
    user-select: text;
}
.a4a-music-index .index-search:focus {
    outline: 3px solid #c00000;
    outline-offset: 2px;
}
.a4a-music-index .search-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.a4a-music-index .search-results {
    width: 100%;
    margin: 0 auto 18px;
}
.a4a-music-index .search-head {
    margin: 14px 0 8px;
    font-size: 1.05rem;
    border-bottom: 2px solid #000;
    padding-bottom: 4px;
}
.a4a-music-index .search-note {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin: 8px 0;
}
.a4a-music-index .result-singers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.a4a-music-index .result-singer {
    display: block;
    text-align: center;
    padding: 6px;
    border: 1px solid #000;
    border-radius: 6px;
    background: #f4f8fb;
}
.a4a-music-index .result-singer:hover {
    border-color: #c00000;
    text-decoration: none;
}
.a4a-music-index .result-singer img {
    width: 117px;
    height: 117px;
    object-fit: cover;
    border: 2px solid #000;
}
.a4a-music-index .rs-name {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    font-weight: 700;
}
.a4a-music-index .rs-meta {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #444;
}
.a4a-music-index .result-songs {
    width: 100%;
    border: 1px solid #000;
}
.a4a-music-index .result-songs td {
    border: 1px solid #000;
    padding: 6px 8px;
    text-align: left;
    font-size: 0.9rem;
}
.a4a-music-index .result-songs .rs-singer { color: #333; width: 30%; }
.a4a-music-index .result-songs .rs-go { width: 70px; text-align: center; }
.a4a-music-index .result-songs .rs-go a {
    display: inline-block;
    padding: 3px 12px;
    background: #1a5680;
    color: #fff;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}
.a4a-music-index .result-songs .rs-go a:hover {
    background: #c00000;
    text-decoration: none;
}
.a4a-music-index .load-error {
    width: 100%;
    margin: 0 auto;
    color: #8b1a1a;
    background: #ffecec;
    border: 2px solid #c00000;
    border-radius: 6px;
    padding: 10px 12px;
    text-align: center;
}

@media (max-width: 1100px) {
    .a4a-music-index .singer-pic img { width: 100px; height: 100px; }
}
@media (max-width: 900px) {
    .a4a-music-index {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .a4a-music-index .singer-pic img { width: 74px; height: 74px; }
    .a4a-music-index .singer-name { font-size: 0.78rem; }
    .a4a-music-index .notice-table th { font-size: 0.85rem; }
}

/* ============================================
   Song hits inside the player's singer rail
   ============================================ */
.a4a-music-page .rail-songs {
    border-top: 2px solid #9ec9e3;
    margin-top: 8px;
    padding-top: 8px;
}
.a4a-music-page .rail-songs h4 {
    margin: 0 0 6px;
    font-size: 0.82rem;
    color: #1a5680;
}
.a4a-music-page .rail-note {
    font-size: 0.72rem;
    opacity: 0.7;
    margin: 6px 0;
}
.a4a-music-page .rail-song {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #9ec9e3;
    border-radius: 6px;
    padding: 5px 7px;
    margin-bottom: 5px;
    font: inherit;
    color: #0a3a5c;
    cursor: pointer;
}
.a4a-music-page .rail-song:hover {
    border-color: #d33;
    background: #fff5f5;
}
.a4a-music-page .rail-song .rsg-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.a4a-music-page .rail-song .rsg-singer {
    display: block;
    font-size: 0.68rem;
    opacity: 0.7;
}

/* ============================================
   Assyrian palette
   Deep navy, gold and red, on white. Applied
   last so it overrides the light blue defaults
   above without touching the layout.
   ============================================ */

.a4a-music-page,
.a4a-music-index {
    --navy: #0b2a4a;
    --navy-2: #14416e;
    --blue: #1a5f9e;
    --gold: #d4a017;
    --gold-lt: #f2c94c;
    --red: #a8102a;
    --ink: #0a1626;
}

/* ===== Index: A-Z keys ===== */
.a4a-music-index .alpha-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    margin-bottom: 16px;
}
.a4a-music-index .alpha-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(160deg, var(--navy-2), var(--navy));
    border: 1px solid var(--navy);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.14s, box-shadow 0.14s, background 0.14s;
}
.a4a-music-index a.alpha-key:hover {
    background: linear-gradient(160deg, var(--gold-lt), var(--gold));
    color: var(--ink);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.45);
    text-decoration: none;
}
.a4a-music-index .alpha-key.off {
    color: #9aa4b0;
    background: #eef1f5;
    border-color: #d6dce3;
    box-shadow: none;
}

/* ===== Index: totals ===== */
.a4a-music-index .totals-table {
    border: none;
    box-shadow: 0 6px 18px rgba(11, 42, 74, 0.18);
}
.a4a-music-index .totals-table th {
    background: linear-gradient(180deg, var(--navy-2), var(--navy));
    color: #fff;
    border: 1px solid var(--navy);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 6px;
}
.a4a-music-index .totals-table td {
    background: #fff;
    border: 1px solid var(--navy);
    color: var(--navy);
    font-size: 2rem;
    font-weight: 800;
    padding: 12px 6px;
}

/* ===== Index: letter blocks and singer cards ===== */
.a4a-music-index .letter-table {
    border: none;
    box-shadow: 0 5px 16px rgba(11, 42, 74, 0.14);
}
.a4a-music-index .letter-head {
    background: linear-gradient(180deg, var(--navy-2), var(--navy));
    color: var(--gold-lt);
    border: 1px solid var(--navy);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 6px;
    padding: 8px 4px;
}
.a4a-music-index .singer-name {
    background: linear-gradient(180deg, #f7fafd, #e9f0f7);
    border: 1px solid #c3d0dd;
    border-bottom: 2px solid var(--gold);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    padding: 8px 6px;
}
.a4a-music-index .singer-pic {
    background: #fff;
    border: 1px solid #c3d0dd;
    padding: 12px 6px 10px;
}
.a4a-music-index .singer-pic img {
    border: 3px solid var(--navy);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(11, 42, 74, 0.28);
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.a4a-music-index .singer-pic a:hover img {
    border-color: var(--gold);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(212, 160, 23, 0.5);
}
.a4a-music-index .pic-meta {
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.a4a-music-index .notice-table {
    border: 2px solid var(--red);
    box-shadow: 0 4px 14px rgba(168, 16, 42, 0.14);
}
.a4a-music-index .notice-table th {
    border: none;
    color: var(--red);
    font-size: 0.98rem;
}

.a4a-music-index .index-search {
    border-color: var(--navy);
    font-size: 1rem;
    box-shadow: 0 3px 10px rgba(11, 42, 74, 0.15);
}
.a4a-music-index .search-head {
    border-bottom-color: var(--gold);
    color: var(--navy);
}

/* ===== Player: the Assyrian treatment ===== */
.a4a-music-page .outer-frame {
    border: 3px solid var(--gold);
    background: #fff;
    box-shadow: 0 10px 30px rgba(11, 42, 74, 0.22);
}

.a4a-music-page .singer-index {
    border: 2px solid var(--navy);
    background: #f7fafd;
}
.a4a-music-page .singer-index h3 {
    background: linear-gradient(180deg, var(--navy-2), var(--navy));
    color: var(--gold-lt);
    letter-spacing: 2px;
    border-bottom: 2px solid var(--gold);
    font-size: 1rem;
}
.a4a-music-page .singer-card { border-color: #c3d0dd; }
.a4a-music-page .singer-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.4);
}
.a4a-music-page .singer-card.active {
    border-color: var(--red);
    background: #fff6f7;
}
.a4a-music-page .singer-card img { border-radius: 6px; }

/* Now playing row: status bar on the left, way back on the right */
.a4a-music-page .np-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.a4a-music-page .np-row .now-playing { flex: 1 1 auto; min-width: 0; }
.a4a-music-page .back-link {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 18px;
    background: linear-gradient(180deg, var(--navy-2), var(--navy));
    color: var(--gold-lt);
    border: 1px solid var(--gold);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.14s, box-shadow 0.14s, transform 0.12s;
}
.a4a-music-page .back-link:hover {
    background: linear-gradient(180deg, var(--gold-lt), var(--gold));
    color: var(--navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.5);
    text-decoration: none;
}
.a4a-music-page .back-link:focus-visible {
    outline: 3px solid var(--gold-lt);
    outline-offset: 2px;
}

/* Now playing bar, with a four-point star struck in gold at each end */
.a4a-music-page .now-playing {
    position: relative;
    background: linear-gradient(90deg, var(--navy), var(--navy-2) 50%, var(--navy));
    color: #fff;
    border: 1px solid var(--navy);
    border-radius: 8px;
    padding: 10px 46px;
    font-size: 1rem;
    letter-spacing: 0.3px;
}
.a4a-music-page .now-playing::before,
.a4a-music-page .now-playing::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--gold);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.a4a-music-page .now-playing::before { left: 14px; }
.a4a-music-page .now-playing::after { right: 14px; }

.a4a-music-page .player-host {
    background: linear-gradient(170deg, #123a62, var(--navy));
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 16px 12px;
}

.a4a-music-page .album-wrap {
    border: 2px solid var(--navy);
    background: #f4f8fc;
}
.a4a-music-page .album-wrap > h3 {
    color: var(--navy);
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.a4a-music-page .album { border-color: #c3d0dd; }
.a4a-music-page .album-head {
    background: linear-gradient(180deg, #e9f0f7, #d6e3ee);
    color: var(--ink);
    border-left: 4px solid var(--gold);
    font-size: 0.95rem;
}
.a4a-music-page .album-head:hover { background: #cfe0ee; }
.a4a-music-page .album.open .album-head {
    background: linear-gradient(180deg, var(--navy-2), var(--navy));
    color: var(--gold-lt);
    border-left-color: var(--red);
}
.a4a-music-page .album-head .album-count { color: inherit; }

.a4a-music-page .track {
    background: linear-gradient(180deg, #1b4a7a, #0d2d4d);
    border: 1px solid #2a6ba8;
    border-left: 3px solid var(--gold);
    border-radius: 7px;
}
.a4a-music-page .track:hover {
    background: linear-gradient(180deg, #2a6ba8, #14416e);
    border-color: var(--gold);
}
.a4a-music-page .track.active {
    background: linear-gradient(180deg, #c4152f, #7d0c1f);
    border-color: var(--gold);
    border-left-color: var(--gold-lt);
    box-shadow: 0 0 10px rgba(212, 160, 23, 0.6);
}
.a4a-music-page .track .num { color: var(--gold-lt); opacity: 1; }

.a4a-music-page .rail-songs { border-top-color: var(--gold); }
.a4a-music-page .rail-songs h4 { color: var(--navy); }
.a4a-music-page .rail-song:hover {
    border-color: var(--gold);
    background: #fffbf0;
}

/* ============================================
   Skinned player - the supplied artwork
   The bar is one background image with the real
   jPlayer controls placed over the drawn ones,
   positioned in percentages so it scales.
   Coordinates taken from the 1459x255 artwork.
   ============================================ */

.a4a-music-page .player-host {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 14px;
    aspect-ratio: 1459 / 255;
    padding: 0;
    background: url("images/skin/player-bar.png") center / 100% 100% no-repeat;
    border: none;
    border-radius: 0;
}

.a4a-music-page .player-host .jp-audio,
.a4a-music-page .player-host .jp-type-playlist,
.a4a-music-page .player-host .jp-interface,
.a4a-music-page .player-host .jp-controls,
.a4a-music-page .player-host .jp-volume-controls,
.a4a-music-page .player-host .jp-time-holder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    display: block !important;
}
/* the wrappers are only coordinate space, clicks belong to the buttons */
.a4a-music-page .player-host .jp-controls,
.a4a-music-page .player-host .jp-volume-controls,
.a4a-music-page .player-host .jp-time-holder { pointer-events: none; }

/* ===== The three drawn buttons ===== */
.a4a-music-page .player-host .jp-controls button {
    position: absolute !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-radius: 50%;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    transition: box-shadow 0.15s, transform 0.12s;
}
.a4a-music-page .player-host .jp-controls button::before,
.a4a-music-page .player-host .jp-controls button::after { content: none !important; }

.a4a-music-page .player-host .jp-previous {
    left: 34.9%;
    top: 29.0%;
    width: 6.9%;
    height: 39.2%;
}
.a4a-music-page .player-host .jp-play {
    left: 43.3%;
    top: 30.2%;
    width: 11.1%;
    height: 37.3%;
    border-radius: 14px;
}
.a4a-music-page .player-host .jp-next {
    left: 56.1%;
    top: 29.0%;
    width: 6.7%;
    height: 39.2%;
}
.a4a-music-page .player-host .jp-controls button:hover {
    box-shadow: 0 0 22px 4px rgba(242, 201, 76, 0.55);
    transform: scale(1.03);
}
.a4a-music-page .player-host .jp-controls button:active { transform: scale(0.97); }
.a4a-music-page .player-host .jp-controls button:focus-visible {
    outline: 3px solid var(--gold-lt);
    outline-offset: 2px;
}
/* the artwork draws play and pause as one symbol, so no state swap */
.a4a-music-page .player-host .jp-stop { display: none !important; }

/* ===== Elapsed time, in the window at the top ===== */
.a4a-music-page .player-host .jp-current-time {
    position: absolute !important;
    left: 44.6%;
    top: 2%;
    width: 9.6%;
    height: 16%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    padding: 0 !important;
    color: #cfe9ff !important;
    font-size: clamp(0.7rem, 1.35vw, 1.15rem) !important;
    font-weight: 700;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(120, 200, 255, 0.8);
}

/* ===== Progress and total, in the recess along the bottom ===== */
.a4a-music-page .player-host .jp-progress {
    position: absolute !important;
    left: 34.5%;
    top: 83.5%;
    width: 27.5%;
    height: 8%;
    margin: 0 !important;
    background: rgba(5, 18, 32, 0.55) !important;
    border: 1px solid rgba(160, 200, 235, 0.35);
    border-radius: 4px;
    overflow: hidden;
    pointer-events: auto;
}
.a4a-music-page .player-host .jp-seek-bar {
    background: none !important;
    height: 100% !important;
    width: 0;
}
.a4a-music-page .player-host .jp-play-bar {
    height: 100% !important;
    background: linear-gradient(90deg, rgba(150, 210, 255, 0.85), rgba(242, 201, 76, 0.95)) !important;
    box-shadow: 0 0 10px rgba(150, 210, 255, 0.7);
}
.a4a-music-page .player-host .jp-duration {
    position: absolute !important;
    left: 62.8%;
    top: 82.5%;
    width: 5.6%;
    height: 10%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    padding: 0 !important;
    color: #cfe9ff !important;
    font-size: clamp(0.55rem, 0.95vw, 0.85rem) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ===== Volume: the supplied widget, with a sliding knob =====
   Sits over the one drawn into the bar. The artwork has
   transparent corners so it blends into the lapis disc.
   Percentages are measured from the 1459x255 bar and the
   135x153 widget, so everything scales together. */
.a4a-music-page .player-host .a4a-volume {
    position: absolute;
    /* Nudge these four if it still sits a shade off: larger left
       moves it right, larger top moves it down. */
    left: 68.2%;
    top: 24.3%;
    width: 9.3%;
    height: 60%;
    background: url("images/skin/volume.png") center / 100% 100% no-repeat;
    cursor: pointer;
    touch-action: none;
    z-index: 3;
}
.a4a-music-page .player-host .a4a-volume:focus-visible {
    outline: 3px solid var(--gold-lt);
    outline-offset: 3px;
    border-radius: 12px;
}
/* gold column under the knob, the way the artwork draws it */
.a4a-music-page .player-host .vol-fill {
    position: absolute;
    left: 40.5%;
    width: 9%;
    top: 50%;
    height: 33%;
    background: linear-gradient(180deg, #f2c94c, #c98f12);
    border-radius: 3px;
    box-shadow: 0 0 7px rgba(242, 201, 76, 0.75);
    pointer-events: none;
}
.a4a-music-page .player-host .vol-knob {
    position: absolute;
    left: 27.4%;
    width: 35.6%;
    height: 19%;
    top: 31%;
    background: url("images/skin/volume-knob.png") center / 100% 100% no-repeat;
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.a4a-music-page .player-host .jp-mute,
.a4a-music-page .player-host .jp-unmute,
.a4a-music-page .player-host .jp-volume-max,
.a4a-music-page .player-host .jp-volume-bar { display: none !important; }

/* ============================================
   Track slabs, cut from the same artwork.
   border-image keeps the carved ends intact and
   stretches only the middle, so a slab works at
   any width and any number of songs per album.
   ============================================ */

.a4a-music-page .album-wrap {
    background: #0c1e33 url("images/skin/panel.png") center / cover;
    border: 2px solid #2f5878;
    border-radius: 10px;
}
.a4a-music-page .album-wrap > h3 {
    color: var(--gold-lt);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.a4a-music-page .album {
    background: transparent;
    border: none;
    margin-bottom: 12px;
}
.a4a-music-page .album-head {
    background: url("images/skin/album-head.png") center / 100% 100% no-repeat;
    border: none;
    color: var(--gold-lt);
    padding: 12px 18px;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
.a4a-music-page .album-head:hover { filter: brightness(1.12); }
.a4a-music-page .album.open .album-head {
    background: url("images/skin/album-head.png") center / 100% 100% no-repeat;
    color: #fff;
}
.a4a-music-page .album-head .caret { color: var(--gold-lt); }
.a4a-music-page .album-head .album-count {
    color: #cfe9ff;
    font-size: 0.8rem;
}
.a4a-music-page .album-body {
    background: transparent;
    padding: 10px 6px 4px;
}

.a4a-music-page .track-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px 14px;
}
.a4a-music-page .track {
    background: none !important;
    border-style: solid;
    border-width: 10px 34px;
    border-color: transparent;
    border-image-source: url("images/skin/track.png");
    border-image-slice: 10 34 fill;
    border-image-width: 10px 34px;
    border-image-repeat: stretch;
    border-radius: 0;
    box-shadow: none;
    min-height: 52px;
    padding: 0 2px;
    color: #2b2016;
    font-size: 0.9rem;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.12s, filter 0.12s;
}
.a4a-music-page .track:hover {
    background: none !important;
    filter: brightness(1.1) saturate(1.1);
    transform: translateY(-2px);
}
.a4a-music-page .track.active {
    background: none !important;
    border-image-source: url("images/skin/track-active.png");
    box-shadow: none;
    color: #3d1520;
    filter: drop-shadow(0 0 10px rgba(255, 150, 170, 0.55));
}
.a4a-music-page .track .num {
    color: #4a3726;
    opacity: 1;
    font-size: 0.82rem;
    min-width: 22px;
}
.a4a-music-page .track.active .num { color: #5a1c28; }

@media (max-width: 900px) {
    .a4a-music-page .player-host { margin-bottom: 12px; }
    .a4a-music-page .track-list { grid-template-columns: 1fr; }
}

.a4a-music-index .built-stamp {
    text-align: center;
    margin: -6px 0 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #666;
}

/* A way back up to the A-Z bar, in every letter header */
.a4a-music-index .letter-head {
    position: relative;
}
.a4a-music-index .to-top {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(160deg, #f2c94c, #d4a017);
    color: #0a1626;
    border: 1px solid #fff3cf;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: transform 0.14s, box-shadow 0.14s, background 0.14s;
}
.a4a-music-index .to-top:hover {
    background: linear-gradient(160deg, #fff, #f2c94c);
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 3px 12px rgba(242, 201, 76, 0.7);
    text-decoration: none;
}
/* the jump lands below the sticky site header rather than under it */
.a4a-music-index [id^="letter-"],
.a4a-music-index #alpha-top {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}
@media (max-width: 900px) {
    .a4a-music-index .to-top {
        right: 6px;
        padding: 3px 8px;
        font-size: 0.68rem;
    }
}