/* ============================================================
   Jamtab Browse — Crawlable Artist / Instrument Index Pages
   ------------------------------------------------------------
   Dark theme matching forms.css, cards.css and site.css.
   Used on /browse, /browse/artists/{letter}, /browse/artist/{slug},
   /browse/instrument/{slug}, and the 410 Gone page.

   These pages exist so Googlebot can walk from the homepage to
   every tab without running JavaScript — but they are also real
   landing pages. /browse/artist/limp-bizkit targets "limp bizkit
   tabs", so a visitor arriving from search sees this first.

   The page shell (.pane-content / .pagewrap / .pagecontainer-wide)
   comes from Form.css, which each view links the same way Login,
   Profile and Privacy do. This file only styles what is inside it.

   Palette is taken from Form.css rather than re-invented:
     #121212  panel background        #1a1a1a  raised chip
     #e6e6e6  body text               #f4f4f4  headings
     #b3b3b3  secondary text          #8a8a8a  muted counts
     #0d83dd  links (site-wide)       rgba(255,255,255,.08) borders
   ============================================================ */


/* ==============================
   Layout
   ============================== */

.jt-browse {
    color: #e6e6e6;
}

    .jt-browse h1 {
        font-size: 28px;
        font-weight: 700;
        color: #f4f4f4;
        margin: 0 0 6px;
        letter-spacing: 0.3px;
    }

    .jt-browse h2 {
        font-size: 16px;
        font-weight: 600;
        color: #0d83dd;
        margin: 28px 0 12px;
    }

.jt-browse-lede {
    color: #b3b3b3;
    font-size: 14px;
    margin: 0 0 24px;
}

.jt-browse-crumbs {
    font-size: 12px;
    color: #8a8a8a;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

    .jt-browse-crumbs span {
        color: #b3b3b3;
    }


/* ==============================
   Song / artist table
   ============================== */

.jt-browse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .jt-browse-table th {
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #b3b3b3;
        padding: 10px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .jt-browse-table td {
        color: #e6e6e6;
        padding: 9px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* The song link is the one thing on the row worth clicking, so it
       stays the site blue while the metadata sits a step back. */
    .jt-browse-table td:first-child {
        font-weight: 500;
    }

    .jt-browse-table tbody tr:hover td {
        background: #1a1a1a;
    }

    .jt-browse-table tbody tr:last-child td {
        border-bottom: none;
    }


/* ==============================
   A–Z letters, instrument chips, artist lists
   ============================== */

.jt-browse-letters,
.jt-browse-inline {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .jt-browse-letters li,
    .jt-browse-inline li {
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 8px 14px;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

        .jt-browse-letters li:hover,
        .jt-browse-inline li:hover {
            background: #212121;
            border-color: rgba(255, 255, 255, 0.18);
        }

.jt-browse-letters li {
    min-width: 54px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

.jt-browse-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Hundreds of artists per letter: columns keep the page from
       becoming a single endless scroll. */
    column-width: 260px;
    column-gap: 28px;
}

    .jt-browse-list li {
        padding: 6px 0;
        break-inside: avoid;
    }

.jt-browse-count {
    color: #8a8a8a;
    font-size: 12px;
    margin-left: 6px;
}


/* ==============================
   410 Gone
   ============================== */

.jt-gone {
    color: #e6e6e6;
}

    .jt-gone h1 {
        font-size: 24px;
        font-weight: 700;
        color: #f4f4f4;
        margin: 0 0 14px;
    }

    .jt-gone p {
        color: #b3b3b3;
        font-size: 14px;
        margin-bottom: 14px;
    }

.jt-gone-what strong {
    color: #e6e6e6;
}

.jt-gone-links {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    line-height: 2.1;
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 768px) {
    .jt-browse h1 {
        font-size: 22px;
    }

    /* Album is the first thing to go — the song link and the
       instrument are what someone is actually choosing between. */
    .jt-browse-table th:nth-child(3),
    .jt-browse-table td:nth-child(3) {
        display: none;
    }

    .jt-browse-table {
        font-size: 13px;
    }

        .jt-browse-table th,
        .jt-browse-table td {
            padding: 8px 10px;
        }

    .jt-browse-list {
        column-width: auto;
        columns: 1;
    }
}