/* ui.css - the small shared building blocks every component draws with: the accent buttons,
   the search box, the chips, the rating bands and pill, the icon buttons, .tiny and the small
   form label. They are here, not in header.css, because the player window (PlayerHTML.php)
   uses the same components (related songs, Refine, the playlist picker, the lyrics panel)
   without the site chrome. Loaded after header.css on every page and by the player.
   Colours through the tokens in tokens.css only. */
.searchbox .form-control{border-radius:8px;padding-left:2.2rem}
.searchbox .bi{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--chrome-mut)}
.btn-ac{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.btn-ac:hover{background:var(--ac-h);border-color:var(--ac-h);color:var(--on-ac)}
.btn-ac-o{border:1px solid var(--ac);color:var(--ac);background:transparent}
.btn-ac-o:hover{background:var(--ac-soft);color:var(--ac);border-color:var(--ac)}
.tiny{font-size:.74rem}
.form-label.small{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:.2rem}
/* chips */
.chip{display:inline-block;font-size:.68rem;font-weight:600;padding:.13rem .5rem;border-radius:6px;color:var(--on-ac);white-space:nowrap}
.chip-genre{background:var(--genre)}.chip-cat{background:var(--ok)}.chip-lang{background:var(--lang)}.chip-tag{background:var(--tag)}.chip-list{background:var(--list);color:var(--list-ink)}
.chip-bad{background:var(--bad)}

/* rating bands: the one copy (song table, Discover, Reports, Charts, albums, items) */
.r90{background:var(--r90);color:var(--on-ac)}.r80{background:var(--r80);color:var(--on-ac)}.r70{background:var(--r70);color:var(--on-ac)}
.r60{background:var(--r60);color:var(--r60-ink)}.r50{background:var(--r50);color:var(--on-ac)}
.r00{background:transparent;color:var(--muted);border:1px solid var(--line)}
/* the rating pill (song table, Discover, Reports, Charts, albums) */
.rate{display:inline-block;min-width:34px;text-align:center;border-radius:6px;font-size:.74rem;font-weight:700;padding:.1rem .3rem;font-variant-numeric:tabular-nums}
.text-mut{color:var(--muted)!important}   /* stands in for an inline style="color:var(--muted)", so it wins the same way */

/* icon buttons */
.icon-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;padding:0;text-decoration:none}
.icon-btn:hover{border-color:var(--ac);color:var(--ac);background:var(--ac-soft)}
.icon-btn.sp-on{color:var(--spotify);border-color:color-mix(in srgb,var(--spotify) 40%,transparent)}
.icon-btn.sp-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.icon-btn.sp-off{opacity:.45}
/* icon-only buttons on filter bars: identical size whatever the glyph */
.btn-icon{width:2.1rem;height:2rem;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.btn-icon i{font-size:.95rem;line-height:1}
/* A toggle made of buttons (btn-check + btn-ac-o): the chosen one is FILLED in the accent colour,
   so it is obvious which is chosen (owner 2026-09-21). Applies everywhere: the search choices,
   the loader's scan dialog, the review pages. */
.btn-check:checked+.btn-ac-o,.btn-check:checked+.btn-ac-o:hover{background:var(--ac);color:var(--on-ac);border-color:var(--ac);font-weight:600}
.btn-check:focus-visible+.btn-ac-o{box-shadow:0 0 0 .2rem var(--ac-soft)}

/* Advanced filters (owner 2026-10-10, EntertainMe!'s pattern): on a phone a filter form shows one line - the
   fields without .af-adv, their labels hidden - and the .af-toggle button opens the rest. A dot on the
   button says an advanced field is set while it is closed (common.js AdvFilter). The desktop shows everything. */
.af-toggle{display:none;position:relative}
.af-toggle.af-set::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--ac)}
@media (max-width:991.98px){
  .af-toggle{display:inline-flex}
  .af-form:not(.af-open) .af-adv{display:none !important}
  .af-form .af-label{display:none}
  .af-form.af-open .af-toggle{background:var(--ac-soft);color:var(--ac);border-color:var(--ac)}
  .af-body{padding:.5rem .6rem}
}
/* a form with .af-lg keeps the Advanced button on the desktop too; its .af-adv-lg fields wait behind it */
@media (min-width:992px){
  .af-lg .af-toggle{display:inline-flex}
  .af-lg:not(.af-open) .af-adv-lg{display:none !important}
  .af-lg.af-open .af-toggle{background:var(--ac-soft);color:var(--ac);border-color:var(--ac)}
}

/* a tight filter form for a phone (c-form-tight): small labels close to their fields */
@media (max-width:991.98px){
  .c-form-tight .form-label{font-size:.66rem;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* toasts (showToast / showToastUndo in common.js): every page and the player (moved from header.css 2026-10-17) */
#toastHost{position:fixed;right:14px;bottom:14px;z-index:1080;display:flex;flex-direction:column;gap:.4rem;max-width:min(360px,calc(100vw - 28px))}
.c-toast{background:var(--surface);color:var(--chrome-ink);border:1px solid var(--line);border-left:4px solid var(--ac);border-radius:9px;padding:.55rem .8rem;font-size:.86rem;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.c-toast.success{border-left-color:var(--ok)}.c-toast.danger,.c-toast.error{border-left-color:var(--bad)}.c-toast.warning{border-left-color:var(--warn)}.c-toast.info{border-left-color:#0d6efd}

/* the removable filter chip (search, Discover): a click on it or its x drops that filter */
.ask-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .73rem; font-weight: 600;
            padding: .18rem .3rem .18rem .55rem; border-radius: 999px; border: 1px solid var(--ac);
            background: var(--ac-soft); color: var(--ac); }
.ask-chip a { color: inherit; text-decoration: none; }
.ask-chip a:hover { text-decoration: underline; }
.ask-chip button { border: 0; background: none; color: inherit; line-height: 1; padding: 0 .2rem; opacity: .7; }
.ask-chip button:hover { opacity: 1; }
.ask-chip.ask-chip-off { border-color: var(--line); background: transparent; color: var(--muted); }

/* owner 2026-10-18: every table row is top aligned, always (never middle) */
.table > :not(caption) > * > * { vertical-align: top; }

/* THE rating box (components/rateBox): wherever a rating shows it can be typed over; the band colour as the pill; no spinner arrows */
.rate-box{display:inline-block;width:46px;text-align:center;font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:700;padding:.08rem .2rem;height:25px;-moz-appearance:textfield;appearance:textfield}
.rate-box::-webkit-outer-spin-button,.rate-box::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}