/* Shared chrome for /tools/ pages.
 *
 * The three original tool pages each inlined their own <style>, which is why
 * the breadcrumb, FAQ block and cross-link footer had to be written three
 * times to look the same. Everything that appears on more than one tool page
 * lives here; page-specific layout (the poster studio grid, the widget
 * preview) stays inline in its own template.
 */

/* ---- Breadcrumbs ------------------------------------------------------ */

.tl-crumbs {
    max-width: 1240px;
    margin: 110px auto 0;
    padding: 0 1.5rem;
    font-size: .8rem;
    color: #6f6f6f;
}
.tl-crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
}
.tl-crumbs li::after {
    content: "/";
    margin-left: .45rem;
    color: #3d3d3d;
}
.tl-crumbs li:last-child::after { content: none; }
.tl-crumbs a { color: #9a9a9a; text-decoration: none; }
.tl-crumbs a:hover { color: #ff4d4d; }
.tl-crumbs [aria-current="page"] { color: #d0d0d0; }

/* A page that shows breadcrumbs no longer needs its own top margin to clear
 * the fixed header — the crumb strip has already done it. */
.tl-crumbs + .bnc-page,
.tl-crumbs + .wb-page,
.tl-crumbs + .ps-wrap,
.tl-crumbs + .tl-page { margin-top: 1.5rem; }

/* ---- Generic tool page shell ------------------------------------------ */

.tl-page {
    max-width: 1080px;
    margin: 120px auto 4rem;
    padding: 0 1.5rem;
    color: #ccc;
}
.tl-page h1 {
    font-family: 'Lacquer', cursive;
    color: #fff;
    font-size: 2.6rem;
    margin-bottom: .5rem;
    line-height: 1.15;
}
.tl-lede {
    color: #9a9a9a;
    max-width: 680px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.tl-section { margin-bottom: 3rem; }
.tl-section h2 {
    color: #fff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-left: 4px solid #ff0000;
    padding-left: .75rem;
    margin-bottom: 1.25rem;
}

/* ---- Tool cards (hub, and the cross-link strip on each tool) ---------- */

.tl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.tl-card {
    display: flex;
    flex-direction: column;
    background: #0f0f0f;
    border: 1px solid #262626;
    border-radius: 6px;
    padding: 1.5rem;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.tl-card:hover { border-color: #ff0000; transform: translateY(-2px); }
.tl-card .tl-card-icon { color: #ff0000; font-size: 1.35rem; margin-bottom: .9rem; }
.tl-card h3 { color: #fff; font-size: 1.15rem; margin: 0 0 .5rem; }
.tl-card p { color: #8f8f8f; font-size: .9rem; line-height: 1.6; margin: 0 0 1.1rem; flex: 1; }
.tl-card .tl-card-cta { color: #ff4d4d; font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.tl-card .tl-card-cta::after { content: " \2192"; }

/* ---- Stat strip ------------------------------------------------------- */

.tl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 1.5rem 0;
}
.tl-stats .tl-stat b {
    display: block;
    color: #fff;
    font-size: 1.7rem;
    font-family: 'Lacquer', cursive;
}
.tl-stats .tl-stat span {
    font-size: .75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---- FAQ -------------------------------------------------------------- */

.tl-faq { border-top: 1px solid #222; margin-top: 3.5rem; padding-top: 2.5rem; }
.tl-faq h2 {
    color: #fff;
    font-family: 'Lacquer', cursive;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.tl-faq details {
    border-bottom: 1px solid #1e1e1e;
    padding: .95rem 0;
}
.tl-faq summary {
    cursor: pointer;
    color: #e6e6e6;
    font-size: .98rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.tl-faq summary::-webkit-details-marker { display: none; }
.tl-faq summary::after {
    content: "+";
    color: #ff0000;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}
.tl-faq details[open] summary::after { content: "\2212"; }
.tl-faq details p,
.tl-faq details li {
    color: #979797;
    line-height: 1.75;
    font-size: .92rem;
}
.tl-faq details p { margin: .85rem 0 0; }
.tl-faq details ul { margin: .85rem 0 0; padding-left: 1.2rem; }
.tl-faq a { color: #ff4d4d; }

/* ---- Prose blocks on tool pages --------------------------------------- */

.tl-prose { border-top: 1px solid #222; margin-top: 3.5rem; padding-top: 2.5rem; }
.tl-prose h2 {
    color: #fff;
    font-family: 'Lacquer', cursive;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.tl-prose h3 { color: #eee; font-size: 1rem; margin: 1.8rem 0 .5rem; }
.tl-prose p, .tl-prose li { color: #979797; line-height: 1.75; font-size: .93rem; }
.tl-prose ul, .tl-prose ol { padding-left: 1.2rem; margin: .6rem 0; }
.tl-prose li { margin-bottom: .4rem; }
.tl-prose a { color: #ff4d4d; }

/* ---- Band name generator ---------------------------------------------- */

.bng-names {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .6rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}
.bng-names li { margin: 0; }
.bng-names a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #0f0f0f;
    border: 1px solid #242424;
    border-radius: 4px;
    padding: .8rem 1rem;
    color: #eee;
    text-decoration: none;
    font-size: .98rem;
    transition: border-color .12s, background .12s;
}
.bng-names a:hover { border-color: #ff0000; background: #141414; }
.bng-names .bng-check {
    color: #6b6b6b;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    flex-shrink: 0;
}
.bng-names a:hover .bng-check { color: #ff4d4d; }

.bng-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 2.5rem; }
.bng-btn {
    background: #ff0000;
    border: 1px solid #ff0000;
    color: #fff;
    padding: .8rem 1.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    font-size: .95rem;
}
.bng-btn:hover { background: #d51007; border-color: #d51007; }
.bng-btn--ghost { background: transparent; color: #ddd; border-color: #333; }
.bng-btn--ghost:hover { background: transparent; border-color: #ff0000; color: #fff; }

.bng-genres { display: flex; flex-wrap: wrap; gap: .5rem; }
.bng-genres a {
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    padding: .45rem .85rem;
    color: #b5b5b5;
    text-decoration: none;
    font-size: .85rem;
}
.bng-genres a:hover { border-color: #ff0000; color: #fff; }

/* ---- EPK tool --------------------------------------------------------- */

.epkt-search { display: flex; gap: .75rem; margin-bottom: 2rem; flex-wrap: wrap; }
.epkt-search input {
    flex: 1;
    min-width: 220px;
    background: #111;
    border: 1px solid #333;
    color: #eee;
    padding: .9rem 1.1rem;
    border-radius: 4px;
    font-size: 1.02rem;
}
.epkt-search input:focus { outline: none; border-color: #ff0000; }
.epkt-search button {
    background: #ff0000;
    border: 1px solid #ff0000;
    color: #fff;
    padding: .9rem 1.6rem;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}
.epkt-search button:hover { background: #d51007; }

.epkt-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid #222;
}
.epkt-result a { color: #fff; text-decoration: none; font-weight: 600; }
.epkt-result a:hover { color: #ff4d4d; }
.epkt-result .meta { color: #808080; font-size: .82rem; text-align: right; }

.epkt-includes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.epkt-includes li {
    background: #0f0f0f;
    border: 1px solid #242424;
    border-radius: 5px;
    padding: 1.1rem 1.25rem;
}
.epkt-includes b { display: block; color: #fff; font-size: .95rem; margin-bottom: .35rem; }
.epkt-includes span { color: #8b8b8b; font-size: .86rem; line-height: 1.6; }

@media (max-width: 640px) {
    .tl-page h1 { font-size: 2rem; }
    .tl-crumbs { margin-top: 95px; }
}