/* ------------------------------------------------------------------
   reset.css — TV-safe reset.

   The important part is not the margin zeroing, it is the scroll and
   selection suppression: a TV browser will happily scroll the document
   under our feet on arrow keys, and a stray text selection highlight
   looks like a rendering bug from three metres away.
   ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;              /* the document never scrolls; panes do */
  overscroll-behavior: none;
  background: #000;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  cursor: none;                  /* there is no mouse; hide any stray pointer */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

img, video, canvas, svg {
  display: block;
  max-width: 100%;
  border: 0;
}

button, input, select, textarea {
  margin: 0;
  /* Padding too, not just margin. Chrome gives a <button> 1px 6px by
     default, and a poster card is a <button> — so every card in every grid
     sat its artwork 6px in from its own left and right edges, against the
     card's background. Components that want padding set their own. */
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

button { cursor: inherit; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* Nothing is selectable or draggable — both only produce artefacts on a TV. */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}

/* …except where we genuinely want text selection, e.g. the debug console. */
.selectable, .selectable * {
  -webkit-user-select: text;
  user-select: text;
}

/* We drive focus ourselves. The browser's own ring is never correct here. */
:focus { outline: none; }

[hidden] { display: none !important; }
