/* Targets a 1280x720 TV surface. MAG boxes render at 720p by default and
   overscan a little, so everything sits inside a safe margin. Deliberately
   plain CSS - the MAG WebKit build has patchy flex/grid support. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The design is a fixed 1280x720 TV surface. On the MAG box that is exactly
   the screen. In a desktop browser the window is usually smaller, so #app is
   scaled to fit rather than letting the window scroll - a scrolling window
   makes the whole thing feel broken to a mouse user. */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d1117;
}

body {
  color: #e6edf3;
  font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
  font-size: 22px;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  height: 720px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/* --- chrome ---------------------------------------------------------- */

#header {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 74px;
  padding: 22px 48px 0 48px;
  background: #161b22;
  border-bottom: 2px solid #2d3745;
}
#back {
  display: none;
  margin-right: 22px;
  padding: 4px 18px;
  font-size: 20px;
  color: #e6edf3;
  background: #263141;
  border: 1px solid #3a4757;
  border-radius: 6px;
  cursor: pointer;
  vertical-align: 3px;
}
#back:hover { background: #33415a; }
#back.on { display: inline-block; }
#crumb { font-size: 26px; font-weight: bold; color: #f0c674; cursor: pointer; }
#clock { float: right; font-size: 22px; color: #8b98a6; }

#footer {
  position: absolute; bottom: 0; left: 0;
  width: 1280px; height: 56px;
  padding: 16px 48px;
  background: #161b22;
  border-top: 2px solid #2d3745;
  font-size: 17px;
  color: #8b98a6;
  white-space: nowrap;
}
#footer .k { margin-right: 26px; }
#footer .k b { color: #e6edf3; font-weight: normal; }
#footer .red b { color: #f2777a; }
#footer .green b { color: #99c794; }
#footer .yellow b { color: #f0c674; }

/* --- main area ------------------------------------------------------- */

#screen { position: absolute; top: 74px; left: 0; width: 1280px; height: 590px; }

#list {
  position: absolute; top: 0; left: 48px;
  width: 780px; height: 590px;
  padding-top: 14px;
}

.row {
  position: relative;
  height: 44px;
  line-height: 44px;
  padding: 0 18px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
  color: #c9d4e0;
}
.row { cursor: pointer; }
.row:hover { background: #1b2531; }
.row.sel, .row.sel:hover { background: #1f6feb; color: #fff; font-weight: bold; }
.row .count { float: right; color: #7d8b9a; font-size: 18px; }
.row.sel .count { color: #cfe3ff; }
.row .badge {
  float: right;
  margin-left: 12px;
  font-size: 15px;
  color: #0d1117;
  background: #f0c674;
  border-radius: 3px;
  padding: 0 8px;
  line-height: 26px;
  margin-top: 9px;
}
.row .tick {
  display: inline-block;
  width: 56px;
  font-size: 16px;
  font-weight: bold;
}
.row .tick.on { color: #99c794; }
.row .tick.off { color: #5b6673; font-weight: normal; }
.row .lock { display: inline-block; width: 46px; font-size: 15px; color: #f2777a; }
.row.dim { color: #5b6673; }

#scrollbar {
  position: absolute; right: -22px; top: 14px;
  width: 6px; height: 560px;
  background: #21262d; border-radius: 3px;
}
#thumb { position: absolute; left: 0; width: 6px; background: #58697d; border-radius: 3px; }

/* --- side panel ------------------------------------------------------ */

#side {
  position: absolute; top: 14px; left: 890px;
  width: 344px; height: 560px;
}
#poster {
  display: none;
  width: 344px; max-height: 300px;
  background: #161b22;
  border: 1px solid #2d3745;
  border-radius: 6px;
}
#meta { margin-top: 18px; font-size: 19px; line-height: 30px; color: #8b98a6; }
#meta b { color: #e6edf3; display: block; font-size: 23px; margin-bottom: 10px; }

/* --- player ---------------------------------------------------------- */

#player {
  display: none;
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  background: #000;
  z-index: 50;
}
#player.on { display: block; }
#video { width: 1280px; height: 720px; background: #000; }

/* On a MAG box the hardware video plane sits BEHIND the browser layer, so every
   surface in front of it has to be see-through or the picture is hidden by an
   opaque black page. The class is only added while the box is playing. */
html.stb-playing,
html.stb-playing body,
html.stb-playing #app,
html.stb-playing #screen,
html.stb-playing #player,
html.stb-playing #video {
  background: transparent !important;
}
html.stb-playing #video { display: none; }
html.stb-playing #list,
html.stb-playing #side,
html.stb-playing #header,
html.stb-playing #footer { visibility: hidden; }

/* YouTube cannot go to the box's decoder, so it plays in YouTube's embedded
   player, in a frame covering the whole screen. */
#yt { display: none; position: absolute; top: 0; left: 0; width: 1280px; height: 720px; }
#yt iframe { width: 1280px; height: 720px; border: 0; background: #000; }
#player.yt #yt { display: block; }
#player.yt #video { display: none; }
#yt-close {
  display: none;
  position: absolute; top: 84px; left: 18px;   /* below YouTube's title bar */
  padding: 6px 18px;
  font-size: 20px;
  background: rgba(13, 17, 23, 0.85);
  border: 1px solid #3a4757;
  border-radius: 6px;
  cursor: pointer;
}
#player.yt.desk #yt-close { display: block; }

#osd {
  position: absolute; left: 0; bottom: 0;
  width: 1280px;
  padding: 30px 48px 40px 48px;
  background: rgba(13, 17, 23, 0.85);
}
#osd.hide { display: none; }
#osd-title { font-size: 34px; font-weight: bold; }
#osd-sub { font-size: 20px; color: #8b98a6; margin-top: 8px; }

#ad-header {
  float: right;
  margin-right: 22px;
  margin-top: 2px;
  padding: 3px 12px;
  font-size: 14px;
  color: #8b98a6;
  background: #1b222c;
  border: 1px solid #2d3745;
  border-radius: 12px;
  cursor: pointer;
}
#ad-header b {
  color: #f0c674;
  font-weight: bold;
}
#ad-header:hover {
  border-color: #3d4b5e;
  color: #c9d4e0;
}

#ad-side {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 344px;
  padding: 10px 14px;
  background: rgba(22, 27, 34, 0.75);
  border: 1px solid #2d3745;
  border-left: 3px solid #58a6ff;
  border-radius: 6px;
  cursor: pointer;
}
#ad-side .ad-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.8px;
  color: #8b98a6;
  background: #21262d;
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
}
#ad-side .ad-sponsor {
  font-size: 13px;
  color: #f0c674;
  margin-left: 6px;
  font-weight: bold;
}
#ad-side .ad-head {
  font-size: 15px;
  font-weight: bold;
  color: #c9d4e0;
  line-height: 20px;
  margin-bottom: 2px;
}
#ad-side .ad-sub {
  font-size: 13px;
  color: #6e7681;
  line-height: 17px;
}
#ad-side .ad-cta {
  margin-top: 4px;
  font-size: 13px;
  color: #58a6ff;
}

#ad-overlay {
  display: none !important;
}

#buffering {
  display: none;
  position: absolute; top: 330px; left: 0;
  width: 1280px;
  text-align: center;
  font-size: 26px;
  color: #8b98a6;
}
#buffering.on { display: block; }

/* --- modal / toast --------------------------------------------------- */

#modal {
  display: none;
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  background: rgba(0, 0, 0, 0.75);
  z-index: 60;
}
#modal.on { display: block; }
#modal-box {
  position: absolute; top: 230px; left: 340px;
  width: 600px;
  padding: 36px 40px;
  background: #161b22;
  border: 2px solid #2d3745;
  border-radius: 10px;
}
#modal-title { font-size: 26px; margin-bottom: 24px; }
#modal-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 30px;
  letter-spacing: 4px;
  height: 54px;
  line-height: 34px;
  padding: 8px 14px;
  background: #0d1117;
  border: 2px solid #1f6feb;
  border-radius: 6px;
  color: #fff;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#modal-input:focus {
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.35);
}
#modal-hint { margin-top: 18px; font-size: 18px; color: #8b98a6; }

/* On-screen keyboard. inline-block rather than flex: older MAG browsers
   predate flexbox. */
#modal.keys #modal-box { top: 50px; }
#modal-keys { margin-top: 18px; }
.krow { white-space: nowrap; }
.key {
  display: inline-block;
  width: 50px;
  margin: 0 6px 6px 0;
  line-height: 44px;
  text-align: center;
  font-size: 22px;
  background: #0d1117;
  border: 2px solid #2d3745;
  border-radius: 6px;
  color: #c9d1d9;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.key.wide { width: 86px; font-size: 18px; }
.key.sel { background: #1f6feb; border-color: #58a6ff; color: #fff; }

/* Numeric keypad for PIN */
#modal.num-keys #modal-box { top: 60px; }
#modal.num-keys #modal-keys { text-align: center; }
#modal.num-keys .key {
  width: 96px;
  line-height: 52px;
  font-size: 26px;
  margin: 0 10px 10px 0;
}
#modal.num-keys .key.wide {
  width: 96px;
  font-size: 18px;
}

#volume {
  display: none;
  position: absolute; left: 240px; bottom: 120px;
  width: 800px; height: 74px;
  padding: 18px 26px;
  background: rgba(13, 17, 23, 0.92);
  border: 2px solid #2d3745;
  border-radius: 10px;
  z-index: 65;
}
#volume.on { display: block; }
#vol-icon {
  float: left;
  width: 74px;
  font-size: 20px;
  font-weight: bold;
  color: #f0c674;
  line-height: 34px;
}
#vol-track {
  float: left;
  width: 560px; height: 20px;
  margin-top: 7px;
  background: #21262d;
  border-radius: 10px;
  overflow: hidden;
}
#vol-fill { height: 20px; width: 0; background: #1f6feb; }
#volume.muted #vol-fill { background: #a32e2e; }
#vol-label {
  float: right;
  width: 90px;
  text-align: right;
  font-size: 24px;
  line-height: 34px;
}

#toast {
  display: none;
  position: absolute; bottom: 74px; right: 48px;
  padding: 14px 26px;
  background: #1f6feb;
  border-radius: 6px;
  font-size: 20px;
  z-index: 70;
}
#toast.on { display: block; }
#toast.warn { background: #a35b00; }
#toast.err { background: #a32e2e; }