/* wubmachine-v4.css
 *
 * Overrides for the browser build. Loaded AFTER application.css, which is kept
 * byte-identical to the original production stylesheet so it can be diffed
 * against the real site. Every intentional visual difference lives here.
 */

/* The three main-page actions (Choose a song / drag-and-drop / search
 * SoundCloud) are <a> elements with no href, so browsers give them the default
 * text cursor rather than a pointer. That was true on the original site too;
 * this is a deliberate improvement, not a restoration.
 *
 * Specificity has to beat application.css's long descendant chains
 * (`body #container #left .buttoncontainer .buttons a.button`), hence the
 * matching depth here rather than a bare `.button { }`. */
body #container #left .buttoncontainer .buttons a.button,
body #container #left .buttoncontainer .reporter a.button,
body #container #left .buttoncontainer .buttons .remixer,
body #container #left .buttoncontainer .group .remixer {
  cursor: pointer;
}

/* application.css paints a placeholder play button as the .ui360 container's
 * own background:
 *
 *     .ui360 { background: transparent url(./player/360-button-play.png)
 *                          no-repeat 14px 50%; }
 *
 * Its comment says "fake button shown before SM2 has started ... background
 * image will be removed via JS, in threeSixyPlayer.init()". SoundManager2
 * stripped it once it took over; we never run SM2, so it stayed and rendered
 * behind the real .sm2-360btn — two overlapping circles, offset by that 14px.
 * Remove the placeholder, since our button is present from the start. */
body #container #left .buttoncontainer .reporter #player .ui360 {
  background-image: none;
}

/* The "upload a song" button layers a transparent <input type=file> across its
 * whole area, and that input is what the mouse actually hits. application.css
 * does set `cursor: pointer` on it, but Safari (and some other WebKit builds)
 * ignore `cursor` on file inputs entirely and force the default arrow — so the
 * button reads as non-clickable there despite the CSS being correct.
 *
 * Taking the input out of hit-testing makes the <a> itself the topmost element,
 * so its pointer cursor applies everywhere. app.js compensates by forwarding
 * the anchor's click to `fileInput.click()`, which still counts as a user
 * gesture and opens the native picker. */
body #container #left .buttoncontainer .buttons a.button input[type=file] {
  pointer-events: none;
}

/* ...except anything explicitly disabled, which should read as unavailable.
 * `.disabled` is application.css's own pre-existing class, reused rather than
 * invented. */
body #container #left .buttoncontainer .buttons a.button.disabled,
body #container #left .buttoncontainer .buttons a.button[disabled],
body #container #left .buttoncontainer .reporter a.button.disabled,
body #container #left .buttoncontainer .reporter a.button[disabled] {
  cursor: default;
}