/*
 * Sound Recording Library (users/mastertrack.php)
 * Everything is scoped under .srl and prefixed srl- so it can't collide with
 * Bootstrap 3 (.btn, .pager, .list ...) or the site's legacy stylesheets.
 */
.srl{
  --chrome:#0A1024; --chrome-2:#141C36; --chrome-line:#2A3457; --brand-fixed:#0433FF;
  --chrome-ink:#F2F5FF; --chrome-mute:#94A0C4;
  --paper:#F5F7FB; --surface:#FFFFFF; --surface-2:#EEF1F8; --sunk:#E4E9F3;
  --line:#D7DEEC; --line-soft:#E7ECF6;
  --ink:#101733; --ink-2:#3E4767; --mute:#6B7595; --faint:#98A1BC;
  --brand:#0433FF; --brand-ink:#FFFFFF; --brand-soft:#E6EAFF; --brand-line:#B9C4FF;
  --stop:#9E2A20; --stop-soft:#FBE6E3; --stop-line:#EDB6AF;
  --shadow-1:0 1px 2px rgba(16,23,51,.06), 0 2px 8px rgba(16,23,51,.05);
  --shadow-2:0 12px 32px rgba(16,23,51,.14), 0 2px 8px rgba(16,23,51,.08);
  --r:10px; --r-sm:6px;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --display:"Montserrat","Archivo",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-align:left
}
.srl.srl-has-player{padding-bottom:84px}
.srl *,.srl *::before,.srl *::after{box-sizing:border-box}
.srl h1,.srl h3{font-family:var(--display);margin:0;letter-spacing:-.01em;text-transform:none}
.srl button,.srl input,.srl select{font:inherit;color:inherit}
.srl button{cursor:pointer;background:none;border:none;padding:0}
.srl :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.srl *{animation:none!important;transition:none!important}}
.srl .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.srl-eyebrow{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute)}

/* ---------- search band ---------- */
.srl-band{background:var(--chrome-2);
  background-image:radial-gradient(1100px 200px at 12% -40%, rgba(4,51,255,.30), transparent 70%);
  border-bottom:1px solid var(--chrome-line);color:var(--chrome-ink);padding:26px 22px 22px}
.srl-band-in{max-width:1440px;margin:0 auto}
.srl-band h1{font-size:25px;font-weight:700;color:#fff;margin-bottom:16px}
.srl-searchbar{display:flex;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 6px 26px rgba(0,0,0,.3);max-width:820px}
.srl-searchbar input{flex:1;min-width:0;border:none;padding:14px 16px;font-size:15px;color:#101733;background:#fff;
  box-shadow:none;height:auto;margin:0}
.srl-searchbar input::placeholder{color:#98A1BC}
.srl-searchbar input:focus{outline:none}
.srl-searchbar button{background:var(--brand-fixed);color:#fff;padding:0 24px;font-weight:600;font-size:14px}
.srl-searchbar button:disabled{opacity:.7;cursor:default}

/* ---------- workspace / toolbar ---------- */
.srl-workspace{max-width:1440px;margin:0 auto;padding:20px 22px 40px}
.srl-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.srl-tool-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.srl-sel{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:6px 9px;font-size:12.5px;color:var(--ink-2);height:auto}
.srl-seg{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.srl-seg button{padding:6px 10px;font-size:12px;color:var(--mute);display:flex;align-items:center;gap:5px}
.srl-seg button.on{background:var(--ink);color:var(--paper)}
.srl-achip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand);
  border:1px solid var(--brand-line);border-radius:20px;padding:4px 6px 4px 11px;font-size:12px;font-weight:600}
.srl-achip button{color:inherit;opacity:.65;display:grid;place-items:center;width:16px;height:16px;border-radius:50%}
.srl-achip button:hover{opacity:1;background:rgba(4,51,255,.12)}

/* ---------- placeholder art ---------- */
.srl-art{position:relative;border-radius:var(--r-sm);overflow:hidden;flex:none;
  background:var(--sunk);display:grid;place-items:center;isolation:isolate}
.srl-art::after{content:"";position:absolute;left:50%;top:50%;width:34%;height:34%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 22%, rgba(255,255,255,.14) 23% 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.srl-art .ini{position:relative;z-index:2;display:block;font-family:var(--display);font-weight:800;color:#fff;
  letter-spacing:.01em;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.srl-art .sleeve-note{position:absolute;z-index:3;bottom:5px;left:6px;right:6px;font-family:var(--mono);
  font-size:8px;color:rgba(255,255,255,.72);letter-spacing:.04em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- grid cards ---------- */
/* Column counts are fixed per breakpoint (2/3/4/6) rather than auto-fill: a page is 24
 * results, and 24 doesn't divide by 5, so auto-fill left a hole in the last row. */
.srl-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
@media (max-width:1319px){.srl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:959px){.srl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.srl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-1);display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .16s ease,transform .16s ease}
.srl-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.srl-card-art{position:relative;aspect-ratio:1;width:100%}
.srl-card-art .srl-art{position:absolute;inset:0;border-radius:0}
.srl-card-art .srl-art .ini{font-size:40px}
.srl-play{position:absolute;z-index:4;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;
  background:rgba(10,16,36,.72)!important;backdrop-filter:blur(6px);display:grid;place-items:center;
  color:#fff!important;opacity:0;transform:translateY(5px);transition:.16s ease;border:1px solid rgba(255,255,255,.22)!important}
.srl-card:hover .srl-play,.srl-play.playing,.srl-play:focus-visible{opacity:1;transform:none}
.srl-play:hover{background:var(--brand-fixed)!important}
@media (hover:none){.srl-play{opacity:1;transform:none}}
.srl-card-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.srl-card-title{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srl-card-line{font-size:12.5px;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srl-card-line .k{color:var(--mute)}
.srl-card-meta{font-family:var(--mono);font-size:11px;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.srl-card-foot{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;padding-top:12px}
.srl-price{font-family:var(--mono);font-size:11px;color:var(--mute);line-height:1.2;display:flex;align-items:baseline;gap:6px}
.srl-price b{font-size:13px;font-weight:500;color:var(--ink)}
.srl-reqbtn{flex:1;min-width:0;background:#0043FF;color:#fff;border-radius:var(--r-sm);
  padding:9px 10px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:7px;line-height:1.2;transition:filter .14s ease}
.srl .srl-reqbtn{background:#0043FF;color:#fff}
.srl-reqbtn:hover{filter:brightness(1.12)}

/* ---------- list view ---------- */
.srl-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1)}
.srl-lhead,.srl-lrow{display:grid;grid-template-columns:44px minmax(0,2.4fr) minmax(0,1.6fr) 80px 90px 150px;
  gap:14px;align-items:center;padding:0 14px}
.srl-lhead{height:38px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.srl-lhead div{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}
.srl-lrow{min-height:64px;padding-block:10px;border-bottom:1px solid var(--line-soft)}
.srl-lrow:last-child{border-bottom:none}
.srl-lrow:hover,.srl-lrow.playing{background:var(--surface-2)}
.srl-lrow .srl-art{width:40px;height:40px}
.srl-lrow .srl-art .ini{font-size:13px}
.srl-lrow .srl-art::after{display:none}
.srl-lplay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;color:#fff;
  background:rgba(10,16,36,.45);opacity:0;transition:opacity .14s ease}
.srl-lrow:hover .srl-lplay,.srl-lplay.playing,.srl-lplay:focus-visible{opacity:1}
@media (hover:none){.srl-lplay{opacity:1}}
.srl-l-title{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srl-l-sub{font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srl-l-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--ink-2)}
.srl-l-actions{display:flex;justify-content:flex-end}
.srl-l-actions .srl-reqbtn{flex:none;padding:8px 12px;font-size:11.5px}

/* ---------- pagination ---------- */
.srl-pager{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 0;border-block:1px solid var(--line-soft)}
.srl-pager.top{margin-bottom:16px;border-top:none}
.srl-pager.bottom{margin-top:18px;border-bottom:none}
.srl-pg-range{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.srl-pg-range .of{font-family:var(--sans)}
.srl-pg-set{margin-left:auto;display:flex;align-items:center;gap:4px}
.srl-pg{min-width:30px;height:30px;padding:0 8px;border-radius:var(--r-sm);border:1px solid transparent!important;
  color:var(--ink-2);font-family:var(--mono);font-size:12px;display:grid;place-items:center}
.srl-pg:hover:not(:disabled):not(.on){background:var(--surface-2);border-color:var(--line)!important}
.srl .srl-pg.on{background:var(--ink);border-color:var(--ink)!important;color:var(--paper);font-weight:500}
.srl .srl-pg.nav{border-color:var(--line)!important;background:var(--surface);color:var(--mute)}
.srl-pg.nav:hover:not(:disabled){color:var(--ink)}
.srl-pg:disabled{opacity:.35;cursor:not-allowed}
.srl-pg-gap{color:var(--faint);padding:0 2px;font-family:var(--mono);font-size:12px}

/* ---------- empty / loading ---------- */
.srl-zero{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:44px 32px;text-align:center}
.srl-zero h3{font-size:17px;margin-bottom:6px}
.srl-zero p{color:var(--mute);font-size:13.5px;max-width:46ch;margin:0 auto 16px}
.srl-btn{background:var(--brand);color:var(--brand-ink);border-radius:var(--r-sm);padding:9px 16px;
  font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.srl .srl-btn{background:var(--brand);color:var(--brand-ink)}
.srl-btn:hover{filter:brightness(1.08)}
.srl-btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.srl-skel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.srl-skel i{display:block;background:var(--sunk);border-radius:4px;animation:srl-pulse 1.2s ease-in-out infinite}
.srl-skel .a{aspect-ratio:1;border-radius:0}
.srl-skel .t{height:12px;margin:12px 12px 8px;width:70%}
.srl-skel .s{height:10px;margin:0 12px 14px;width:45%}
@keyframes srl-pulse{50%{opacity:.5}}

/* ---------- request sheet ---------- */
.srl-scrim{position:fixed;inset:0;background:rgba(10,16,36,.55);backdrop-filter:blur(3px);z-index:1040;
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.srl-scrim.open{opacity:1;pointer-events:auto}
.srl-sheet{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--paper);z-index:1045;
  display:flex;flex-direction:column;box-shadow:var(--shadow-2);transform:translateX(100%);
  transition:transform .24s cubic-bezier(.3,.8,.3,1);visibility:hidden}
.srl-sheet.open{transform:none;visibility:visible}
.srl-sheet-top{background:var(--chrome);color:var(--chrome-ink);padding:12px 22px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--chrome-line)}
.srl-sheet-top .srl-eyebrow{color:var(--chrome-mute)}
.srl-sheet-top .ttl{font-family:var(--display);font-weight:700;font-size:15px;color:#fff}
.srl-xbtn{margin-left:auto;width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--chrome-mute)!important;border:1px solid var(--chrome-line)!important}
.srl-xbtn:hover{color:#fff!important;background:var(--chrome-2)!important}
.srl-sheet-body{flex:1;overflow-y:auto;padding:18px}
.srl-sheet-track{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line-soft);margin-bottom:16px}
.srl-sheet-track .srl-art{width:64px;height:64px}
.srl-sheet-track .srl-art .ini{font-size:18px}
.srl-sheet-track b{display:block;font-family:var(--display);font-size:15px;line-height:1.25}
.srl-sheet-track span{display:block;font-size:12.5px;color:var(--mute)}
.srl-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;margin:0 0 18px}
.srl-dl dt{color:var(--mute);font-weight:400}
.srl-dl dd{margin:0;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.srl-field label{display:block;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.srl-field input{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font-size:15px;
  background:var(--surface);height:auto}
.srl-field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.srl-field p{font-size:11.5px;color:var(--mute);margin:6px 0 0}
.srl-field.bad input{border-color:var(--stop)}
.srl-field.bad p{color:var(--stop)}
.srl-sheet-foot{border-top:1px solid var(--line);padding:16px;background:var(--surface)}
.srl-tally{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.srl-tally .tr{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2)}
.srl-tally .tr b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.srl-tally .tr.total{border-top:1px solid var(--line-soft);padding-top:8px;font-weight:600;color:var(--ink)}
.srl-tally .tr.total b{font-size:15px}
.srl-sheet-foot .srl-btn{width:100%}
.srl-fnote{font-size:11.5px;color:var(--mute);margin:10px 0 0;line-height:1.45;text-align:center}
.srl-err{background:var(--stop-soft);border:1px solid var(--stop-line);color:var(--stop);border-radius:var(--r-sm);
  padding:8px 11px;font-size:12.5px;margin-bottom:12px}

/* ---------- docked player ---------- */
.srl-player{position:fixed;left:0;right:0;bottom:0;z-index:1030;background:var(--chrome);
  border-top:1px solid var(--chrome-line);color:var(--chrome-ink);transform:translateY(110%);transition:transform .22s ease}
.srl-player.on{transform:none}
.srl-player-in{max-width:1440px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:16px;height:76px}
.srl-player .srl-art{width:52px;height:52px}
.srl-player .srl-art .ini{font-size:16px}
.srl-p-info{width:240px;flex:none;min-width:0}
.srl-p-info b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.srl-p-info span{font-size:12px;color:var(--chrome-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.srl-pbtn{width:40px;height:40px;border-radius:50%;background:#fff!important;color:var(--chrome)!important;display:grid;place-items:center;flex:none}
.srl-pbtn:hover{background:var(--brand-fixed)!important;color:#fff!important}
.srl-p-track{flex:1;min-width:0;display:flex;align-items:center;gap:11px}
.srl-p-track .t{font-family:var(--mono);font-size:11px;color:var(--chrome-mute);flex:none;width:34px}
.srl-p-track .t.r{text-align:right}
.srl-seek{flex:1;height:22px;display:flex;align-items:center;cursor:pointer;min-width:0}
.srl-seek .rail{position:relative;height:5px;width:100%;border-radius:3px;background:#39457E}
.srl-seek .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#5A78FF}
.srl-seek .knob{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff}
.srl-p-right{display:flex;align-items:center;gap:9px;flex:none}
.srl-p-note{font-size:10.5px;color:var(--chrome-mute);font-family:var(--mono);line-height:1.3}
.srl-p-err{font-size:11.5px;color:#F09287}
.srl-ghost{border:1px solid var(--chrome-line)!important;color:var(--chrome-ink)!important;border-radius:var(--r-sm);
  width:32px;height:32px;display:grid;place-items:center}
.srl-ghost:hover{background:var(--chrome-2)!important}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .srl-lhead,.srl-lrow{grid-template-columns:44px minmax(0,2fr) 80px 150px}
  .srl-hide-md{display:none!important}
}
@media (max-width:760px){
  .srl-workspace{padding:16px 16px 34px}
  .srl-band{padding:20px 16px 18px}
  .srl-band h1{font-size:20px}
  .srl-toolbar{gap:9px}
  .srl-tool-right{margin-left:0;width:100%}
  .srl-sel{flex:1}
  .srl-lhead,.srl-lrow{grid-template-columns:44px minmax(0,1fr) auto}
  .srl-hide-sm{display:none!important}
  .srl-player-in{padding:11px 16px;gap:12px}
  .srl-p-info{width:auto;flex:1}
  .srl-p-track,.srl-p-note{display:none}
  .srl-pager{gap:9px}
  .srl-pg-set{margin-left:0;width:100%;justify-content:space-between}
}
@media (max-width:620px){
  .srl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .srl-card-art .srl-art .ini{font-size:27px}
  .srl-card-title{font-size:13px}
  .srl-card-art .srl-art .sleeve-note{display:none}
  .srl-reqbtn{font-size:11px}
}

/* ---------- Groove help widget (injected by the site layout) ----------
 * Its launcher sits bottom-right, on top of the request sheet's Add to cart button.
 * Slide it left of the sheet while the sheet is open; on phones the sheet is full
 * width, so hide it instead. Uses the `translate` property so it can't clobber any
 * inline transform Groove sets. */
[id^="groove-container-"]{transition:translate .24s cubic-bezier(.3,.8,.3,1)}
body.srl-sheet-open [id^="groove-container-"]{translate:-430px 0}
/* and lift it above the docked preview player (76px + border) */
body.srl-player-open [id^="groove-container-"]{translate:0 -78px}
body.srl-sheet-open.srl-player-open [id^="groove-container-"]{translate:-430px -78px}
@media (max-width:480px){
  body.srl-sheet-open [id^="groove-container-"]{visibility:hidden}
}