/* Shared chrome for the sound-library explore pages (crate, match, map).
   Same B&W contract as the Live Loops board: white page, black type and
   hairlines, red only for "playing", sharp corners, Jost + Montserrat. */
:root{ --bg:#ffffff; --ink:#000000; --accent:#D6202B; --mute:rgba(0,0,0,.45); --line:rgba(0,0,0,.15); }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--ink); font-family:'Jost',sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; }
button{ font-family:'Jost',sans-serif; }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.masthead{ padding:clamp(28px,5vw,60px) clamp(20px,5vw,56px) clamp(18px,2.5vw,28px); }
.wordmark{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(34px,6vw,64px); letter-spacing:-0.01em; line-height:0.9; margin:0 0 18px; }
.wordmark-link{ color:inherit; text-decoration:none; display:inline-block; transition:opacity .15s ease; }
.wordmark-link:hover{ opacity:.7; }
.masthead-rule{ border:none; border-top:1px solid var(--ink); margin:0 0 16px; }
.masthead-tagline{ font-weight:200; font-size:clamp(15px,1.6vw,19px); max-width:56ch; margin:0; }
.masthead-nav{ margin:14px 0 0; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500; display:flex; flex-wrap:wrap; gap:8px 18px; }
.masthead-nav a{ color:var(--ink); text-decoration:none; opacity:.45; padding:4px 0; }
.masthead-nav a:hover, .masthead-nav a[aria-current="page"]{ opacity:1; }

.controls{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; padding:0 clamp(20px,5vw,56px) 18px; }
.controls-left{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; }
.hint{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:400; opacity:0.4; margin:0; max-width:48ch; }
.status{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:400; opacity:0.55; margin:0; min-height:1.4em; }
.status.error{ color:var(--accent); opacity:1; }

.stepper{ display:flex; align-items:stretch; border:1px solid var(--ink); }
.stepper button{ background:none; border:none; font-weight:500; font-size:14px; color:var(--ink); cursor:pointer; padding:6px 13px; line-height:1; }
.stepper button:hover{ background:var(--ink); color:#fff; }
.stepper button:disabled{ opacity:0.25; cursor:default; background:none; color:var(--ink); }
.stepper output{ font-weight:500; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:9px 12px; min-width:84px; text-align:center; border-left:1px solid var(--ink); border-right:1px solid var(--ink); }

.btn{ background:none; border:1px solid var(--ink); font-weight:500; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); cursor:pointer; padding:9px 16px; }
.btn:hover{ background:var(--ink); color:#fff; }
.btn:disabled{ opacity:0.25; cursor:default; background:none; color:var(--ink); }
.btn.primary, .btn[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.btn kbd{ font-family:inherit; opacity:0.5; margin-left:8px; }
.btn.small{ font-size:10px; padding:6px 10px; }

.chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0 clamp(20px,5vw,56px) 18px; }
.chips-label{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.4; font-weight:400; margin:0 6px 0 0; }
.chip{ background:none; border:1px solid var(--ink); font-weight:500; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); cursor:pointer; padding:8px 12px; min-height:34px; }
.chip:hover{ background:var(--ink); color:#fff; }
.chip[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.chip small{ font-size:9px; opacity:0.55; margin-left:6px; letter-spacing:0.08em; }

.eyebrow{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.45; font-weight:500; margin:0; }
.playing-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:8px; vertical-align:middle; }

footer{ padding:28px clamp(20px,5vw,56px) 40px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.4; }

@media (pointer:coarse){
  .btn, .chip, .stepper button, .stepper output{ min-height:44px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}
@media (prefers-contrast: more){
  :root{ --mute:rgba(0,0,0,.8); --line:rgba(0,0,0,.5); }
}