/* Spotify playlist tool. Loaded after the classic site's CSS (Bootstrap + styles.css, for the shared navbar and
   footer), so everything here is scoped to .tool and avoids Bootstrap's class names (.btn, .row, .alert, .badge, .progress). */
[hidden] { display: none !important; }

/* Short page: keep the footer at the bottom of the window */
body.tool-page { display: flex; flex-direction: column; min-height: 100vh; }
body.tool-page > main { flex: 1 0 auto; width: 100%; }

.tool { max-width: 920px; margin: 0 auto; padding: 120px 1rem 2rem; --line: rgba(255, 255, 255, .14);
    --muted: rgba(255, 255, 255, .6); --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; }
.tool .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tool-head { text-align: center; margin-bottom: 2rem; }
.tool-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 400; text-transform: uppercase; margin: 0 0 .5rem; }
.tool-head .lead-line { color: var(--muted); margin: 0; }

.tool .panel { border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; margin-bottom: 1rem; }
.tool .panel-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.tool .panel-head h2 { font-size: 1rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.tool .step { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45);
    display: grid; place-items: center; font-size: .85rem; }
.tool .panel.done .step { background: #fff; color: #000; border-color: #fff; }

/* Controls */
.tool .line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tool .tbtn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; margin: 0; padding: .6rem 1.15rem;
    border: 1px solid #fff; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 13px;
    letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: box-shadow .3s ease; }
.tool .tbtn:hover, .tool .tbtn:focus-visible { box-shadow: 0 0 22px rgba(255, 255, 255, .45); outline: none; }
.tool .tbtn.primary { background: #fff; color: #000; }
.tool .tbtn.ghost { border-color: var(--line); color: var(--muted); }
.tool .tbtn.sm { padding: .35rem .8rem; font-size: 12px; }
.tool .tbtn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.tool .linkish { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; text-decoration: underline;
    text-underline-offset: 3px; cursor: pointer; }
.tool .linkish:hover, .tool .linkish:focus-visible { color: #fff; outline: none; }
.tool .small-link { margin-top: .9rem; font-size: .85rem; }
.tool input[type=text], .tool input[type=search] { background: #000; color: #fff; border: 1px solid var(--line);
    border-radius: 10px; padding: .6rem .8rem; font: inherit; font-size: 15px; min-width: 0; }
.tool input[type=text]:focus, .tool input[type=search]:focus { outline: none; border-color: rgba(255, 255, 255, .6); }
.tool #clientId { flex: 1 1 16rem; max-width: 24rem; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
.tool #plName { flex: 1 1 14rem; max-width: 22rem; }
.tool label.check { display: inline-flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer; color: var(--muted); }
.tool input[type=checkbox] { accent-color: #fff; width: 1rem; height: 1rem; }

/* Messages */
.tool .okline { color: var(--ok); margin: 0; }
.tool .okline .linkish { margin-left: .6rem; }
.tool .status { color: var(--muted); font-size: .9rem; margin: .8rem 0 0; }
.tool .line .status { margin: 0; }
.tool .err { color: #fecaca; border: 1px solid var(--bad); background: rgba(248, 113, 113, .08); border-radius: 10px;
    padding: .65rem .9rem; margin: .9rem 0 0; font-size: .92rem; }
.tool .status:empty, .tool .err:empty { display: none; }

/* Setup guide */
.tool .guide { margin-top: .9rem; color: var(--muted); font-size: .92rem; }
.tool .guide summary { cursor: pointer; width: max-content; }
.tool .guide summary:hover { color: #fff; }
.tool .guide ol { margin: .7rem 0 .3rem; padding-left: 1.2rem; }
.tool .guide li { margin-bottom: .45rem; }
.tool .guide a, .tool .guide strong { color: #fff; }
.tool .guide code { color: #fff; background: #000; border: 1px solid var(--line); border-radius: 6px; padding: .1rem .35rem;
    font-size: .82rem; word-break: break-all; }
.tool .hint { font-size: .82rem; margin: 0; }

/* Drop zone */
.tool .drop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; padding: 1.6rem 1rem;
    border: 1px dashed rgba(255, 255, 255, .3); border-radius: 12px; color: var(--muted); transition: background .2s ease, border-color .2s ease; }
.tool .drop.over { background: rgba(255, 255, 255, .06); border-color: #fff; }

/* Progress + filters */
.tool .bar { height: 3px; background: rgba(255, 255, 255, .12); border-radius: 3px; margin: 1rem 0 0; overflow: hidden; }
.tool .bar span { display: block; height: 100%; width: 0; background: #fff; box-shadow: 0 0 10px #fff; transition: width .2s ease; }
.tool .filters { margin: 1rem 0 .3rem; gap: .35rem; }
.tool .chip { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px;
    padding: .25rem .75rem; font: inherit; font-size: 12.5px; cursor: pointer; }
.tool .chip.active { color: #000; background: #fff; border-color: #fff; }
.tool .chip span { opacity: .7; }

/* Results table */
.tool .table-wrap { overflow-x: auto; }
.tool table.tracks { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .9rem; color: #fff; }
.tool .tracks th { text-align: left; font-weight: 400; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--muted); padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.tool .tracks td { padding: .5rem; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: middle; }
.tool .tracks tr.excluded td:not(.c-inc) { opacity: .45; }
.tool .c-inc { width: 2rem; }
.tool .c-act { width: 1%; white-space: nowrap; text-align: right; }
.tool .t-title { display: block; color: #fff; }
.tool .t-sub { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.tool .match { display: flex; align-items: center; gap: .55rem; min-width: 11rem; }
.tool .match img { width: 38px; height: 38px; border-radius: 4px; flex: none; object-fit: cover; background: #222; }
.tool .match a { text-decoration: none; }
.tool .match a:hover { text-decoration: underline; }
.tool .tag { display: inline-block; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px;
    padding: .05rem .45rem; border: 1px solid currentColor; margin-top: .2rem; }
.tool .tag.matched { color: var(--ok); }
.tool .tag.check { color: var(--warn); }
.tool .tag.none, .tool .tag.error { color: var(--bad); }
.tool .tag.dup, .tool .tag.pending { color: var(--muted); }
.tool .icon-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: .3rem; }
.tool .icon-btn:hover, .tool .icon-btn:focus-visible { color: #fff; outline: none; }

/* Manual search row */
.tool .fix td { background: rgba(255, 255, 255, .03); }
.tool .fix form { display: flex; gap: .5rem; flex-wrap: wrap; }
.tool .fix input { flex: 1 1 16rem; }
.tool .fix p { color: var(--muted); font-size: .85rem; margin: .5rem 0 0; }
.tool .cands { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.tool .cands button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: transparent;
    border: 1px solid var(--line); border-radius: 8px; color: #fff; font: inherit; padding: .35rem .5rem; cursor: pointer; }
.tool .cands button:hover, .tool .cands button:focus-visible { border-color: #fff; outline: none; }
.tool .cands img { width: 32px; height: 32px; border-radius: 4px; }

@media (max-width: 991.98px) { .tool { padding-top: 96px; } }
@media (max-width: 575.98px) {
    .tool .panel { padding: 1.1rem; }
    .tool .tracks th:nth-child(2), .tool .tracks td:nth-child(2) { max-width: 9rem; }
    .tool .match { min-width: 9rem; }
    .tool .match img { width: 32px; height: 32px; }
}